Saltar al contenido

Cómo configurar AMP en WordPress paso por paso

¿Qué es y cómo funciona AMP en WordPress?

AMP proporciona sólo la funcionalidad básica a los usuarios, lo que significa que AMP elimina el javascript innecesario y otras cosas que ralentizan tu sitio web, pero no toca el contenido, el contenido se mostrará al usuario tal cual es.

Si estás usando Páginas Móviles Aceleradas, entonces tendrás una versión AMP de las páginas y una página normal. Se puede acceder a la versión AMP de la página añadiendo /amp/ a las páginas. Sin embargo, los usuarios no accederán a la versión amplificada si están accediendo a sus páginas normalmente, accederán a ellas principalmente cuando los motores de búsqueda como google las refieran a la versión AMP, lo que hace google si el usuario está utilizando el móvil.

¿Debería usar Páginas Móviles Aceleradas (AMP) con WordPress

Para entender si debes usar AMP o no, debes considerar estas cosas:

Ventajas de AMP

  • Mejora la velocidad.
  • Si tienes visitantes móviles, mejorará su experiencia.
  • Algunas personas están diciendo, que podría ser un factor de clasificación en los motores de búsqueda en el futuro. Pero dudo que alguna vez sea un factor de clasificación.

Desventajas de AMP

  • Eliminará la mayoría de las funcionalidades de tu sitio web.
  • Hará que tu sitio web, un sitio web de aspecto antiguo que tendrá algunas funcionalidades básicas con contenido solamente.

Ahora, decide tú mismo.

Cómo configurar páginas AMP con WordPress

Para habilitar AMP para tus páginas de blog de WordPress, puedes añadir el plugin AMP de Automattic.

Después de habilitar el plugin, sus entradas y páginas de blog tendrán una versión AMP, a la que se puede acceder añadiendo /amp/ a la URL. Sin embargo, no soporta una versión AMP para la página principal o los archivos.

Notarás que el plugin no provee ninguna configuración u opciones para manipular las páginas de la versión del amplificador.

Para ello, puedes instalar el plugin de Pagefrog, que te dará las siguientes opciones. (Sí, tendrás que usar ambos plugins).

  • Manipulación limitada en el estilo de las páginas de la versión AMP.
  • Puedes habilitar los artículos de Facebook Instantáneo
  • Puede añadir código analítico
  • Puede habilitar anuncios

¿Utilizas el plugin Yoast SEO?

Si utilizas Yoast SEO plugin, puedes utilizar un nuevo plugin por ellos para integrar metadatos, como el plugin AMP por Automattic cambia los metadatos.

La versión actualizada de Yoast AMP plugin proporciona más funcionalidad y se puede utilizar como una alternativa a Pagefrog plugin. La versión actualizada proporciona estas funcionalidades:

Habilitar o deshabilitar la versión amplificada de mensajes y páginas

  • Icono AMP e imagen por defecto.
  • Puedes añadir código de Google Analytics.
  • Estilizar los mensajes y las páginas AMP.

¿Cómo ve google las páginas en WordPress con AMP?

Una vez que hayas terminado con todos los plugins, compruebe sus páginas AMP con la herramienta de pruebas de datos estructurados, Google incluso creó una página específica en su Consola de búsqueda para páginas móviles aceleradas.

Puedes comprobar si hay problemas relacionados con AMP en la página navegando a Consola de búsqueda > Apariencia de búsqueda > Páginas móviles aceleradas.

Errores conocidos de páginas móviles aceleradas mostrados en la Consola de búsqueda de Google

La consola de búsqueda de Google tiene una sección dedicada a las páginas móviles aceleradas, donde se pueden ver varios detalles como el número de páginas indexadas de la versión AMP y los errores.

Valores de atributo no válidos: src=https://cdn.ampproject.org/v0.js’ defer=’defer

Estaba recibiendo este error continuamente en mi consola de búsqueda para un gran número de páginas.

Esto fue causado por una configuración del plugin (en mi caso era Speed Booster) que estaba haciendo que todos los archivos javascript se cargaran de forma sincronizada, no había nada malo en cargar los archivos en modo sincronizado, el problema era que la etiqueta no se estaba añadiendo correctamente.

