SEO Mobile: ¿Qué son las Páginas Aceleradas para Móviles o AMP?

El SEO también es mobile

Páginas Aceleradas para Móviles o Accelerated Mobile Pages (AMP) en inglés, es un proyecto de código abierto (open source) cuyo fin es mejorar, optimizar y acelerar el funcionamiento de las páginas web, para crear así experiencias web rápidas o instantáneas lo que se traduce en una importante mejora del posicionamiento de tu web (SEO).

La iniciativa AMP Project tiene el apoyo de grandes empresas de Internet, entre ellas Google. Es tal la importancia que este gigante de Internet le da a las Páginas Aceleradas para Móviles  que incluso en el panel de control de Google Search Console hay una nueva pestaña donde se pueden visualizar las páginas AMP que Google indexa. Asimismo, este panel te alerta si tienes algún error en alguna de las páginas:

SEO-Mobile-Panel-de-google-search-console
Panel de Google Search Console

La velocidad es más importante que nunca. Sin embargo, habitualmente los sitios móviles siguen siendo lentos. Con la publicación de páginas con el formato AMP las paginas serán hasta un 85% más rápidas que las páginas convencionales. Evidentemente este porcentaje será menor o mayor dependiendo de cómo esté programada la página original.

Las páginas AMP no suelen ser tan visuales debido a las restricciones de elementos HTML. Así, puedes tener dos versiones de un mismo contenido, una página AMP (orientado más a las visualizaciones por dispositivos móviles) y otra que no lo sea (la página tradicional). Eso sí, deberás configurarla y generar los códigos necesarios para que Google no la entienda cómo código duplicado.

¿Qué es una página AMP?

Una página AMP no es otra cosa que una versión simplificada de la página web. La versión AMP elimina todos los elementos que suelen ralentizar la carga de la web como pueden ser los JavaScripts.

No deben confundirse las páginas AMP con las páginas responsivas o adaptativas. Las páginas responsivas son aquellas en las que el diseño se adapta a las distintas resoluciones de pantallas, pero manteniendo la interfaz gráfica y la carga de distintos elementos como los JavaScript o archivos CSS externos. Es decir, la misma URL y contenido se adecua y se ve diferente dependiendo la pantalla en la que se visualice, pero se cargan prácticamente los mismos elementos. En el caso de las páginas AMP el diseño suele variar porque solo carga lo estrictamente necesario y además se genera un nuevo contenido en una nueva URL.

Así se ve una página en versión responsiva vista desde un móvil y la misma página en versión AMP. En el primer ejemplo se mantiene la cabecera, la miga de pan y se cargan una serie de JavaScript y hojas de estilos que en el segundo ejemplo desaparecen, consiguiendo una carga mucho más ágil:

SEO-Mobile
Página responsiva
SEO-Mobile-Versión-AMP-de-una-página
Página AMP

¿Cómo sé que una página es AMP al realizar una búsqueda en Google?

Cuando realizas una búsqueda desde el móvil, delante de los resultados aparecerá el icono de un relámpago:

SEO-Mobile-Resultados-en-Google-de-páginas-AMP
Búsqueda en google

Eso quiere decir que esa página cumple con los requisitos para considerarse AMP, por eso Google la cataloga así.

Cuestiones técnicas de AMP

AMP tienen 3 componentes principales:

  • AMP HTML: Es HTML ampliado con propiedades AMP personalizadas, pero no se pueden utilizar todos los elementos HTML de las páginas tradicionales.
  • AMP JS: Una serie de archivos JavaScript con los que se pueden añadir componentes a las páginas AMP.
  • AMP Cache: Es una caché de documentos AMP, en el caso de Google "Google AMP Cache", que sirve contenidos directamente desde Google AMP Cache para proporcionar una experiencia de usuario rápida.

Ventajas de las Páginas Aceleradas para Móviles:

  • Cargan más rápido que las páginas tradicionales: el objetivo es la carga de páginas instantáneamente.
  • Google las destaca en sus resultados (icono de un rayo) y además les da prioridad.
  • Mejora en el posicionamiento SEO.
  • Aumento de la calidad de la experiencia de usuario (UX).

Desventajas de las AMP:

  • Restricciones en el código a utilizar: No se pueden cargar archivos JavaScript externos que no sean de AMP ni hojas de estilos externas.
  • A causa de las restricciones en el código a utilizar, el diseño original de la página puede quedar deslucido: La prioridad es la carga rápida.
  • No se pueden añadir elementos complejos aunque poco a poco se van añadiendo más elementos.

Conclusiones

Hoy en día no es factible que AMP HTML sustituya a las webs HTML tradicionales, ya que de momento tiene bastantes limitaciones pero es interesante que algunas de las páginas o landings de nuestra web estén diseñadas en AMP ya que esto nos beneficiará en cuestiones de posicionamiento web y sobre todo en el seo mobile.

 

Endika Carrasco Uriarte

Endika Carrasco Uriarte

Analista Desarrollador Web:

Análisis y desarrollo de aplicaciones Web a medida, Automatización del marketing (Mautic, Hubspot, Kentico EMS), Desarrollo de Landings orientadas a la conversión, Desarrollo y mantenimiento de e-commerce, Posicionamiento SEO On Page y Off Page, e-mail marketing.