AMP (Accelerated Mobile Pages) La guía más completa
Con el principal objetivo de mejorar la experiencia del usuario a nivel Mobile Google ha lanzado el proyecto AMP (Accelerated Mobile Pages) Básicamente lo que se busca es que las páginas visualizadas desde un dispositivo móvil carguen a la velocidad de la luz, o por lo menos hasta un 85% más rápido que una carga sin AMP.
Según estudios realizados por la gente de KissMetrics, un 40% de los usuarios dejará una página web si la misma tarda más de 3 segundos en cargar. Esto puede afectar seriamente el rendimiento o los objetivos de quiénes gestionan un website.
Ahora vamos a adentrarnos de manera concisa en los highlights de AMP y evacuar todas las dudas sobre las plataformas en las cuales se puede utilizar. Por ejemplo podrás implementar AMP en WordPress, Joomla, Drupal , Adobe Experience Manager (AEM) así como en muchos otros gestores de contenidos.
Por otro lado trataremos de dejar en claro cada aspecto de esta nueva tecnología que ya da que hablar no solo porque los resultados son palpables en la práctica sino también porque se observan mejoras en los rankings (posicionamiento) de las páginas que lo han implementado.
¿Qué es puntualmente el proyecto AMP?
AMP son las páginas aceleradas para móviles y es un proyecto de código abierto que tiene por objetivo mejorar el rendimiento de las páginas que se cargan desde un celular o tablet.
El proyecto cuenta con el apoyo no solo de Google sino de otros grandes players como WordPress, The New York Times, Twitter, Facebook, LinkedIn, Pinterest etc.
¿Por qué cargan más rápido las páginas aceleradas para móviles (AMP)?
Los principales puntos en los que se enfocan las páginas AMP para cargarse en los móviles más rápido son los siguientes:
AMP HTML: es puntualmente HTML con ciertas restricciones y con algunas extensiones para hacer la compilación de contenido enriquecido por fuera del HTML básico. Es decir AMP HTML es algo así como HTML modificado con elementos adicionales (etiquetas AMP HTML que reemplazan a etiquetas HTML comunes)
AMP JS: la biblioteca AMP JS garantiza los recursos JavaScript necesarios para que los componentes de AMP HTML funcionen correctamente. En este aspecto particular podemos decir que AMP restringe el uso del JavaScript (JS) a sus librerías.
AMP Cache: es la CDN del proyecto que captura las páginas AMP HTML, las almacena y mejora su rendimiento y eficacia. Con el uso de Google AMP Cache todos los archivos de JavaScript y todas las imágenes se cargan desde el mismo origen que usa HTTP 2.0 para lograr la máxima eficiencia en los procesos.
Técnicas que usa AMP para mejorar la velocidad de carga de las páginas que lo implementan
- Prohibición de peticiones externas para mostrar todo el archivo: scrips asíncronos y CSS inline.
- AMP cuenta con elementos específicos para sliders, inserción de videos y lightbox.
- Primero descarga todo el HTML y luego el resto de los recursos (imágenes, distintos tipos de fuentes etc)
- Mejora continua: al ser un proyecto en pleno desarrollo con frecuencia se lanzan otras posibilidades que mejoran el rendimiento de las páginas.
Implementación de AMP en la práctica ¿Se puede implementar en todo el sitio o solamente en algunas páginas?
Mucho se ha hablado sobre la implementación de AMP en las páginas de un sitio y desde nuestra experiencia podemos afirmarles que es posible disponer de páginas AMP a nivel sitio en general. Sin embargo es una tarea tediosa y de mucho trabajo, por lo que actualmente la sugerencia es implementarlo en las páginas nuevas que se añadan a los sitios o en las páginas que más importancia tengan a nivel objetivos.
Por otro lado también se recomiendo crear páginas AMP en los proyectos que comienzan desde cero.
Importante: AMP es un proyecto que está en pleno desarrollo y todavía no se ha estandarizado.
Código de una página con AMP
<!doctype html>
<html amp lang="es">
<head>
<meta charset="utf-8">
<title>Titulo de la página</title>
<link rel="canonical" href="pagina-web">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate></style>
<noscript><style amp-boilerplate>body{-webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none}</style></noscript>
<style amp-custom>
Estilo personalizado
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Bienvenidos a mi página web</h1>
<amp-img src="imagen.jpg" height="500" width="900"></amp-img>
</body>
</html>
Como habrán podido observar hay una serie de elementos que están prohibidos en las páginas aceleradas para móviles y ellos son los siguientes:
<script>
<textarea>
<input>
¿Qué sitios web pueden implementar AMP en sus páginas?
La idea inicial o el alma del proyecto apuntaban a las grandes empresas editoriales, principalmente periódicos. Sin embargo hoy prácticamente todo tipo de proyectos pueden beneficiarse de este recurso (blogs, páginas de empresas etc)
¿AMP en eCommerce?
Mucho se ha escrito sobre la imposibilidad de aplicar AMP en páginas de comercio electrónico pero esto es una falacia, pues Google ya ha lanzado directrices para implementar AMP en eCommerces.
Actualmente sitios como eBay están poniendo en práctica AMP para mejorar sus páginas y por ende para incrementar sus ventas/ganancias en ventas realizadas desde el canal mobile.
Básicamente el documento presentado por Google explica como aplicar AMP en la página principal, landings, páginas de productos, páginas de búsqueda, widgets de productos relacionados etc.
Link: https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/
eBay es uno de los pioneros en la implementación de AMP a nivel comercio electrónico
¿Se pueden implementar botones sociales en páginas AMP?
Esta es una pregunta que me vienen haciendo hace algún tiempo y la respuesta es que SI. Se pueden insertar botones sociales de Facebook, Twitter, LinkedIn y Pinterest entre otros a través de la siguiente extensión:
"amp-social-share"
¿Es posible insertar contenidos de redes sociales en páginas AMP?
Claro que es posible y a continuación está la respuesta a la consulta. Aclaración: Los mismos requieren la carga de un script con el parámetro "custom-element"
Los siguientes componentes están focalizadas en la inserción de contenidos provenientes de redes sociales en las Accelerated Mobile Pages.
- "amp-facebook integra videos y otras publicaciones de la red social.
- "amp-twitter" permite embeber tweets.
- Con "amp-youtube" se puede insertar videos desde YouTube en las páginas aceleradas.
- Con "amp-pinterest podrás mostrar el botón de pinear o el widget de un tablero en particular de Pinterest.
¿Cómo activar AMP en distintos gestores de contenidos y fácilmente?
Activar AMP en WordPress
Para implementar las páginas móviles aceleradas en WordPress existe un listado de plugins que facilitan la tarea de sobremanera y son los siguientes:
AMP for WP: https://wordpress.org/plugins/accelerated-mobile-pages/
AMP: https://wordpress.org/plugins/amp/
Ambos plugins gozan de una excelente reputación por parte de los usuarios y en las pruebas que realice funcionaron a la perfección ambos dos.
Activar AMP en Joomla
Al igual que en WordPress, AMP se puede implementar en Joomla por medio de plugins y el listado de sugerencias es el siguiente:
Joomla AMP Plugin: https://weeblr.com/joomla-accelerated-mobile-pages/wbamp
Activar AMP en Drupal
En este enlace van a encontrar los modulos necesarios para la activación de las páginas aceleradas en el CMS Drupal. https://www.drupal.org/project/amp
AMP para Adobe Experience (AEM)
En esta foro de discusión se puede encontrar valiosa información sobre la implementación de AMP en AEM.
¿Cómo saber si mi página tiene AMP correctamente implementado?
Para comprobar que AMP está funcionando bastará con agregar el /amp en la url o ?amp=1 y ver que nos devuelve la url. Si está todo bien configurado veremos la versión AMP de la página web.
Otra forma de validar AMP es a través de un extensión para Google Chrome denominada AMP Validator lanzada por Google en Junio de 2016 y que muestra instantáneamente si un sitio tiene páginas aceleradas para móviles.
Link: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
La forma más tradicional de ver si una página AMP es válida es usando la herramienta oficial de Google: https://search.google.com/search-console/amp .
Paso a paso como crear una página en AMP (link de la comunidad y del proyecto oficial) https://www.ampproject.org/es/docs/get_started/create (en español)
AMP y SEO ¿Cómo se llevan?
Una de las preguntas que seguro muchos de ustedes se estarán haciendo es si AMP es factor de posicionamiento dentro de los algoritmos mobile de Google. La respuesta al momento es NO y proviene de Gary Illyes, Webmaster Trends Analyst en Google.
Sin embargo la utilización de este tipo de páginas aceleradas influye por otro lado y acá van algunas estadísticas interesantes que dejan bien en claro que a nivel SEO el impacto es indirecto pero MUY positivo.
- 90% de los publishers están viendo CTRs mucho más altos.
- 80% de los publishers han mejorado el tráfico de sus sitios y vieron como sus eCPMS se han incrementado notoriamente.
AMP y publicidad online
Google está experimentado AMP for Ads o A4A para aplicarlo a sus anuncios de Adsense. También se está por implementar en DoubleClick, también de Google, para servir anuncios 5 veces más rápidos que el promedio.
Se puede leer más aquí: http://venturebeat.com/2016/07/19/google-unveils-accelerated-mobile-pages-for-ads/
Redes que actualmente utilizan Ads de AMP (A4A): Amazon, DoubleClick, Ad reactor, Taboola, AOL Ad Tech y Yieldmo entre otras.
Esperamos que les haya quedado claro el tema de AMP y sepan aprovechar los beneficios de esta tecnología que sin duda alguna va a mejorar la manera de navegar desde teléfonos móviles.
Artículo escrito por Martín Noziglia Mene (SEO) -----> Seguime en Twitter desde @Gruvix.
Leemos sus consultas en comentarios aquí en el blog!