Implementando AMP-HTML en tu sitio Wordpress

[Actualización 19/11/2016] AMP imprime buenos resultados de búsqueda; y con ayuda del código de GA, captura buen tráfico orgánico también. GTM no es soportado por AMPHTML, así que solo puedes agregar GA y algunos otros códigos concretos.

[ACTUALIZACIÓN 27/09/2016] AMP comenzó a imprimir en resultados de búsqueda de Google el 16 de septiembre pasado, al menos para mi blog personal.

***


El HTML amplificado, AMPHTML o sencillamente AMP, es un formato enriquecido para la Web que tiene como objetivo mejorar el rendimiento de las páginas cuando se cargan desde dispositivos móviles.

AMP tiene dos características principales: la primera, es que reduce la cantidad de código permitido, con un HTML5 estricto y con librerías de javascript predefinidas que cargan elementos a medida que son necesitados; y la segunda, es que Google captura la página en su caché y cuando el visitante llega desde el buscador, la página se abre de inmediato sin mediar la velocidad del servidor propio, es decir, la página queda hosteada en el caché de Google.

Implementar AMP en un sitio Web de Wordpress es bastante sencillo. Y para quienes utilizan el plugin SEO de YOAST hay un segundo plugin que permite optimizar el formato de AMP para mejor posicionamiento.

Paso 1, instala plugin AMP

El plugin de AMP se ocupa de crear las páginas en formato AMP para cada una de tus páginas de Wordpress. Y a su vez agrega la los meta datos que enlazan las páginas AMP con las páginas canonical. Es bastante completo y es automático, no tiene configuración propia. Se descarga aquí.

Paso 2, instala plugin GLUE for YOAST SEO & AMP

Este plugin permite que puedas configurar algunas de las características de AMP desde el menú de configuración de YOAST. Y entre otras cosas te permite modificar el estilo de la página, decidir qué tipo de páginas se mostrarán como AMP y cuáles no, y agregar Google Analytics. Esto último es importante, porque el formato AMP no permite el código que nos entrega Analytics, así que debemos agregarlo aparte si es que queremos registrar tráfico. Se descarga aquí.

Paso 3, configurar AMP

En Post Types se elige qué tipo de Post tendrá soporte en formato AMP. En Design se configuran colores, íconos y otros detalles de formato, también se puede agregar CSS propio para corregir errores de diseño del sitio que se traducen mal en AMP. Y en Analytics se copia el código para medir tráfico:

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-XX"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Paso 4, debes validar AMP en Google Search Console

Una vez que Google reconoce que tu sitio Web tiene páginas con AMP, las recolecta y las analiza. En esta herramienta aparecen las páginas AMP indexadas, así como las páginas con problemas y puedes hacer debug a cada una de ellas.

Resolviendo problema de redirección de AMP en Wordpress

Algunos plugin de Wordpress chocan con el plugin de AMP y redirigen la URL de AMP hacia la url canonical. Esto da muchos dolores de cabeza y la verdad es que no he podido resolverlo por vía de Wordpress mismo. De modo que hice una redirección 301 en el archivo .htaccess, que convierte todas las URL que terminan con /amp/ en /?amp=true

RedirectMatch 301 ^/(.*)/amp/$ http://www.tusitioweb.com/$1/?amp=true

De esta manera las páginas AMP se cargan siempre.