Qué es AMP, cómo implementarlo y consejos en 2021

El proyecto de las Accelerated Mobile Pages lleva con nosotros desde principios de 2016.

Un dos años después, en febrero de 2018, el tema AMP alcanzaba un pico de interés según los registros de Google Trends, y después se ha ido disolviendo poco a poco.

En esta época estaba yo comenzando mis andaduras en el SEO y en la redacción de contenidos, y vi en el framework de AMP una oportunidad para adelantar a mi competencia.

Antes de entrar en materia ya sabes que me gusta explicar todo bien, así que allá vamos.

¿Qué es AMP?

AMP son las siglas de Accelerated Mobile Pages y se trata de un framework de código abierto creado por AMP Open Source Project en 2015 y abrazado por la compañía del famoso buscador.

Según la propia descripción que dio Google, este framework es una manera de construir páginas web orientadas a la carga en móviles que se renderizan con un rendimiento fiable y rápido.

Es un intento de solucionar los tiempos de carga de páginas web en móvil extremadamente lentos. Se basa en tecnologías web existentes, por lo que una página AMP se cargará perfectamente en cualquier navegador.

Origen del AMP

Como ya he comentado, el proyecto AMP se inició en 2015 en la división de Open Source de Google.

Dentro de esta división encontramos también proyectos como Android, Angular, Chromium, Kubernetes o el lenguaje de programación Go.

AMP fue presentado por Google un 7 de octubre de 2015 con el objetivo de reducir la media de carga de las páginas web en móviles conectadas por 3G, que en aquel año rondaba los 19 segundos.

No solo querían mejorar la velocidad de cargas de las webs en móviles, sino también competir con otras tecnologías similares que estaban naciendo por aquel entonces:  Facebook Instant Articles y Apple News.

En este artículo de 2015, Google también anunció que en este proyecto también colaboraban otras empresas tecnológicas y de RRSS como Twitter, Pinterest, WordPress, LinkedIn y Parsely.

En 2019 el AMPProject ha terminado uniéndose a la OpenJS Foundation, siendo ahora su “propietario”, para seguir evolucionando y mejorando. Para 2020 también se habían unido al proyecto empresas como Bing, Baidu, eBay, Reddit, Tumblr y Weibo.

AMP en la actualidad

En los últimos años el interés por este framework ha ido decreciendo. Al principio Google le daba prioridad, marcando este tipo de webs en las SERPs con un rayo y siendo indispensable para mostrar estos resultados en Google News.

Pero esto ha cambiado, en algunos resultados ya no hay rayo y no es necesario tener versión AMP de la web para aparecer en las Noticias destacadas de Google. Sin embargo, ante la presencia de ambas versiones, Google seguirá mostrando la versión AMP para búsquedas en móvil.

Según Google, el AMP nunca ha sido un requisito ni una consecuencia para posicionar mejor. Sin embargo, la mejora en el rendimiento y los tiempos de carga sí. Por tanto, aquellos que usan AMP, si con ello consiguen mejorar el rendimiento de la web, obtendrán mejor puntuación de cara al posicionamiento.

En un hilo de finales de marzo de 2021 sobre AMP y las Core Web Vitals, Google dijo que seguía confiando en el proyecto AMP para ayudar a los desarrolladores a mejorar el rendimiento de las webs para móviles y que seguiría invirtiendo en el proyecto

Cómo se compone una web con AMP

El proyecto AMP para web es un framework que consta de tres partes:

• AMP HTML – Amplía el html tradicional y añade componentes, etiquetas y nomenclatura.
• AMP JavaScript – Existen limitaciones por las cuales una página web necesita de JS para interacciones en la parte del cliente. Para ello AMP cuenta con sus propias librerías de JS.
• AMP Caché – Consiste en una CDN propia que permite cachear y servir las páginas AMP directamente. Por ejemplo, ​Google Search cachea las páginas AMP y las sirve directamente.

Con respecto al HTML que conforma una web en AMP, solamente se pueden utilizar las etiquetas permitidas y las equivalentes. Lo bueno es que la mayoría de navegadores, incluido Internet Explorer, pueden leer AMP, por lo que no solamente se pueden ver en móviles, sino también en navegadores de escritorio.

