Cómo crear una página AMP para un sitio móvil más rápido

Qué es AMP y por qué importa

AMP (Accelerated Mobile Pages) es un framework de código abierto que Google desarrolló en 2015 para acelerar drásticamente la carga de páginas web en dispositivos móviles. En un mundo en el que más del 60 % del tráfico de internet procede de teléfonos móviles, la velocidad de carga del sitio influye directamente en la experiencia de usuario, en la tasa de rebote y en la posición en los resultados de búsqueda. Los estudios muestran que el 53 % de los usuarios móviles abandona un sitio que tarda más de 3 segundos en cargar. AMP resuelve este problema restringiendo el HTML, el CSS y el JavaScript de una manera que garantiza un renderizado de la página extremadamente rápido.

Las páginas AMP suelen cargarse en menos de un segundo, lo que es entre 4 y 5 veces más rápido que la página móvil media. Google acelera aún más el contenido AMP almacenándolo en caché en sus servidores mediante el sistema AMP Cache, de modo que la página se entrega desde la ubicación de Google más cercana al usuario. El resultado es una carga casi instantánea cuando un usuario hace clic en un resultado AMP en la búsqueda de Google.

Cómo funciona AMP

Los tres componentes de AMP

AMP consta de tres componentes clave que, en conjunto, garantizan una carga rápida. El primero es AMP HTML: una versión ampliada de HTML con etiquetas personalizadas que sustituyen los elementos HTML estándar por versiones optimizadas para imágenes, vídeo y componentes de carrusel. El segundo componente es la biblioteca AMP JS, que gestiona los recursos, carga de forma asíncrona los recursos externos y se asegura de que nada bloquee el renderizado de la página. El tercero es AMP Cache: una CDN basada en proxy que obtiene automáticamente las páginas AMP, las valida y las almacena en caché para una entrega rápida.

Limitaciones de AMP

Para lograr una velocidad excepcional, AMP impone limitaciones estrictas. No puedes usar tu propio JavaScript: solo puedes usar componentes AMP y el limitado elemento amp-script. El CSS debe ser inline y estar limitado a 75 KB. Todos los recursos externos (imágenes, anuncios, vídeos) deben declarar su tamaño de antemano para que el navegador pueda calcular el diseño antes de que se carguen los recursos. Los formularios y los elementos interactivos utilizan componentes AMP especiales. Estas limitaciones pueden parecer estrictas, pero son justamente lo que garantiza una experiencia rápida y consistente.

Estructura de una página AMP

Plantilla básica de AMP HTML

Toda página AMP comienza con una estructura específica. El doctype es HTML5 estándar, pero la etiqueta html debe contener el atributo amp o el emoji del rayo. En la sección head, los elementos obligatorios son una meta etiqueta charset, una meta etiqueta viewport, un enlace canonical a la versión no AMP de la página, el CSS boilerplate de AMP que representa estilos estandarizados para evitar el Flash of Unstyled Content, y una referencia a la biblioteca de JavaScript de AMP. El body de la página utiliza etiquetas específicas de AMP en lugar de los elementos HTML estándar para el contenido multimedia.

Componentes de AMP

AMP ofrece un rico ecosistema de componentes para distintas necesidades. Para imágenes usa amp-img con los atributos width y height obligatorios. Para contenido de vídeo existen amp-video y amp-youtube. Entre los elementos interactivos se incluyen amp-carousel para sliders, amp-accordion para secciones desplegables, amp-lightbox para vistas modales y amp-form para formularios. Para analítica usa amp-analytics, que admite Google Analytics, Facebook Pixel y otras plataformas. Cada componente se carga de forma asíncrona y no bloquea el renderizado.

Implementar AMP en un sitio WordPress

Plugin oficial de AMP

La forma más sencilla de añadir AMP a un sitio WordPress es usar el plugin oficial de AMP. Este plugin ofrece tres modos de funcionamiento: el modo Standard convierte todo el sitio en AMP, el modo Transitional crea versiones AMP de todas las páginas junto a las originales, y el modo Reader crea versiones AMP solo para las entradas. Para la mayoría de los sitios recomendamos el modo Transitional porque permite una migración gradual. Tras la instalación, el plugin genera automáticamente versiones AMP de tus páginas y añade las meta etiquetas necesarias para enlazarlas con las páginas originales.

Plugin AMP for WP

