Seguimos con los cambios que nos trae Google para este 2016, en esta ocasión nos trae el proyecto AMP Project, que consiste en mejorar la velocidad de carga de las páginas web en todos los dispositivos móviles, tengo que decir que hay cosas de Google que no me gustan, pero en este caso creo que es primordial y la considero importante, si además afecta el SEO pues todavía más interesante, la W3C apareció para que todos los desarrolladores siguiéramos unas normas, como hoy en día solo las aceptan determinados colectivos, Google parece que haya dicho a mí si me vaís a hacer caso.
El objetivo de AMP HTML con este paso es claro, posicionar por delante en los resultados de móviles aquellas páginas que carguen más rápido, pero no solo eso, sino que además premie aquellas páginas que tienen un contenido de calidad, es decir, actualmente una página con texto plano carga mucho más rápido que una página con muchas imágenes ya que es muy sencilla, si tenemos una página con fotos, videos y aporta valor a nuestro lectores, debería estar posicionada por encima, pues esta es la idea, hacer que nuestras webs con muchos artículos, imágenes y videos carguen lo más rápido posible y se posicionen en los primeros resultados de búsqueda, para ello tendremos que programar una versión exclusiva para móviles.
AMP es un nuevo lenguaje de creación basado en el HTML, su nombre se resume en “Acelerator Mobile pages” , digamos que es una evolución lógica de Bootstrap, si Bootstrap se encarga que la información se muestre correctamente y adaptada a nuestra imagen, AMP HTML se encarga de que esa información cargue lo más rápido posible.
AMP Html aparece para solucionar algunos de los principales problemas actuales de la carga de páginas web en móviles
- JavaScript y CSS: Por normal general una página web se compone de multitud de archivos css, y javascript, si usamos muchos módulos, todavía se incrementa más esa cantidad, cada petición de carga de uno de estos archivos hace que todo se relentize.
- El peso de la web, cuando navegamos a través del móvil por una conexión que no es wifi, los tiempos de carga se hacen eternos por eso es necesario aligerar la carga de datos en la medida de posible.
- Las imágenes, son uno de los mayores problemas ya que es donde está la máxima carga de datos de una web y donde toda la carga de la web se relentiza.
Usar AMP HTML es relativamente sencillo si sabes HTML5, no os podemos dar una clase en este artículo pero si poner un ejemplo para que lo tengáis como punto de partida, que como podréis observar es muy muy parecido al HTML5, lo mejor es que os leáis la documentación oficial., importante que no se os olvide el rayo molón que tiene al principio del código.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<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>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>
Como encuentra Google la nueva página
Google para encontrar una versión amp requiere que esté referenciado con una url o un link rel dentro del código, cuando pase el buscador, lo indexará en la versión de móviles y automáticatemente devolverá el resultado al usuario en la versión AMP.
<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />>
Por supuesto para que no nos penalice Google por contenido duplicado deberemos indicarlo en la versión AMP, poniendo un hermoso canonical al archivo original:
<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />
En el caso que la versión AMP es la única y no tengas una versión normal, lo debes especificar igualmente:
<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />
En ecommerce hay un problema, y es que si esta muy limitado la carga de javascript y css muchas de las funcionalidades que incorpora Prestashop y otros cms de comercio electrónico no se van a poder usar, podía ser muy válido para fichas de producto y posteriormente que se vaya a la versión normal cuando añadimos un producto en el carro, demasiado nuevo para probar en un sitio en producción, pero estaremos atentos a la evolución de este lenguaje y en su aplicación a las tiendas online.