El uso de Javascript está totalmente limitado y solamente se puede hacer uso de las librerías oficiales de AMP para darle usabilidad. Entre las librerías de AMP encontramos la más famosa, AMP-Bind, que permite modificar elementos ante acciones de los usuarios o cambiar información mostrada mediante expresiones similares a JS inline.

Otras librerías de JS-AMP sirven para hacer carruseles de imágenes, acordeones, analítica, animaciones, ads, lightbox, y muchas otras conexiones e integraciones con todas las redes sociales más usadas, desde Facebook hasta TikTok.

Por último, el tema de la caché y la CDN. Las librerías de JS no las cargamos desde nuestro servidor, sino que tiramos de las CDN de Google, por lo que en parte la respuesta debería ser más rápidas.

Después, Google, al indexar nuestra página web en AMP, si todo está correcto ( que no hayan problemas de sintaxis y que la implementación de AMP sea correcta) guardará una copia de nuestra web para servirla directamente desde sus servidores.

Ventajas claras de usar AMP

La principal, y el motivo original por el que comenzó este proyecto, era para conseguir que las páginas web cargaran más rápido en móviles.

• Las cifras oficiales es que se consigue una mejora de tiempo de hasta un 85% en comparación a su equivalente convencional.
• El tiempo de carga promedio es de menos de un segundo por página.
• El consumo de datos es de hasta 10 veces menor que descargando la versión NON-AMP
• Como consecuencia, el consumo de batería es también menor.

Por tanto, buscadores como Google, queriendo mejorar también la experiencia de sus usuarios de Android, aboga por dar prioridad a esta tecnología, también barriendo para casa de que los usuarios no abandonen su infraestructura 

Configurar AMP en WordPress

Si has leído hasta aquí, seguramente te pique la curiosidad y quieras darle una oportunidad a implementar AMP en tu web creada con WordPress.

Estás de enhorabuena.

Porque si no haces un uso masivo de plugins con funcionalidades avanzadas, la implementación de AMP es muy sencilla y gratuita.

Los dos plugins que te voy a recomendar han pasado por mis manos y los he utilizado en proyectos actualmente activos.

Ambos generan de forma nativa el código HTML compatible con AMP, así que con instalar y activar, estás listo para arrancar.

AMP, by AMP Project Contributors

El primero de los dos plugins más famosos que te recomiendo probar es el oficial, el que tiene entre sus colaboradores y desarrolladores a Google y Automattic:

Este plugin está muy muy muy bien, como no podía ser menos, dada la gente detrás del proyecto. Es un plugin que, no solo minifica la salida de CSS, sino que en cada URL quita el CSS que no se utiliza para entregar solamente el necesario.

Además elimina el código problemático o el incompatible con AMP como el JavaScript y te da consejos sobre cómo optimizar el rendimiento y conectar .

Es un plugin de instalar y listo.

Además, este plugin tiene un Walkthrough o bienvenida inicial que te permite configurarlo fácilmente.

¿El problema?

La compatibilidad con otros plugins. El problema nace de la necesidad de que los desarrolladores creen adaptaciones de sus plugins para darles compatibilidad con AMP.

Dada la complejidad de esta acción, teniendo que eliminar el uso de Javascript para empezar, pocos los desarrolladores que se quieren meter en este jardín.

Yo, personalmente, aprovechando la compatibilidad de Genesis Framework con AMP a partir de la versión 3.3, he desarrollado para Grupo Marítima Sureste un child theme en el que la funcionalidad y la compatibilidad la implementamos en el tema, pero no es lo normal.

Si haces uso de plugins para formularios, constructores visuales como Divi o Elementor, implementas anuncios de tercero con Google Adsense, o cualquier otra movida chunga, entonces este plugin no es para ti.

Pasemos al que sí es para ti:

AMP for WP – Accelerated Mobile Pages

Parece difícil, pero los desarrolladores de este plugin han adelantado por la izquierda a los miembros de equipos con renombre a la hora de desarrollar esta funcionalidad para WordPress.

Estos desarrolladores se han llevado la palma en lo que exprimir AMP para WordPress se refiere. Se llaman Ahmed y Mohammed Kaludi y su creación, AMP for WordPress.

No solo el plugin gratuito que encuentras en el repositorio oficial es la repera, si no que han ido desarrollado extensiones para hacerlo compatible con otros plugins y añadiendo funcionalidades al mismo ritmo que evoluciona el framework.