Por lo tanto, tuve que añadir el archivo en excepción y eso resolvió el problema.

2. Faltan las etiquetas requeridas:

Script amphtml engine v0.js y errores de sintaxis desconocidos:amp-anim extension.js script requerido por amp-anim

El problema era el mismo que el primero y la solución también es la misma.

3. Datos estructurados (Error en el artículo de schema.org)

Estaba obteniendo este error, debido a la ausencia de imágenes destacadas en algún artículo. Añadí una imagen por defecto usando el plugin Yoast AMP.

Transcripción del video sobre cómo configurar AMP en WordPress

Alguna vez te has preguntado como hacer que tu sitio web tenga esta función llamada AMP.

Si eres usuario de WordPress has llegado al video correcto, te mostraré los plugins que necesitas para hacer que funcione esta característica y ademas el como verificar que esté funcionando apropiadamente.

Bienvenido.

Accelerated Mobile Pages Project o también conocido como AMP, que es exactamente y cuales son los beneficios, cubriremos esta parte antes de ir al tutorial.

Y esencialmente AMP lo que hace es acelerar por mucho las páginas web de tu sitio especialmente para los dispositivos móviles, esta característica lo has estado viendo ya en Facebook con una función llamada Instant Articles la cual al click hace que la pagina cargue en ese momento.

Sin embargo si das click en un articulo que no tiene estas características AMP o instantáneas inclusive conectado a una conexión rápida de internet podrá tomar 2 o 3 segundos en cargar el contenido, a veces mas.

Los artículos instantáneos cargan inmediatamente y esencialmente la version de esto para Google se llama AMP.

Así que veamos cual es la diferencia, estamos a mi sitio web y elegimos una publicación de blog, esta es la version normal que un usuario puede encontrar al navegar por el sitio web.

Sin embargo la version que recoge Google para mostrar desde el buscador de este mismo articulo es la siguiente, a la dirección que tienes en la parte superior agregas la terminación AMP.

Esta es la version de articulo instantáneo, si puedes observar todas las características de diseño se fueron para solo dejar visibles el cuerpo del contenido del blog, no hay widgets, pop-ups, nada que pueda alentar el sitio web, por eso es instantáneo.

Si la persona quisiera seguir navegando en nuestro sitio tiene que dar click en la parte superior para ir directamente a la pagina web pero ya version normal.

Así que esta es la diferencia entre una pagina normal y una con AMP.

Ahora si, para instalar esta función en tu sitio web con plataforma WordPress necesitas instalar el siguiente Plugin, en la descripción te dejo el link.

Este plugin se llama AMP, descárgala e instalala como cualquier otro plugin a tu WordPress, hago el proceso el pantalla por si no sabes como hacerlo.

Puedes pausar el video en cualquier momento si es que voy muy rápido para ti.

Ya instalado este plugin ahora te recomiendo ampliamente utilizar este otro si es que utilizas YOAST SEO, el cual te permitirá darle formato a la función AMP.

Este plugin se llama Glue for Coast SEO & AMP.

Y me ha permitido no tener que lidiar con el código de forma directa de esta nueva función que le estamos implementando a nuestro sitio web.

Así que descárgalo e instalado también.

No olvides activar ambos.

Ya una vez hecho lo anterior ve a tu panel de administración de WordPress.

Si observas detenidamente tu barra lateral izquierda, en el apartado de SEO que es el del plugin Coast se agregó un nuevo renglon llamado AMP.

Lo ves? Da click en este y una de las cosas que modifiqué y espero que me sigas en este punto.

En la primera pestaña con el nombre Post-Type dejé activado la opción de AMP para publicaciones o Posts y las demás desactivadas, esto con una razón importante, al momento de hacer este video AMP solo funciona para entradas de blog y no para el resto del sitio, el mismo google dice que eventualmente tendrán soporte para el sitio web completo, de momento no es así, puedes preguntarme en los comentarios si ha habido cambios para que puedas activar las demás opciones, de momento las dejamos como lo ves en pantalla.

Ahora en la pestaña de diseño, tienes la opción de agregar un icono en la parte superior de tu pagina optimizada con AMP que te recomiendo hacerlo.