AMP for WP es un plugin alternativo con más opciones de personalización del diseño. Ofrece más de 10 temas integrados para páginas AMP, soporte para WooCommerce, integración con plugins SEO populares como Yoast y Rank Math, así como opciones avanzadas de anuncios. La versión gratuita cubre las necesidades básicas, mientras que la versión Pro añade plantillas AMP personalizadas, soporte para Contact Form 7 y analítica avanzada. Si la identidad visual de tus páginas AMP es importante, este plugin ofrece más flexibilidad en comparación con el plugin oficial.

Configuración manual

Para tener control total sobre la implementación de AMP, puedes crear plantillas AMP personalizadas en tu tema de WordPress. Crea archivos de plantilla independientes que generen HTML AMP válido. Usa hooks de WordPress para añadir enlaces canonical entre las versiones AMP y no AMP. Este enfoque requiere más conocimientos técnicos, pero te da control total sobre la apariencia y el comportamiento de las páginas AMP. Lo recomendamos solo para desarrolladores avanzados con requisitos específicos que los plugins no pueden cubrir.

Probar y validar páginas AMP

AMP Validator

Google ofrece varias herramientas para validar páginas AMP. El AMP Validator en validator.ampproject.org es una herramienta en línea en la que introduces una URL o código HTML y obtienes información detallada sobre los errores. Chrome DevTools incorpora validación AMP integrada: añade #development=1 al final de la URL AMP y abre la consola para ver los errores. La herramienta AMP Test en Google Search Console muestra cómo ve Google tus páginas AMP e identifica problemas que pueden impedir la indexación. Valida siempre cada página AMP antes de publicarla, porque las páginas AMP no válidas no se almacenarán en caché ni se mostrarán con la etiqueta AMP en la búsqueda.

Errores frecuentes

Los errores más comunes en la implementación de AMP incluyen el uso de etiquetas HTML no permitidas en lugar de sus equivalentes AMP, CSS que supera el límite de 75 KB, estilos inline con la declaración important que está prohibida en AMP, JavaScript no permitido en el cuerpo de la página, imágenes sin dimensiones declaradas y formularios sin un endpoint de acción AMP. El validador señala claramente cada error con una descripción y la línea de código, lo que facilita la corrección.

AMP y SEO

Impacto en el posicionamiento

AMP en sí mismo no es un factor de posicionamiento directo en la búsqueda de Google. Sin embargo, AMP mejora indirectamente el SEO porque reduce drásticamente el tiempo de carga, que sí es un factor de posicionamiento, mejora las métricas de Core Web Vitals, reduce la tasa de rebote porque los usuarios no esperan a que cargue, e incrementa la interacción del usuario, lo que envía señales positivas a Google. Antes las páginas AMP se mostraban en un carrusel especial en la parte superior de la búsqueda móvil, pero desde 2021 las páginas no AMP también pueden mostrarse en esa sección. Aun así, las páginas AMP tienen ventaja en la velocidad de entrega gracias a AMP Cache.

Enlaces canonical

La colocación correcta de los enlaces canonical es clave para el SEO de AMP. Toda página AMP debe tener un link rel canonical que apunte a la versión original no AMP de la página. La página original debe tener un link rel amphtml que apunte a la versión AMP. Si usas el modo Standard, en el que todo el sitio es AMP, el enlace canonical apunta a sí mismo. Esto garantiza que Google indexe y conecte correctamente ambas versiones de la página sin problemas de contenido duplicado.

Alternativas a AMP

AMP no es la única forma de conseguir páginas móviles rápidas. La optimización web moderna con un enfoque en Core Web Vitals puede lograr resultados similares sin las restricciones de AMP. La carga diferida (lazy loading) de imágenes y vídeos, una gestión eficiente del CSS y el JS, el uso de una CDN, la optimización del servidor y las imágenes modernas en formatos WebP y AVIF pueden acelerar drásticamente un sitio. Next.js, Gatsby y frameworks similares generan páginas extremadamente rápidas sin AMP. Considera AMP si tu prioridad es la visibilidad en Google News o si tienes un sitio con contenido predominantemente estático. Para aplicaciones web complejas con mucha interactividad, la optimización estándar es una mejor opción.

Conclusión

AMP puede ser una herramienta potente para acelerar un sitio móvil, especialmente en sitios con contenido mayoritariamente textual como blogs, portales de noticias y sitios informativos. La implementación mediante plugins de WordPress es relativamente sencilla y puede aportar una mejora significativa a la experiencia móvil. Sin embargo, AMP no es una solución universal: las limitaciones en JavaScript y diseño pueden ser problemáticas para sitios complejos. En BeoHosting nuestros servidores están optimizados tanto para páginas AMP como estándar, con almacenamiento SSD rápido y un servidor web LiteSpeed que ofrece un rendimiento excepcional sea cual sea el enfoque que elijas.