En la actualidad encuentras extensiones que añaden la compatibilidad necesaria entre AMP y los plugins más usados:

• Constructores visuales como Elementor y Divi
• Plugins de eCommerce como WooCommerce y Easy Digital Downloads
• Formularios de contacto, como Gravity Forms, Caldera, WP Forms o Ninja Forms 
• Table of contents
• Plugins para multilenguaje como WPML o Polylang
• Plugin para foros: bbPress
• Plugin para eventos: The Event Calendar

Además disponen de extensiones para implementar anuncios, temas y diseños propios, una extensión de caché para mejorar los tiempos de carga, addons para traquear conversiones, popups, ventanas modales, AMP emails, AMP stories, incluso encuestas.

Así que, lo dicho, si en tu WordPress tienes implementada cualquier tipo de funcionalidad avanzada, lo suyo es que te decidas por este segundo.

Y no, no dispongo de un enlace de afiliados, pero si te decides a comprarlo, te diría que me lo dijeras abajo en los comentarios.

Desventajas de AMP

No todo AMP iban a ser alegrías. Vamos a repasar lo peor y lo que más follón da de implementar AMP.

CSS y JS soportado en AMP

Ya he comentado un poco más arriba el tema de que la compatibilidad de AMP con el CSS y JS que usamos a diario los desarrolladores es muy limitado.

Si quieres meterte de lleno en añadir nuevas funcionalidades a tu plugin o tema desarrollado a medida, tendrás que beberte la documentación de AMP y sus componentes.

Además, si te gusta el diseño web flipado y, como yo, miras todos los meses “Can I use” deseando que se extienda la compatibilidad de alguna nueva funcionalidad de CSS con las versiones de los navegadores más usados, entonces AMP te traerá algún que otro dolor de cabeza.

Con AMP tienes que utilizar una versión simplificada de CSS, no te queda otra.

Por supuesto, tampoco puedes hacer uso de javascript, solamente hacer uso de lo que tienes en las librerías de componentes: https://amp.dev/documentation/components/

También tienes que tener en cuenta que, para que los sitios AMP funcionen correctamente, deben estar adecuadamente validados (abajo te explico cómo validar cada página de tu sitio web). Como alguno de los plugins que tienes activo esté metiendo un JS tradicional… mal vamos.

Saltarán las alarmas.

Formularios en AMP

Una cosa que a mi me lleva de cabeza es que los formularios, tal cual los conocemos, no funcionan por defecto con AMP.

Aquí tienes tres salidas:

1. La fácil: que es tirar por el plugin de AMP for WP con alguna extensión específica.
2. La difícil: implementar tú mismo la compatibilidad haciendo uso de los componentes de AMP.
3. La de vagos (esta es la mía): desactivar el uso de AMP en las páginas con formulario.

Imágenes en AMP

Resulta extraño que algo tan básico siga dando follones.

Por ejemplo, para evitar que las imágenes se vean de forma extraña, estiradas o aplanadas, tienes que asegurarte que especificas su altura y ancho dentro del elemento, si no otras propiedades CSS te la deformarán. AMP no conoce lo que es mantener la proporción…

Además, a fecha de redactar este artículo, todavía no se ha añadido una compatibilidad para etiquetas <picture> en AMP, por lo que el truco del almendruco de servir jpgs y webps al mismo tiempo para garantizar una compatibilidad para navegadores más amplia se ha ido al garete.

Al menos yo he tirado la toalla.

Validador de AMP

Una vez tengas listo tu sitio web con AMP, tocará revisar que está todo correcto por que si no, empezarán a saltar las alarmas en tu Search Console, cuando ya haya pasado un tiempo.

Para validarla, con pegar la URL en la siguiente dirección: https://validator.ampproject.org/ será más que suficiente.

En caso de que uses el plugin oficial, en cada URL, en la barra superior de administración, en el menú de AMP, tienes un enlace “Validar” para ir a la página de configuración del plugin donde te dirán los posibles errores e incompatibilidades con otros plugins o temas.

También puedes, si usas Chrome, tirar de extensión para validarlo directamente. Cuando estás viendo una web, si usa la tecnología AMP, el rayito que normalmente está en gris, se pondrá verde si todo está bien o rojo si hay algún error.

