Google AMP, cuyas siglas en inglés se corresponden con Accelerated Mobile Pages y que podría traducirse como páginas móviles aceleradas, es una iniciativa que pretende agilizar el tiempo de carga de las páginas web en dispositivos móviles. Desde el punto de vista más técnico, AMP no deja de ser un framework construido con tecnologías ya existentes como HTML o CSS, pero sus novedades y funcionamiento van un poco más allá, como explicamos en este artículo.
La idea de AMP es que el contenido que se vaya a mostrar en una página cargue muy rápido y que incluso si el usuario la abandona, se aproveche al máximo de información con un mismo código que funciona en múltiples plataformas y dispositivos.
Básicamente, lo único que cambia bajo el esquema de Google AMP respecto a las página tradicionales en HTML son algunos recursos técnicos. Esto se debe a las especificaciones del código abierto del programa, que permiten que éstas funcionen en cualquier navegador. No olvidemos que AMP HTML es un proyecto abierto con licencia Apache y sus especificaciones técnicas iniciales y código están disponibles a través de GitHub.
Además de la propia Google, principal promotora de la iniciativa, medios de comunicación como Time, BBC, El País, The Guardian Financial Times, BuzzFeed, Mashable o New York Times se han unido a este proyecto en colaboración con empresas de tecnología web, como WordPress, Nuzzel, Pinterest, Twitter, Linkedin, etc.
¿Cómo funciona Google AMP HTML?
AMP HTML está pensado para páginas que contengan publicaciones y no aplicaciones web. No tiene librerías externas JavaScript y se realiza mediante Custom Elements y Web Components (y estos sí pueden contener JavaScript).
Aquí un ejemplo de lo que podría ser una página estática en AMP:
<!doctype html>
<html AMP>
<head>
<meta charset="utf-8">
<title>Página Ejemplo en AMP</title>
<link rel="canonical" href="./regular-html-version.html">
<!-- -Indica la versión en HTML, o si no el documento AMP HTML.->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<style amp-custom>
h1 {color: blue}
</style>
<!-- Para los METADATOS, la recomendación es que se utilice Schema.org para la semántica de los documentos-->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"miniatura1.jpg"
],
"datePublished": "2016-04-28T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 2}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!--incluimos la librería AMP.js y la cargamos de forma asíncrona con async -->
</head>
<body>
<h1>Ejemplo</h1>
<p>
Aquí el texto que quieras
<amp-img src=ejemplo.jpg width=405 height=300></amp-img>
</p>
<amp-ad width=400 height=250
type="a9"
data-aax_size="400x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>
Si te interesa profundizar en la optimización de páginas web para móviles, no dejes de consultar los numerosos artículos que hemos publicado sobre diseño responsive.