AMP, Accelerated Mobile Pages,o páginas móviles aceleradas, tiene como objetivo mejorar la velocidad de carga de la página web a través de smartphone.
Este jueves pasado estuvimos en un evento para webmasters para la entrega de unos premios y sobre todo para charlas con los compañeros de profesión, aprender cosas nuevas y disfrutar del mundo Offline, que de vez en cuando no viene mal. Bueno el tema es que en este evento salió el tema de AMP de Google y para nuestra sorpresa gran parte de los presentes les sonaba a chino.
AMP o APM
Me hizo mucha gracia que a lo largo de la conversación se hablara indistintamente de AMP y APM, que para quien no lo sepa APM es una programa de humor de la televisión catalana, y es famoso por vídeos como estos:
Bueno tonterías aparte vamos a lo importante:
¿Qué es el AMP de Google?
AMP son las siglas en inglés de Accelerated Mobile Pages (aquí tenéis la web del proyecto) y no es otra cosa que un iniciativa de código abierto dirigida y promovida por Google con el fin de mejorar el rendimiento de las páginas web en dispositivos móviles. Hay que aclarar que esta plataforma está diseñada para páginas webs de publicaciones como podría ser un medio digital o un blog. De forma que el «consumo» de información sea lo más rápida, cómoda y limpia. Aquí os dejamos un vídeo oficial (en inglés) para ver más visualmente el proyecto:
¿Qué elementos componen AMP ⚡ ?
Como explica Paul Shappiro, de Search Engine Land. AMP se basa básicamente en los pilares actuales de las WWW: HTML, Javascript o JS y el uso de Cachés. Estos tres pilares en AMP se entenderían como:
-
AMP HTML:
AMP HTML no es más que el lenguaje HTML ampliado con propiedades o componentes AMP personalizados. Un ejemplo de código básico sería:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="isocialweb.agency/landing/amp/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hola que ase!</body>
</html>
Si tienes unas nociones de HTML verás que se parece mucho a cualquier página HMTL aunque algunas etiquetas HTML son reemplazadas por las etiquetas específicas de AMP.
-
AMP JS:
De igual forma que pasa con HTML, el caso de Javascript es similar. En este caso AMP nos proporcionar una biblioteca AMP JS donde se implementan como dicen ellos mismos todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y te proporciona las etiquetas personalizadas para garantizar la carga rápida de tu página.
Una de las grandes mejoras u optimizaciones que implementa es que convierte en asíncrono toda llamada a recursos externos, de forma que evita el bloqueo de representación de información en tu web. Si habéis trabajado alguna vez con la herramienta de PageSpeed de google uno de los problemas que suele devolver está basado en este punto.
-
Uso de cachés o Google AMP Cache:
Aquí tenemos otro de los puntos clave de la mejora de tiempos de carga y es que Google AMP Cache captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. De esta forma tanto la página como los archivos estáticos (js o imágenes) se cargan desde un mismo punto que además usa HTTP 2.0
¿Suena muy molón todo esto no? Seguro que empresas como cloudflare o proveedores de servidores no piensan lo mismo.
¿Qué grandes empresas usan este proyecto?
Cada vez son más las empresas y medios de alta repercusión que se suben al carro del A M P, estos son algunos de los más sonados:
- El País
- 20 Minutos
- ABC
- AS
- Financial Times
- The Guardian
- Mashable
- BBC
y cómo no:
- WordPress
Los medios de comunicación son unos de los grandes abanderados de esta nueva tecnología y en parte tiene algo que ver con Google News.
AMP en Google News o Google Noticias
Como ya ocurrió en sus momento con la inclusión de Google News, los resultados de las SERPS fueron invadidos por un nuevo visitante de google, en este caso de AMP obtiene en los resultados de Google un sitio privilegiado con un carrusel con imágenes que premia los medios que han implementado este servicio. Este carrusel es fácilmente identificable porque en la base tiene el famoso ⚡ asociado a AMP junto con sus siglas.
¿Cómo instalar AMP en WordPress?
Si tu web está desarrollada en WordPress estás de enhorabuena y es que el gigante del mundo bloguero en internet es uno de los abanderados de AMP y Google lo ha tratado con cariño.
Para instalar AMP en wordpress únicamente debes instalar un plugin y lo tendrás operativo:
Si además de esto utilizas herramientas como Yoast para la gestión del SEO de tu página te vendrá bien vincular ambas herramientas. Para ello te recomendamos instalar:
Una vez implementado al poco tiempo podrás ver que en Web Master Tools en Aspectos de búsqueda > Accelerated Mobile Pages. Aparecerán vuestras páginas en versión AMP indexadas.
¿Se puede usar Publicidad en AMP?
Como hemos visto en este artículo con AMP las llamadas externas están bastante capadas por lo que la inclusión de publicidad a priori parece un problema y en gran medida lo es.
Entonces ¿No puedo usar publicidad en AMP?
Aquí viene otra de las jugadas de Google con el AMP, por si el resto no os ha parecido suficiente. En AMP puedes mostrar publicidad de los proveedores soportados por AMP HTML como son por ejemplo, seguro que esto os sorprende enormemente Adsense (en serio? nunca me lo habría imaginado) o Doubleclick (esta tampoco tiene nada que ver con google, puedes visitar su web oficial en Doubleclick by google), pero tranquilos que no son los únicos, existen muchos más que podéis ver en esta lista de proveedores autorizados para AMP-AD y en esta misma web explica como añadir publicidad desde un dominio personalizado. Este tipo de proveedores de publicidad hacen uso de la etiqueta AMP-AD que pasa parámetros a los servidores como Tamaño del anuncio o red de publicidad, para mostrar automáticamente los anuncios.
Head SEO y coCEO de iSocialWeb. CMO de Growwer. Especialista en optimización de conversión y Marketing Experiencial.