La imagen de Default es importante que la coloques, no es tu logotipo, es una imagen que aparece cuando copias la URL y la sueltas por ejemplo en una red social, es una imagen que da una previsualizacion de la pagina, en este caso una imagen normal con tu marca para el truco, pero no lo dejes vacío ya que llega a presentar problemas de estabilidad.

El otro cambio que realice es en la sección de links en donde estos vienen por default en blanco y siempre he dicho que los links deben sobresalir del resto del texto, por esta razón te recomiendo colocarlo en un color como azul, para que destaque.

Y finalmente en la pestaña de Analytics coloca tu código de Google Analytics para que puedas conocer el numero de visitas que llegan a estas versiones de hoja, te sorprenderá.

Ahora como puede aprobar que todo esto funcione correctamente Todo lo que necesitamos hacer ahora es ir a una publicación.

En pantalla observamos la version normal o web.

Para comprobar si la version amp esta funcionando es necesario agregar manualmente al final de la dirección web que aparece en tu navegador la palabra AMP justo como lo estamos haciendo en pantalla.

Si ves que aparece esta version simplificada es por que está funcionando, pero si quieres saber por un tercero si esta version está instalada correctamente te recomiendo ir al Validador de Merkel SEO, también te dejo el link en la descripción.

Desde esta plataforma podrás ver si pasa la evaluación de amp.

Necesitas colocar la dirección con la terminación AMP y no olvides colocar al final la diagonal que por alguna razón sin está no funciona este sistema.

Y ahi lo tienes, version AMP funcionando correctamente para esta y las demás entradas de tu sitio web, esto le dará un gran impulso de posicionamiento a tu pagina de internet en Google version dispositivos móviles y proveerás una experiencia extraordinaria a los visitantes que a partir de ahora encuentren y entren a tu sitio web.

En otro video te explicaré como aplicar esto mismo de los artículos instantáneos ahora para Facebook

Cómo añadir Google Adsense en AMP

Las páginas móviles aceleradas son un componente importante de «Mobile-First-SEO». Incluso las páginas de WordPress optimizadas casi a la perfección para dispositivos móviles no pueden seguir el rendimiento de la forma especial de visualización AMP.

Quién genera sus ingresos con la integración de anuncios de AdSense, no quisiera hacer naturalmente también en el lado de AMP sin los anuncios de rendimiento de Google. La integración de AdSense es especialmente fácil cuando se utiliza un plugin AMP.

Uso de AdSense en AMP: super sencillo gracias al plugin

Existen varias formas de integrar AdSense en páginas móviles aceleradas:

  1. integración manual de las unidades publicitarias
  2. Integración de anuncios automáticos AdSense

El procedimiento también difiere dependiendo de si se utiliza un plugin AMP o si se integra AMP manualmente en WordPress. Siempre es más rápido y cómodo con un plugin, por lo que queremos centrarnos en esto en este manual.

Crear unidades de anuncios de AdSense manualmente

En primer lugar debe insertar el siguiente código dentro de la etiqueta <head> de tu página AMP:

https://cdn.ampproject.org/v0/amp-ad-0.1.js

Este código asegura que las bibliotecas de amplificación necesarias estén cargadas – pero las pantallas todavía no se reproducen de esta manera. Si está utilizando un plugin como AMP para WP, sólo tiene que navegar a AMP→ Settings → Advanced Settings e insertar el script bajo «Enter HTML in Head».

Ahora cree una nueva unidad de anuncios con capacidad de respuesta en su cuenta de AdSense y recupere el código. En la actualidad, AMP sólo soporta texto y muestra pantallas de red. Los anuncios In-Feed e In-Article-Ads pueden ignorarse. Todo debería parecerse a esto:

DIFUNDE LA PALABRA-

AMP-3

Subtítulos por aRGENTeaM

 style="display:block"

 data-ad-client="ca-pub-1234567891234567"

 data-ad-slot="1234567891"

 data-ad-format="auto"

 data-full-width-responsive="true"></ins>

<script>

(adsbygoogle = window.adsbygoogle |||| []).push({});

</script>