La extensión tira de la información mostrada en la URL de arriba, la cual a su vez tira de la versión cacheada del código de la web, por lo que, si te muestra algún error y ya lo has corregido, es posible que te lo siga mostrando después.

Si estás usando el plugin oficial y estás logueado en tu WordPress, el error que suele mostrar es el siguiente:

Tag ‘html’ marked with attribute ‘data-ampdevmode’. Validator will suppress errors regarding any other tag with this attribute. Debug. 

Esto es porque el plugin, cuando estás logueado y viendo la web, añade este atributo.

No tiene más lío. Tú, como si nada.

Medir la experiencia de tu web con AMP

Por último, cuando ya no tenemos ningún error en tu página, toca llegar un pasito más allá.

Toca validar la experiencia de usuario, o, en este caso, las Core Web Vitals.

AMP Page Experience Guide es una especie de PageSpeed Insights para webs con AMP, pero que, además de señalarte los errores, te da consejos específicos de cómo solucionarlo.

Cosas que suele marcar son:

• Precargar los recursos de AMP JS
• Igualar el ancho del viewport con el ancho del dispositivo
• Tiempo de respuesta del servidor
• Reducir el tamaño de las imágenes y servirlas en webp

Cosas muy similares a lo que te diría LightHouse de Google.

Desactivar AMP en WordPress sin perjudicar el SEO

Ya que AMP no es garantía de mejora en el SEO, y de que existe la posibilidad que mediante el uso de otros frameworks ya se esté consiguiendo puntuaciones altas en las Core Vitals sin tener que renunciar al uso de Javascript, es probable que quieras quitar las versiones AMP de tu web.

Para ello simplemente tienes que desactivar el plugin si estás usando uno en WordPress, y redirigir y canonicalizar todas las urls con AMP a la versión sin AMP.

¿Cómo se hace esto?

Pues muy sencillo. Pero la opción que cojas depende de un parámetro: si tus páginas AMP tenían una ruta terminada en ?amp o en /amp/

Cuando terminan en /amp/

Si estás usando un plugin de SEO como Rank Math, o el plugin para realizar redirecciones 301 “Redirection”, lo suyo es que hagas una redirección utilizando expresiones regulares para ventilártelo todo de una tacada:

En “Source URL” o “URLs de origen” tienes que poner /(.*)\/amp, no olvides de marcar o seleccionar que estás usando una expresión regular o “Regex”.

Después, en “Target URL” o “URL de destino”, poner https://dominio.com/$1/, cambiando “dominio.com” por tu dominio.

Cuando terminan en /?amp

Por otro lado, si tienes esta situación, tranquilo. WordPress omitirá el ?amp mostrando el mismo contenido que la versión sin AMP.

Pero si te la quieres jugar a añadir una función a tu functions.php para eliminar ese string, este es tu código:

Conclusiones

Personalmente, en la principal web que he desarrollado esta primera mitad de 2021 para Grupo Marítima Sureste, invertí mucho tiempo en hacerla compatible con AMP ya que en el pasado me había traído alegrías.

En una web que desarrollé en 2018, enfocada principalmente en el contenido evergreen,  permitiéndome atraer tráfico orgánico con más facilidad, y con ello ingresos, gracias a que los artículos se servían con mis anuncios de Adsense directamente desde la caché de Google.

Hasta aquí todo perfecto.

El problema nace con la importancia adquirida por las Core Web Vitals a mitad de 2021.

AMP y las Core Web Vitals

En este aspecto, si comparamos la versión AMP con la non-AMP de Grupo Marítima Sureste, salvando el gran delay que existe por culpa, en parte, del proxy de Cloudflare, veremos que el juego se lo lleva la versión sin AMP por muy poco.

Después del trabajazo de hacer compatible la web para AMP y ver que no había apenas beneficio en comparación a un tema para WordPress a medida, sin siquiera tener un plugin de caché/minificación como puede ser WP-Rocket, pues me ha convertido en un non-believer.

Así que, desde que hice las primeras pruebas, he dejado de recomendar la implementación de este framework para desarrollos a medida, pero sigo diciendo que es beneficioso para aquellos proyectos en los que no se puede lograr una mejora fácilmente debido a cómo están desarrollados.  

Fotografía principal realizada por @dchuck en Unsplash