Cómo implementar y configurar AMP en WordPress

AMP o Accelerated Mobile Pages de Google es uno de los modos que tenemos a nuestra disposición para poder hacer que nuestro sitio web cargue con mayor rapidez en dispositivos móviles. Los sitios web que cargan rápido nos ofrecen una mejor experiencia de usuario y nos permiten tener una ventaja en cuanto al posicionamiento orgánico. En este artículo aprenderemos cómo implementar AMP de Google en nuestros sitios web desarrollados con WordPress.

Qué ofrece Google AMP en sitios creados con WordPress

Google AMP es una iniciativa de código abierto ofrecida por compañías tecnológicas como Google o Twitter. El objetivo del proyecto es permitir que el acceso a los sitios web sea más rápido desde dispositivos móviles.

Las páginas AMP utilizan el mínimo código HTML y JavaScript necesario lo que permite que puedan ser almacenadas por la caché de Google y posteriormente servidas de un modo muy ágil. El sistema utilizado por Facebook por los Facebook Instant Articles se basa en una tecnología similar con idénticos resultados.

Google está mostrando más consideración por los artículos que utilizan esta tecnología ofreciendo un lugar destacado para los sitios web que han implementado Accelerated Mobile Pages, aunque por otro lado, también puede tener sus desventajas. Uno de los mayores inconvenientes debido a sus limitaciones técnicas pasa por no poder utilizar cualquier sistema de registro de estadísticas o sistemas de publicidad integrados.

Implementando AMP en nuestros sitios web WordPress

El modo más sencillo de implementar el sistema de AMP en nuestros sitios web creados con WordPress pasa por utilizar por el plugin AMP que nos podemos encontrar en el repositorio oficial de plugins de WordPress. La descarga de este plugin, como todos los del repositorio, es gratuita, y además viene desarrollado por el equipo de la empresa Automattic.

El propósito del plugin es que una vez instalado y activo en nuestro sitio web todas las entradas de la web puedan generar de manera dinámica versiones compatibles con AMP, siendo accesibles a través del sufijo /amp/ en la propia URL.

Una vez instalado y activado este plugin podemos dirigirnos a la sección Apariencia / AMP para poder ver cómo nuestro sitio web se mostrará en dispositivos móviles usando AMP. Disponemos de algunas pequeñas posibilidades de configuración como poder elegir el fondo de la cabecera de la página o el uso del favicon determinado previamente en la web.

Si consultamos el código fuente de nuestras publicaciones deberemos encontrar la siguiente referencia HTML:

<link rel="amphtml" href="http://midominio.com/2018/01/enlace-permalink/amp/" />

Si nos encontramos un error a la hora de acceder a la versión AMP del contenido es recomendable acceder a la sección Ajustes / Permalinks de WordPress volver a guardar los ajustes definidos para forzar la reescritura de los cambios en nuestro .htaccess.

Personalizar el uso de AMP en WordPress

Hasta el momento hemos creado una configuración básica para las entradas de nuestro sitio web creado con WordPress y podemos estar tranquilos, puesto que estaremos entregando las versiones AMP desde los resultados de búsqueda de Google.

Siempre es recomendable en este sentido realizar los análisis pormenorizados del rendimiento de este tipo de versiones entregadas a través de herramientas como Google Analytics, o Google Search Console que ofrece su propio apartado para el análisis de rendimiento de versiones AMP de contenidos.

En cualquier caso, podemos personalizar y decidir cómo mostrar este tipo de páginas hasta cierto punto, para exprimir las posibilidades de AMP a nuestro antojo. Sirvan los siguientes ejemplos de personalización a la hora de mostrar las versiones de AMP de nuestro sitio web.

Deshabilitar AMP para determinadas publicaciones

El plugin AMP de WordPress nos permite intervenir con el filtro amp_skip_post para decidir que posts poder saltarnos para que no muestren la versión AMP. Simplemente debemos añadir la lista de IDs de artículos en el array que indica ids_to_skip.

/**

* Deshabilitar AMP para determinadas publicaciones

*/

add_filter( 'amp_skip_post', 'isa_skip_posts', 10, 3 );

function isa_skip_posts( $skip, $post_id, $post ) {

   $ids_to_skip = array( 1, 2, 3, 4); // Edit this line

   if ( in_array( $post_id, $ids_to_skip ) ) {

       $skip = true;

   }

   return $skip;

} 

Deshabilitar la carga de fuentes por defecto

Las versiones AMP de Google cargan la familia de fuentes Merriweather desde el servicio de Google Fonts. Si queremos optimizar la carga y prescindir de estas fuentes cargadas por Google por defecto podemos hacerlo añadiendo en el hook amp_post_template_head la siguiente función.

/**

* Evitar la carga de Google fonts en páginas AMP

*/

add_action( 'amp_post_template_head', 'isa_remove_amp_google_fonts', 2 );

function isa_remove_amp_google_fonts() {

   remove_action( 'amp_post_template_head', 'amp_post_template_add_fonts' );

}

Podemos remplazar las fuentes por defecto que hemos deshabilitado por unas nuevas que nosotros queramos indicar, teniendo en cuenta que deberían ser familias de fuentes aceptadas por los dispositivos móviles para asegurarnos su compatibilidad.

add_action( 'amp_post_template_css', 'isa_amp_css_styles_fonts' );

function isa_amp_css_styles_fonts( $amp_template ) {

   ?>

   body {

       font-family: --apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif

       }

   <?php

}

Añadir soporte para tipos de contenido personalizados

Si trabajamos con Custom Post Types en nuestro sitio creado con WordPress como ya aprendimos a hacer en artículos anteriores quizás nos interese que ese contenido también pueda mostrarse en versiones adaptadas de AMP.

/**

* Añadir soporte para Custom Post Types

*/

function isa_amp_add_cpt() {

   add_post_type_support( 'cpt_slug', AMP_QUERY_VAR );

}

add_action( 'amp_init', 'isa_amp_add_cpt' );

Conclusiones

Las decisiones acerca de la instalación de AMP en determinados sitios web debería ser parte del departamento de marketing de una compañía, que debería establecer si esa decisión puede ser positiva a largo plazo o realmente no es recomendable.

No obstante, desde los departamentos de desarrollo deberemos estar preparados y al tanto de las nuevas tecnologías que se van asentando en el mercado y por las cuales quizás deberemos vernos obligados a pasar por diferentes circunstancias.

Conocer de antemano las posibilidades que tenemos de implementación de AMP de Google, en este caso, en sitios web creados por WordPress, podrá anticiparnos a posibles soluciones que necesitemos a futuro o posibles inconvenientes que nos podamos encontrar en la implementación.