Sin embargo, este código ahora necesita ser adaptado un poco. Si utiliza el plugin AMP para WP no tiene que hacer nada, excepto introducir los valores marcados en negrita (aquí sólo valores de ejemplo) en el itemSettings → Anuncio para la posición donde el anuncio debe ser reproducido. También activa el control deslizante «Responsive Ad unit».

Si usas el plugin AMP de Automattic o si no usas ninguno, tendrás que cambiar el código de visualización manualmente. Utilice la siguiente plantilla y sustituya los elementos «data-ad-client» y «data-ad-slot» por sus propios valores.

Subtítulos por aRGENTeaM

 type="adsense;&lt;/ i&gt

 data-ad-client="ca-pub-1234567891234567"

 data-ad-slot="1234567890"

 data-auto-format="rspv"

 data-full-width>

 <div overflow></div>

</amp-ad>

(Fuente: Google Support)

Uso de anuncios automáticos de AdSense en AMP

Es aún más fácil integrar anuncios en AMP con los anuncios automáticos AdSense de Google. Para ello, abra su cuenta de AdSense y vaya a Páginas de contenido → Visualización automática → Visualización automática para AMP. Allí verá dos guiones. Copie el primero en el área <head> de su plantilla AMP:

<script async custom-element=»amp-auto-ads
«src=
«https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js»></script>

Coloque el segundo script en el <body> de la página AMP:

DIFUNDE LA PALABRA-
 data-ad-client="ca-pub-1234567891234567">
</amp-auto-ads>

El Id. de editor (en negrita aquí) es, por supuesto, suyo cuando copie el código en su cuenta de AdSense.

En el plugin AMP para WP puede añadir <body>- y <head>-code en Settings → Advanced Settings.

Sin el plugin tienes que almacenar el código en el archivo functions.php de la plantilla AMP.

La navegación móvil se ha convertido en la principal forma en que la mayoría de la gente utiliza Internet. Como tal, cualquier desarrollador que no esté adoptando un enfoque de»móvil primero» probablemente va a defraudar a sus clientes.

Afortunadamente, si usted es nuevo en el desarrollo de mobile-first, hay muchas soluciones fáciles que puede poner en marcha. Uno de los más importantes es Accelerated Mobile Pages (AMP). Ya hemos hablado de este tema en el blog, pero tres años después, es hora de volver a examinar el tema y ver cómo ha evolucionado la tecnología.

En este artículo, veremos AMP y por qué es importante en más detalle. Además, hablaremos de cómo implementarlo en WordPress. Vamos a empezar!

Una (Re)Introducción a las Páginas Móviles Aceleradas

Comencemos con lo básico, para asegurarnos de que estamos en la misma página. AMP es una iniciativa liderada por Google para mejorar la web móvil. También hay otros colaboradores involucrados, como WordPress, Twitter, LinkedIn, y varios editores de noticias.

El objetivo principal de AMP es mejorar la velocidad de las páginas móviles. Después de todo, este es un factor de ranking significativo y es una preocupación de usabilidad para aquellos que navegan por la web en dispositivos móviles. Navegar por la web a través de pantallas más pequeñas se ha convertido en la norma últimamente, y los ordenadores de sobremesa se han convertido en un»viejo sombrero».

Como puede imaginar, vale la pena perseguir cualquier aumento de la velocidad y la eficiencia que se pueda conseguir. Para promover mejoras en estas áreas, AMP elimina elementos no esenciales de las páginas web e incluye algunas etiquetas HTML»especializadas». El resultado es una versión bastante simple de un sitio web, pero sin preocupaciones sobre la velocidad o el ancho de banda.

Esta última ventaja se debe al medio de entrega. Como las páginas AMP son tan pequeñas (en términos de tamaño de archivo), Google las almacena en sus propios servidores. Cada página web afectada se convierte en una versión habilitada para AMP (a la que se puede acceder añadiendo /amp al final de la URL) y se almacena hasta que se necesite. De esta manera, los beneficios de un sitio web de carga rápida en dispositivos móviles son alcanzables para casi todo el mundo.

Por qué el AMP sigue siendo importante en 2019

