AMP y wordpress, personalización, seo y analytics

AMP y WordPress (Accelerated mobile pages)

Estos días he podido experimentar un poco con esta nueva tecnología que busca ofrecer webs mucho más optimizadas para dispositivos móviles, poniendo el foco de atención en la velocidad y la sencillez a la hora de presentar los contenidos.

El proyecto AMP es relativamente nuevo (creo que no tiene más de un año) y en los últimos meses ya se vienen escuchando mucho estas siglas. Es un proyecto de código abierto, que busca un HTML muy optimizado para móvil. Y sobre el que han centrado la atención grandes de Internet como Google, WordPress, Twitter, Pinterest los cuales también se están involucrando en el proyecto, ya sea a nivel de premiar el AMP-friendly por parte de Google u ofrecer plugin que habilite esta tecnología por parte de WordPress. También se encuentra en la lista de embajadores de AMP medios Españoles como El Mundo, ABC, 20 Minutos, y muchos más.

AMP es una tecnología para todos, pero no es menos cierto que teniendo en cuenta sus restricciones y la inclinación de la balanza hacia el lado de los contenidos no resulta conveniente para una tienda online o una home o sitio promocional y si en cambio hay unas tipologías de Web a las que les interesa mucho AMP, como son los medios de publicación, periódicos online, o los blogs (artículos/posts) en definitiva para todo el que ofrezca noticias, información, contenidos.

AMP y Responsive

Son tecnologías muy diferentes, mientras que con técnicas responsive se pueden adaptar los contenidos a diferentes dispositivos y resoluciones y mantener un alto componente de interfaz y diseño (con sus hojas de estilo y scripts). Con AMP se va un paso más allá y se premia por encima de todo el contenido y la simplicidad, siendo muy restrictivo y evitando cargar otras funcionalidades no destinadas estrictamente al consumo de los contenidos publicados (texto e imágenes). ¿suena a mobile first?.

Restricciones de AMP

Al ir un paso más allá, la balanza queda inclinada hacia el lado del contenido y su simplicidad para su consumo rápido. Y esto lógicamente trae serias restricciones en cuanto a interfaz y comportamientos enriquecidos. Todas estas restricciones hacen que las páginas AMP cargan entorno a un 70-90% más rápido que las páginas mobile, lo que supone un rendimiento muy superior y una carga prácticamente instantánea de contenido estático. Para conseguirlo:

  • AMP no permite que nada retrase la carga de la página, ni las fuentes, ni los estilos, ni los scripts, ni nada que requiera pre-carga en bloque. Por este motivo nos cambia un poco la manera de trabajar.
  • AMP no admite JavaScript.
    • Para ser más exactos, los JavaScript no asíncronos y que no estén definidos siguiendo las pautas de AMP. Ya que demoran la carga del DOM, ósea el árbol con el modelo de objetos del documento, con todos sus nodos, lo cual construye y expone el contenido (que es lo que le interesa a AMP). Hay algunos scripts ya adaptados para AMP como Google Analytics, Facebook, Twitter y YouTube.
    • Los comportamientos locales de interfaz, animaciones, u otras acciones enriquecidas, quedan excluidas.
    • Quedan también fuera anunciantes de publicidad, y sistemas de analítica, que demoran y consumen muchos recursos. Para solventar este punto AMP propone el uso de pixels de seguimiento aunque estos no suelen producir reportes tan detallados.
  • AMP no le gustan los iframes y por ende vídeos, calendarios, mapas, u otras aplicaciones de terceros que puedan ser embebidas y que su carga perjudique a la carga del resto de contenido. Hay que tratar a los iframes de una forma especial y tener en cuenta algunas cuestiones para ofrecerlos.
  • AMP solo desea un CSS minimalista y simple, enfocado totalmente en el contenido (ósea el texto).
    • Nos obliga a que el CSS este directamente incluido en el documento y no en un fichero externo.
  • AMP solo carga imágenes a medida que se muestran, lo que se conoce como lazy loading.

AMP y WordPress

La gente de Automatic (a la cabeza del desarrollo de WordPress) ya han lanzado el plugin AMP que se encarga de generar las versiones AMP-HTML para nuestro site en WordPress. También existe otro plugin AMP realizado por desarrolladores independientes. Y por último tenemos el plugin PageFrog que además de hacer su trabajo AMP, también permite proveer de Instant Articles Facebook (aunque todavía no conseguí que funcionase) y Apple News Format que dicen que estará próximamente, ambas dos podrían considerarse en cierta forma competencia con AMP.

Una vez instalado el plugin y activado se puede acceder a las versiones AMP simplemente añadiendo las cadenas /amp/ o ?amp=1, dependiendo de la estructura (permalinks) que tengamos establecida en nuestro WordPress.

Ejemplos:

AMP-HTML

En el código fuente ya vemos como esta declarado el tipo de documento:

<!doctype html>
<html amp>

El viewport más definido y restrictivo:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

El JavaScript cargado asíncronamente para adaptaciones AMP:

<script src="https://cdn.ampproject.org/v0.js" async></script>

Y respecto al estilo, lleva por un lado dentro del propio documento (no como fichero externo enlazado) un boilerplate <style amp-boilerplate> y por otro lado un CSS para dar un poco de personalización <style amp-custom>.

En el código también vemos las clases (rollo micro-formatos) para identificar las diferentes entidades:

  • amp-wp-title-bar
  • amp-wp-content
  • amp-wp-title
  • amp-wp-meta
  • amp-wp-byline
  • amp-wp-author
  • amp-wp-posted-on
  • amp-wp-tax-category
  • amp-wp-tax-tag
  • amp-wp-enforced-sizes

