Cómo configurar AMP en WordPress paso por paso

Cómo configurar AMP en WordPress paso por paso
5 (100%) 1 vote

¿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 su sitio web, pero no toca el contenido, el contenido se mostrará al usuario tal cual es.

Si está usando Páginas Móviles Aceleradas, entonces tendrá 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 debe usar AMP o no, debe considerar estas cosas:

Ventajas de AMP

  • Mejora la velocidad.
  • Si usted tiene 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 su sitio web.
  • Hará que su 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 utiliza Yoast SEO plugin, puede 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 haya 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 instalada 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 checar 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