WordPress y AMP: Cómo crear páginas AMP para tu contenido

¿Quieres crear páginas AMP en WordPress? Hace ya unos cuantos años, Google nos empezó a meter por los ojos las páginas AMP, y todos los que tienen un blog con WordPress lo tienen más fácil para crear una versión de este tipo de páginas «ultra rápidas». Te cuento algunos trucos para hacerlo de la manera correcta.

Ya en 2016, nos llego un email como este por parte del Google Search Console Team indicándonos que podíamos crear páginas preparadas para AMP:

«Prepara tu sitio web para el lanzamiento de Accelerated Mobile Pages (AMP) en la Búsqueda de Google

Google ha detectado que tu sitio web tiene contenido que puede beneficiarse de una función que pronto ofreceremos en los resultados de la Búsqueda de Google. Esta función se basa en las Accelerated Mobile Pages (AMP), pequeñas páginas ligeras en HTML optimizadas para que se carguen muy rápido en los dispositivos móviles. Google mostrará muy pronto páginas de AMP válidas con funciones especiales en los resultados de la Búsqueda de Google. Las páginas de tu sitio web que cumplan los requisitos de AMP podrán mostrarse en los resultados de búsqueda con estas nuevas funciones.

Te invitamos a que seas de las primeras personas en utilizar esta tecnología tan interesante. Los siguientes pasos te guiarán por el proceso de creación de páginas de AMP para tu contenido».

Desde entonces han pasado muchas cosas, y la historia ha evolucionado bastante, tanto, que cada vez podemos configurar más opciones en WordPress con AMP.

¿Sabes cómo crear páginas AMP para tu contenido en WordPress?

Si tienes una página creada con WordPress tienes las cosas muy faciles para cumplir con este nuevo estándar: Sólo tienes que instalar el plugin «Accelerated Mobile Pages (AMP)«. ¿Qué vas a conseguir instalando este plugin en WordPress?

Vas a generar automáticamente una dirección url del tipo AMP con varias opciones disponibles. Lo primero que tienes que hacer es pasar por una pantalla de configuración como la que ves en la imagen de abajo:

Hay tres modos que puedes activar:

• Estándar: Integra AMP como estructura para su sitio utilizando las plantillas y estilos del tema activo para generar respuestas AMP. ¡Esto significa que tu sitio es primero-AMP y tus URLs canónicas son AMP!
• Transicional: Utiliza las plantillas del tema activo para generar versiones noAMP y AMP de tu contenido, permitiendo que cada URL canónica tenga una URL AMP correspondiente (emparejada). Este modo es útil para la transición progresiva hacia un sitio totalmente AMP.
• Lector: Anteriormente llamado modo clásico, este modo genera contenido AMP emparejado usando plantillas simplificadas que pueden no coincidir con el aspecto de tu sitio. Sólo se pueden servir como AMP entradas/páginas en el modo lector. No se realiza ninguna redirección para los visitantes móviles; las páginas AMP se sirven a través de plataformas de consumo AMP.

¿Cuál es el modo más recomendado? Con el modo Estándar vas a conseguir la mayor ganancia de velocidad en todas tus páginas y en todos los dispositivos, incluidos los ordenadores. Es el que recomiendo. Es el más sencillo de gestionar ya que automáticamente se corrigen todos los errores que se puedan generar.

Pero si quieres mantener páginas y post AMP diferenciados de las páginas NO AMP, el modo a seguir es el Transicional. Tendrás páginas AMP y páginas NO AMP conviviendo al mismo tiempo.

Las demás opciones puedes dejarlas como las ves en la imagen (o puedes activar la cache si tu página lo permite).

Google se va a encargar de indexar estás páginas especiales y luego mostrarlas en el buscador si el visitante vienen desde un dispositivo móvil, así que no hace falta hacer ningún tipo de redirección.

Puedes probar la validez de tus páginas AMP en:

• Comprobar errores en datos estructurados: Abre la página en esta herramienta.
• Errores AMP : Abre la URL en Chrome y añade #development=1 al final de la misma. Despues tienes que abrir la consola  en las herramientas para desarrolladores de Chrome.

El robot de Google puede tardar al menos 1 semana en volver a rastrear de nuevo todo el contenido de tu web, así que paciencia.

¡Ojo! Acuerdate de poner tu código de Google Analytics en la sección correspondiente del plugin:

Vas a la sección Analytics del Plugin AMP y añades lo siguiente en Configuración de JSON:

{
    "vars": {
        "account": "UA-XXXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

¡IMPORTANTE! Donde UA-XXXXXX-Y es el código de seguimiento personal de tu página en Analytics y que puedes consultar en tu cuenta.

En el campo «Tipo» pones googleanalytics, y el apartado ID lo genera dinámicamente. Le das a guardar y todo listo. Tienes más información en: añadiendo Analytics a tus páginas AMP;