AMP ha sido un cambio enorme y significativo desde su inicio, aunque ahora se habla de él con menos frecuencia, ya que muchos se han establecido en el uso de la tecnología por defecto. Sin embargo, esto no significa que pueda (o deba) pasarse por alto.

Google sigue utilizando AMP para determinar determinados resultados de búsqueda. Por ejemplo, las páginas AMP tienen la oportunidad de aparecer en carruseles dedicados en la parte superior de las páginas de búsqueda relevantes.

Esto por sí solo hace que AMP valga la pena echar un vistazo. Sin embargo, como mencionamos anteriormente, el argumento número uno para usar esta tecnología es el rendimiento. AMP es igual a velocidad, lo que es un factor significativo para obtener un alto ranking de búsqueda. Es más, dado que Google está detrás de esta iniciativa en particular, cualquier desarrollador inteligente querrá instalarlo en los sitios de sus clientes.

Cómo se compara el AMP actual con la versión original

En este punto, vale la pena señalar que la tecnología AMP ha permanecido relativamente inalterada a lo largo del tiempo. En cambio, son las consideraciones periféricas las que han evolucionado en los últimos tres años más o menos. La principal diferencia entre la versión inicial de AMP y la versión actual es la introducción de la indexación móvil.

Esta tecnología llegó en marzo de 2018, y hasta ahora cerca de la mitad de los sitios habilitados para AMP han sido indexados. Sin embargo, sólo se trata de unos 300 millones de sitios, de un potencial de tres mil millones de sitios móviles (alrededor de un cuarto de la web).

En la indexación móvil-primero, los robots de los motores de búsqueda rastrean la versión móvil de un sitio en lugar de la versión de escritorio. Esta última opción ha sido (por supuesto) el estándar hasta ahora, pero esto está cambiando lentamente. Sin embargo, sólo se incluyen aquellos sitios móviles que implementan las mejores prácticas de AMP, lo que da a todo el mundo un incentivo para centrarse en el desarrollo de la tecnología móvil en primer lugar y convertirse potencialmente en un pionero de la indexación de AMP.

Cómo puede implementar AMP moderno en un sitio web de WordPress

La buena noticia es que es increíblemente sencillo empezar a trabajar con AMP en un sitio web de WordPress. Lo primero que querrá comprobar es el plugin oficial de AMP en el directorio de WordPress:

Vale la pena señalar que las calificaciones de este plugin en particular no son tan altas como podrían ser. Sin embargo, la mayoría de las revisiones de una estrella se dejaron hace más de un año, y el plugin está ahora en su primera versión real (en lugar de la beta anterior). También soporta cuatro temas por defecto, y se integra bien con el nuevo editor de bloques de WordPress.

Como alternativa, puede que también quiera echar un vistazo a AMP para WP, especialmente ahora que un parche de seguridad crítico ha sido lanzado recientemente:

El plugin oficial no ofrece mucha personalización, pero AMP para WP es diferente. Proporciona un montón de herramientas para crear un sitio habilitado para AMP al mismo tiempo que preserva la marca de su cliente. De cualquier manera, la opción de usar simplemente un solo plugin representa la mayor mejora en la forma en que los desarrolladores pueden implementar AMP en un sitio web de WordPress.

Conclusión

Sólo hay tres cosas que son ciertas en la vida: la muerte, los impuestos y los propietarios de sitios web que quieren velocidades más rápidas. No podemos ayudarle con las dos primeras, pero la iniciativa de las Páginas Móviles Aceleradas (AMP) es una excelente manera de abordar la tercera. Aunque la tecnología todavía no es perfecta, ofrece suficientes beneficios como para que casi todos los que tienen un sitio web quieran participar.

Para aquellos que desarrollan para sitios de WordPress, hay un plugin oficial que puedes usar para implementar fácilmente AMP. Lo que es más, hay alternativas que también puede probar. El plugin AMP para WP ofrece muchas opciones de personalización por defecto y es la solución ideal para más de 100.000 usuarios. Cualquiera de las dos herramientas puede ser un recurso invaluable para los desarrolladores de WordPress que buscan construir sitios mejor optimizados.

¿Es usted un adoptador de AMP, y qué piensa de la tecnología? Háganoslo saber en la sección de comentarios a continuación!