16 Dic Qué es AMP (Accelerated Mobile Pages)

El impacto que están teniendo los dispositivos móviles en la forma en que consumimos información es enorme. Cada vez utilizamos más esta tecnología para consultas o buscar información. Por eso, que tu página web tenga un gran desempeño en estos dispositivos es crucial, y para ello nos valemos del AMP (Accelerated Mobile Pages).

En este artículo te vamos a explicar a qué nos referimos con AMP, quiénes están detrás de él y qué finalidad tiene. Además, te explicaremos cómo puedes utilizarlo en tu página web en caso de que cuentes con un WordPress.

Qué es AMP project

AMP son las siglas del término anglosajón Accelerated Mobile Pages, y que en castellano sería Páginas Móviles Aceleradas. Se trata de un proyecto fomentado por algunos de los gigantes tecnológicos, especialmente Google que ha sido su propulsar, que busca que las páginas web carguen de forma más rápida en los dispositivos móviles, es decir, mejorar su velocidad de carga.

Para ello han fomentado el uso de un código abierto basado en el lenguaje HTML, y con el que se consigue adaptar mejor una página a un dispositivo móvil. De esa forma se busca que la experiencia de un usuario al visitar una página sea mucho mejor.

Esta mejora en la experiencia del usuario se debe a la importancia que han tenido los dispositivos móviles en el tráfico de Internet en los últimos años. AMP por lo tanto es el intento de adaptar las páginas web al nuevo uso que hacen los usuarios de la tecnología.

 

Cómo funciona AMP

Como ya hemos explicado anteriormente, el AMP Project se basa en el lenguaje HTML para crear un sistema con el que las páginas se carguen de una forma determinada que está más optimizada para los dispositivos móviles.

Sin embargo, no es el lenguaje HTML común y que muchos desarrolladores de páginas web podrían conocer. Tiene algunas diferencias que lo convierten en un lenguaje particular:

• HTML AMP: Debido a sus particularidades, a este tipo de HTML se le da un nombre propio. La particularidad que tiene es que no se usan todas las etiquetas que podríamos ver en el lenguaje HTML. Un ejemplo de ello es la etiqueta img (que pasa a llamarse img-amp) que sí puede usarse, y la etiqueta object que no se podría usar. Esto implica que la construcción de la página sea distinta, mucho más simplificada y eliminando algunos elementos que provocan una carga más rápida de la página.
• JavaScript AMP: Al igual que con el HTMl, AMP reduce el uso del JavaScript en la página. En este caso solo se utilizan las librerías de AMP HTML.
• Cachés CDN: Usa las cachés CDN del propio proyecto para cachear el contenido y que este se muestre con una mayor velocidad  los usuarios. Gracias a esto, no se usan recursos externos que provocan una ralentización en la velocidad de carga.

 

Apariencia de AMP en Google y buscadores

Todas estas características que definen al AMP hacen que su apariencia cuando la página se carga sea distinta. Dado que se reduce el uso de muchos de los elementos que conforman la página para su versión de ordenador, esta se ve alterada.

Pero la primera diferencia de una página con AMP la vamos a notar cuando la encontremos en los buscadores. Y es que junto a la SERP nos vamos a encontrar un símbolo de un rayo junto a las siglas AMP que nos indicará que esa página ha sido optimizada. Obviamente, Google prioriza una página AMP frente a otros resultados, dado que su objetivo es que la experiencia de los usuarios sea mejor y para ello la velocidad de carga es determinante.

Una vez ya dentro de la página vamos a observar un cambio en la url, y es que antes del slug que veríamos normalmente encontramos que está escrito amp, de esa forma sabemos que estamos en esa versión concreta.

Además la apariencia es totalmente distinta. Adapta las imágenes a los bordes de la pantalla, adapta el título a un formato concreta, y cualquier elemento que solicite una petición externa, queda totalmente eliminado de la página. Hay algunas excepciones, como pueden ser los vídeos, en lo que hay formas de incluirlos.

 

Beneficios de usar AMP

En este punto es justo que te plantees si realmente es útil sacrificar el diseño que has creado en una página para que esta cargue más rápido. Y es que la velocidad de carga es un factor diferencial de cara al posicionamiento de tu página y de la experiencia del usuario. Para que lo entiendas mejor, vamos a enumerar algunos datos con los que entenderás mejor los beneficios de utilizar AMP.

• El AMP en Google es fundamental para figurar entre los principales resultados para una intención de búsqueda que se lleve a cabo desde un dispositivo móvil. Por ello podrías lograr un mejor posicionamiento para tu página. Si tu resultado no figura normalmente entre los primeros resultados en una búsqueda, Google tiende a colocar un resultado que llama «hallazgos interesantes» con el que destaca este tipo de contenidos.
• Hay estudios que afirman que la velocidad de carga de las páginas podría mejorar en hasta un 85%.
• Al ofrecer una apariencia adaptada a dispositivos móviles y estructurada, mejora la experiencia de usuario. Esto es un factor que puede ser diferencial para el tiempo de permanencia del usuario en tu página y ayudarte así mejorar tu posicionamiento en buscadores.
• De cara al usuario, el gasto de datos que se realiza al visitar una página con AMP es menor al de cualquier otra.

 

Implementa AMP en WordPress

En caso de que tengas una página web en la que utilices WordPress, AMP puede ser fácilmente introducido para que tus páginas se adapten a este tipo de formato. Por lo que vamos a indicarte cómo puedes encontrarlo y qué configuración debes hacer para que tus resultados se vean en las serp con el icono de AMP y carguen con este formato.

Lo primero que debes saber es que lo único que tendrás que hacer es instalar un plugin, el cuál ha sido desarrollado entre otros por Google, y cuyo nombre es muy sencillo: AMP.

Este plugin lo vas a encontrar en el repositorio de plugins que tienes en tu propio WordPress, por lo que deberás ir a Plugins > Añadir Nuevo > AMP. Una vez allí deberás pulsar en el botón descargar y después en activar.

Después podrás configurar este plugin dentro de tu propio WordPress. Se te habilitará una sección dentro del menú lateral izquierdo del CMS que se llama AMP. Una vez hayas hecho clic allí verás un panel en el que podrás configurar todos los parámetros para la adaptación a AMP en tus entradas y páginas.

Sin embargo, hay que decir que este plugin que te decimos es bastante limitado. Hay determinados elementos u otros plugins que no optimiza, como puede ser el creador de formularios de contactos Contact Form 7. Por eso, en caso de que este plugin te sepa a poco, te recomendamos utilizar AMP for WP. Este adapta muchos más elementos con los que construimos una web, como puede ser el constructor de páginas Elementor y el Contact Form 7 que antes mencionábamos.

Posteriormente podrás comprobar si tus páginas efectivamente están indexándose como AMP y se están viendo correctamente a través de tu cuenta de Google Search Console. Por lo que comprueba en esta sección de esta herramienta de Google si efectivamente el plugin está funcionando en tu WordPress.