¿Qué es AMP? Acelera los resultados de tu web móvil

Accelerated Mobile Pages (AMP) es una iniciativa de código abierto para optimizar y  acelerar la velocidad de carga de las páginas web cuando se realizan búsquedas desde dispositivos móviles.

Las empresas que participaron en este proyecto desde el principio decidieron darle un enfoque de código abierto para que otros pudieran compartir y contribuir con sus ideas a mejorar el código y conseguir una web móvil más rápida sin importar qué tipo de dispositivo móvil esté utilizando el usuario.

Google ha empezado a destacar los contenidos de aquellos medios que forman parte del proyecto. En los resultados de búsquedas desde dispositivos móviles ya podemos observar  publicaciones con un icono en forma de rayo y las siglas AMP justo debajo de la noticia.

Contar con una web con el código AMP habilitado también te dará la posibilidad de aparecer en los primeros resultados de búsqueda desde dispositivos móviles, ya que la velocidad de carga es uno de los factores que Google tiene en cuenta para el posicionamiento web.

Las áreas clave en las que se centra el proyecto tienen que ver con el contenido que muestran los sites, destacando sobre todo aquellos relacionados con imágenes, vídeos o cualquier publicación interactiva.

Es crucial poder distribuir estos contenidos a todo el mundo y en un instante a través de cualquier dispositivo móvil. Para conseguirlo, desde Google han desarrollado una caché global de alto rendimiento para el almacenamiento de todos estos contenidos.

El formato AMP HTML también se presenta como una alternativa (y una solución) a los bloqueadores de anuncios que usaban los usuarios para aumentar la velocidad de carga de los sites que visitaban. Con este proyecto, los editores quieren mejorar sus servicios de publicidad, ampliando los formatos de anuncios que no perjudiquen a la experiencia de usuario desde una búsqueda en móvil. Gracias a este sistema, los sites con la función AMP podrán obtener más ingresos a través de sus anuncios.

¿Cómo aparece tu web en los resultados de búsqueda desde móvil?

Google ha desarrollado una demo para que podamos probar cómo se ven los sites que tienen implementado AMP. Puedes comprobarlo usando esta URL g.co/ampdemo desde tu teléfono móvil (o hacer una simulación en las Herramientas para desarrolladores de Chrome).

Cuando se hace una búsqueda desde móvil, Google nos devuelve un carrusel de aquellas webs con el código AMP habilitado. Te resultará familiar  si eres usuario de redes sociales, ya que es el mismo carrusel que tienen algunas comunidades como Twitter y Facebook para permitir a las marcas enseñar varias fotos o productos con distintos enlaces. La diferencia con el carrusel que muestra Google está en la velocidad con que se cargan esas páginas cuando haces click: hasta 4 veces más rápido que los sites sin el código AMP implementado.

Es importante entender que si tienes una conexión lenta, estas páginas no se cargarán al instante (porque eso no depende del código AMP), pero incluso así, estos sites se cargarán mucho más rápido que anteriormente.  Esto es gracias a que estas páginas están reducidas al mínimo, esencialmente páginas HTML.

¿Cómo implementar AMP en tu sitio web?

Las directrices de Google para las páginas de AMP nos indican que, para empezar, es recomendable tener dos versiones de la misma página que contiene el artículo: la original y una versión AMP. Si Google se encuentra la versión original, ¿cómo sabe que hay una versión  AMP de la misma página? Muy fácil: enlaces de referencia en ambas versiones:

  • En la página que no tenga AMP habilitado haz referencia a la versión de AMP mediante la etiqueta:
    <link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />
  • En la página de AMP añade esta etiqueta para hacer referencia a su versión canónica que no sea de AMP:
  • <link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html” />
  • Si sólo tienes una página y tiene implementada la función AMP, deberás añadir una etiqueta para especificar que es la versión canónica:
    <link  rel = “canonical”  href = “https://www.example.com/url/to/amp/document.html” >

Hay que prestar especial atención a algunas restricciones y especificaciones para los archivos multimedia. Por ejemplo, todos los CSS deben pesar menos de 50 kb en las versiones AMP; las imágenes tienen que utilizar el elemento amp-img, y deben tener una altura y anchura específicas. Si son GIFs habrá que añadir el componente amp-anim.

Los vídeos también deben llevar su etiqueta personalizada amp-video, y si son vídeos de Youtube hay que añadir el componente amp-youtube.

La página oficial de AMP  también nos dice que algunas plataformas que soportan AMP requerirán metadatos de Schema.org para especificar el tipo de contenido de la página. Un requisito para aparecer en los resultados del carrusel cuando se hace una búsqueda por móvil.

Si tu sitio web está desarrollado con tecnología WordPress estás de enhorabuena, porque Automattic, la empresa responsable del desarrollo de este conocido CMS, acaba de anunciar que tiene soporte para AMP a través del plugin de AMP para WordPress. Una gran noticia teniendo en cuenta que el 25% del tráfico web proviene de sitios desarrollados en WordPress.

 ¿Por qué AMP? La velocidad es la clave

¿Qué significa mobile? Que accedo y tengo lo que quiero cuando quiero. Y por eso esperamos que los negocios y las marcas estén ahí para dar respuesta inmediata a nuestras necesidades: resolver una duda, buscar una dirección o incluso hacer una compra online.

Estar presente en “ese momento” será crucial para tu negocio, pero no es la clave del éxito. La paciencia del usuario con una web móvil lenta se está acabando. Cuando navegamos por un sitio web móvil es porque estamos buscando información al instante y esperamos que la experiencia en la web sea a gran velocidad.

Este panorama se antoja especialmente complejo para los medios de comunicación. Según el informe Reuters Institute Digital News 2015, en España, el 56% de los lectores utiliza el móvil para leer los últimos titulares de la actualidad informativa, y el 40% lee el contenido en su totalidad. Si tu web de noticias es lento, el 29% de los usuarios de teléfonos inteligentes cambiará inmediatamente a otro sitio o aplicación. Esto se traduce en menos lectores, y por lo tanto menos ingresos a través de la publicidad o suscripciones para productos de pago.

Ante este escenario, editores y empresas de tecnología de todo el mundo se unieron para encontrar la forma de mejorar ecosistema de contenido móvil y dar respuesta a las necesidades de sus usuarios. Así es como nace Accelerated Mobile Pages (AMP), un proyecto anunciado por Google el 7 de octubre de 2015 y que hoy se hace realidad con un único objetivo: mejorar drásticamente el rendimiento de la web móvil.