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;</ 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.