¿Qué es AMP Project? Cómo instalarlo en tu web

Cada día suenan nuevas noticias de como se está transformando la búsqueda de información a través de internet, no solo eso, si no también la forma de comprar. A día de hoy más del 50% de los internautas en España realizan sus compras mediante el móvil.

Así lo detalla el último estudio sobre eCommerce de IAB Spain para el año 2020.

De aquí surge la necesidad de adaptarse a las necesidades de nuestros usuarios, es aquí donde nace AMP Project.

 

¿Qué es AMP Project?

Pues AMP Project o cómo su traducción de sus siglas en inglés significan: Proyecto para páginas web adaptadas a dispositivos móviles, es una iniciativa de código abierto desarrollada por varias empresas entre las que se encuentran Google y que tiene por objetivo reducir el tiempo de carga de las diferentes webs en los dispositivos móviles.

 

Desde la última actualización del algoritmo de Google, este le ha vuelto a dar más peso al tiempo de carga de la página en este tipo de dispositivos para el posicionamiento SEO, ¿qué quiere decir esto? Pues que como tu página web no cargue rápido a través de una búsqueda en un móvil, va a resultar casi imposible que aparezcas entre las primeras posiciones de Google.

Pero como Google es justo y comprensivo “o casi siempre” pone a disposición de todos esta valiosa herramienta, que al ser de código abierto también permite que otros diseñadores la utilicen y mejoren.

 

¿Cómo funciona el AMP? Ventajas e Inconvenientes

Las páginas AMP funcionan igual que cualquier otra página, pero en ellas se da prioridad al tiempo de carga, para ello Google realiza dos acciones en este tipo de páginas:

  1. Permite el almacenamiento del caché de cualquier usuario sin costo alguno, de esta forma el usuario carga mucho más rápido la página.
  2. Prioriza el contenido por encima del resto de elementos, es decir, pone el foco en el texto y las imágenes cuando se trata de construir la estructura del sitio web. De esta forma se eliminan el resto de componentes que no permiten un mejor tiempo de carga.

 

Ventajas

  • Si dispones de un blog o un eCommerce sencillo, AMP te permitirá disminuir el tiempo de carga y el diseño de tu web apenas se verá modificado en su versión móvil.
  • Al ser de código abierto, pueden realizarse mejoras que permitan una actualización continua.

 

Inconvenientes

  • No está diseñado para cargar elementos JavaScript y apenas otros CSS.
  • Las páginas webs corporativas o con excesivos elementos de este tipo pierden gran parte de su web, es decir, al poner el foco en el contenido ( ya sea texto o fotos) el resto de elementos casi desaparecen.

 

Instalar Accelerated Mobile Pages en tu web

Para implementar AMP en tu página web puedes hacerlo creando una nueva versión para móviles introduciendo la plantilla que se encuentra en HTML en la página web de AMP Project. Para que no tengas que marearte mucho buscándola te la copio aquí mismo.

 

<!doctype html>

<html ⚡>

<head>

  <meta charset=”utf-8″>

  <title>My AMP Page</title>

  <link rel=”canonical” href=”self.html” />

  <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>

  <style amp-custom>

    h1 {

      margin: 1rem;

    }

  </style>

</head>

<body>

  <h1>Hello AMPHTML World!</h1>

</body>

</html>

 

Como verás se incluye la etiqueta <link rel=”canonical” href=”self.html” />, no te olvides de incluirla si no quieres que Google te penalice por contenido duplicado.

Si tu web está diseñada en WordPress te recomiendo instalar el plugin que existe específicamente de AMP para mejorar el rendimiento de tu web en sitios móviles.

 

Conclusión sobre AMP 

La tendencia muestra cómo este cambio de uso hacia los dispositivos móviles va creciendo y parece no tener retorno, por lo tanto si no te subes al barco a tiempo seguramente tu web quede desolada en la 2ª página de Google. 

Utilizar adecuadamente AMP permitirá a tu página web disminuir el tiempo de carga y de esta forma escalar posiciones hacia la cima.

En STAMINA Marketing hace tiempo que usamos esta herramienta y podemos afirmar que ayuda a mejorar el rendimiento de la web.

 

¿Has probado ya a implementarlo? Prueba la herramienta Google Page Speed de forma gratuita y mide si has conseguido disminuir el tiempo de espera. En este otro post te enseño como usar Google Page Speed para analizar el tiempo de carga de tu página web y así poder obtener conclusiones.

 

¿Conoces más formas de disminuir el tiempo de carga de una página web?, ¿crees que es acertado utilizar AMP? Coméntame aquí abajo 👇🏼👇🏼.