Las imágenes están definidas con el tag de AMP-HTML <amp-img> y con las diferentes sources para cada resolución.

<amp-img class="alignnone size-large wp-image-8182 amp-wp-enforced-sizes" src="http://aurea.es/wp-content/uploads/2016/04/2016-04-20-13.43.13-1170x878.jpg" alt="Portada del dossier" width="940" height="705" srcset="http://aurea.es/wp-content/uploads/2016/04/2016-04-20-13.43.13-1170x878.jpg 1170w, http://aurea.es/wp-content/uploads/2016/04/2016-04-20-13.43.13-773x580.jpg 773w, http://aurea.es/wp-content/uploads/2016/04/2016-04-20-13.43.13-768x576.jpg 768w" sizes="(min-width: 940px) 940px, 100vw"></amp-img>

Personalización

Hay un diseño minimalista de serie en el plugin, pero lo poco que hay, podemos adaptarlo por ejemplo a nuestros colores corporativos. Para ello el plugin AMP de WordPress contiene una carpeta llamada templates con el fichero single.php que define el single post y el fichero style.php para definir el estilo donde podremos personalizar los colores para que se ajuste a nuestra marca.

SEO y Redes sociales

El plugin AMP sintetiza todo el HTML reduciéndolo al máximo y esto incluyen los metatags relacionados con el SEO y las redes sociales. Para incorporarlos en nuestra versión AMP podemos hacer uso del plugin con un nombre muy apropiado: Glue for Yoast SEO & AMP. Una vez instalado y activado tendremos los twitter cards, og, etc, con sus respectivos atributos y valores.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Muy orgulloso del resultado de mi nuevo dossier aurea webdesign 2016 :-). Destacaría algunos pequeños detalles -que por cierto cada vez me doy más cuenta- que no son solo &#8220;detalles&#8221; son los que realmente hacen al diseño, DISEÑO. Algunos detalles &hellip; Continued" />
<meta name="twitter:title" content="Dossier aurea webdesign 2016 - aurea webdesign" />
<meta name="twitter:site" content="@javiaurea" />
<meta name="twitter:image" content="http://aurea.es/wp-content/uploads/2016/04/2016-04-20-18.30.23.jpg" />
<meta name="twitter:creator" content="@javiaurea" />
<meta property="og:locale" content="es_ES" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Dossier aurea webdesign 2016 - aurea webdesign" />
<meta property="og:description" content="Muy orgulloso del resultado de mi nuevo dossier aurea webdesign 2016 :-). Destacaría algunos pequeños detalles -que por cierto cada vez me doy más cuenta- que no son solo &#8220;detalles&#8221; son los que realmente hacen al diseño, DISEÑO. Algunos detalles &hellip; Continued" />
<meta property="og:url" content="http://aurea.es/dossier-aurea-webdesign-2016/" />
<meta property="og:site_name" content="aurea webdesign" />
<meta property="article:publisher" content="https://www.facebook.com/javiaurea" />
<meta property="article:tag" content="aurea webdesign" />
<meta property="article:tag" content="dossier" />
<meta property="article:section" content="General" />
<meta property="article:published_time" content="2016-04-21T14:18:24+00:00" />
<meta property="article:modified_time" content="2016-04-21T21:49:54+00:00" />
<meta property="og:updated_time" content="2016-04-21T21:49:54+00:00" />
<meta property="fb:admins" content="587429832" />
<meta property="og:image" content="http://aurea.es/wp-content/uploads/2016/04/2016-04-20-18.30.23.jpg" />
<meta property="og:image:width" content="3264" />
<meta property="og:image:height" content="2448" />

Analytics y Ads

Para integrar el sistema de estadísticas de Google y Adsense tenemos que tocar algo de código y Juan Padial lo explica muy bien en este post. De todas formas también podemos recurrir al plugin PageFrog citado anteriormente que permite vincular la cuenta de Google con el Analytics y establecer también el Adsense.

Ejemplo de integración por parte de PageFrog de Analytics:

<body>
 <amp-analytics type="googleanalytics">
 <script type="application/json">
 {
 "vars": {
 "account": "UA-6186667-1"
 },
 "triggers": {
 "trackPageview" : {
 "on": "visible",
 "request": "pageview"
 }
 }
 }
 </script>
</amp-analytics>

El plugin también permite personalizar el diseño / colores que necesitamos de una forma muy rápida y bien presentada a través de sus opciones en wp-admin.

A pesar de que PageFrog provea en un principio más facilidades, la realidad es que yo no le he conseguido sacar ese rendimiento e incluso veo algunas incompatibilidades.

Conclusión hasta ahora el mejor resultado lo he obtenido con el plugin de AMP de Automatic, en combinación con Glue for Yoast SEO & AMP y tocando el código necesario para adaptar el estilo del template y un poco de código en functions.php con ayuda del post de Juan Padial que habría que guardarlo en favoritos, es buenísimo!.

Depuración

No todo acaba con instalar, personalizar, adaptar. Toca también depurar

Google a través de su herramienta de Webmaster tools tiene un apartado dedicado al AMP donde se podrán ver las páginas indexadas como AMP-friendly y los errores encontrados. Habrá algunos que no tendrá cuenta solucionarlos pues dedicaríamos mucho desarrollo en nuevas integraciones u otros errores que nos bastará con excluir componentes del contenido. No obstante aunque existan errores la versión de AMP se sigue sirviendo.

Os invito a ahondar en el tema y darle caña, a ver que os parece AMP. Ah! y darme vuestra opinión. 😉