AMP. La nueva forma de navegar a máxima velocidad
En abril de 2015 Google comenzó a penalizar a las webs que no contasen con un diseño responsive y a no mostrarlas en las búsquedas. Esto es debido a que, cada vez más, el móvil es el principal dispositivo desde el que todos nos conectamos y se quería impulsar la usabilidad en ellos.
Google, junto con grandes editoriales, ha dado un paso más lanzando el proyecto open source AMP (Accelerated Mobile Pages) y desde febrero de 2016 está chequeando las webs con este formato. Si navegas desde tu móvil puede que últimamente hayas visto en tus búsquedas de Google un icono como este ( 
) en los resultados. Así que, presta atención, ¡es un tema que te interesa!
Qué es una web AMP
Básicamente es una web con un HTML específico — ciertas etiquetas no se pueden usar —, una versión CSS reducida y la eliminación de Javascript de terceros.
Cómo empezar a utilizarlo
Esto no pretende ser una guía paso a paso, sino una introducción para que sepas los conceptos básicos.
Lo primero que deberás hacer es tener 2 versiones de cualquier página, la versión “web” y la versión AMP con las etiquetas permitidas. Si quieres saber más sobre qué puedes o no utilizar, este artículo de AMP Project te lo explica todo.
Será necesario también reescribir el CSS para ajustarse a las restricciones de uso — debe estar en línea en el <head> dentro de un etiquetado especifico <style amp-custom> y con un tamaño máximo de 50 KB.
Los elementos multimedia tienen que tratarse de manera específica con un etiquetado concreto y marcando el ancho y alto.
Como hemos indicado antes, Java Script y los ficheros js no están permitidos y se deberán utilizar las librerías Javascript que nos ofrecen.
Por último, deberemos insertar las etiquetas canónicas en ambas versiones que hagan referencias a cada una de ellas:
<link rel="amphtml" href="http://www.mi-dominio.com/pagina-1/amp/">
<link rel=“canonical” href=“ http://www.mi-dominio.com/pagina-1/” >
¿Cómo sabes si lo has hecho bien?
Para comprobar que has realizado correctamente tu proceso para acelerar tu web con AMP, tienes que acceder a la Webmaster Tools de Google (Search Console) y comprobar si se están indexando las nuevas páginas. Para ello accede al menú “Aspecto de la búsqueda” -> “Accelerated Mobile Pages”.
Asegúrate de que tus páginas contengan la etiqueta rel=”amphtml” puesto que es por aquí por donde Google detecta que tienes contenido específico optimizado para móviles. Desde ahí obtendrás un listado con los posibles errores cometidos.
Si navegas desde un pc puede que te ayude, y mucho, utilizar la herramienta para desarrolladores de Chrome — ¡qué sería de nosotros sin ella! —. Escribe al final de la url el parámetro #development=1 y recarga la página; verás cómo en la pestaña “console” te aparecerá si valida correctamente o si tienes algún error o advertencia.
Como es un proyecto en desarrollo y en continua evolución te aconsejo que lo revises cada cierto tiempo; puede que validara hace unos meses y hoy haya cambiado el estándar mostrándote un warning, o, peor aún, que ya no valide.
Conclusiones
Como siempre Google nos “empuja” a hacer cambios en pro del usuario y, en consecuencia, para tu beneficio. Por ello Google nos ofrece esta tecnología para mejorar considerablemente la velocidad de sitios web móviles.
Si quieres adelantar a tu competencia y no hundirte en las búsquedas en esta plataforma, te aconsejo que no dejes en el olvido la tecnología AMP, aunque te duela en el alma perder tu precioso diseño y las ventajas de jquery.
Autor
Andrés Rivas
Dpto. de Producto.
