Crea un sitio web usando AMP

Actualmente el crear contenido para teléfonos móviles 📱 es muy importante, pues con el tiempo, la gente cada vez hace más uso de estos, el problema es que la experiencia suele ser frustrante y sobre todo lenta; Más cuando estamos navegando con la red móvil, para eso tenemos el proyecto AMP ⚡️ (Accelerated Mobile Pages) al rescate.

¿Qué es AMP?

AMP es una iniciativa de código abierto que nos trae Google y cuyo propósito es que los editores 📝 puedan crear contenido móvil optimizado y a la vez este cargue al instante en todas partes.

La sintaxis es muy similar, por no decir igual a la de un documento HTML, solo que con algunas restricciones para lograr un mejor rendimiento. También contamos con algunas extensiones para compilar contenido más allá de lo que tenemos en HTML básico.

¿AMP afecta a nuestro SEO?

Claro, las páginas cargan hasta cuatro veces más rápido y esto le encanta a 'Papá Google', incluso en los resultados de búsqueda ya empezó a darles prioridad a los sitios web que usen AMP.

Antes de comenzar

Antes de comenzar hay que tener en cuenta dos cosas de AMP:

Está hecho para sitios que contengan una gran cantidad de texto, como sitios de noticias o blogs 📰.
Es muy estricto en cuanto al contenido, es decir que no vamos a poder usar cualquier etiqueta de HTML o propiedad de CSS.

Primeros pasos

Ahora si a lo que nos interesa:

Vamos a comenzar definiendo un documento HTML de toda la vida:

HTML

<!doctype html> <!-- Definimos el tipo de documento -->
<html lang='es'> <!-- Etiqueta html, contenido en español -->
  <head> <!-- Etiqueta head -->
    <meta charset='utf-8'> <!-- Codificación utf-8 para el documento -->
    <title>Hola</title> <!-- Etiqueta title -->
  </head>
  <body> <!-- Etiqueta body -->
    <h1>Bienvenido</h1> <!-- Título -->
  </body>
</html>

Ahora vamos a ponerle un poco de vitaminas AMP 💊 a nuestro documento HTML, las cuales son obligatorias:

HTML (AMP)

<!doctype html>

<!-- Nueva etiqueta html para definir AMP -->
<html ⚡ lang='es'>

  <head>
    <meta charset='utf-8'>

    <!-- Incluimos la biblioteca js de AMP -->
    <script async src='https://cdn.ampproject.org/v0.js'></script>

    <title>Hola</title>

    <!-- Etiqueta canonical -->
    <link rel='canonical' href='http://example.ampproject.org/article-metadata.html' />

    <!-- Etiqueta viewport para Responsive Design -->
    <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>

    <!-- Estilos por default de AMP para acelerar nuestro sitio web-->
    <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>
  </head>
  <body>
    <h1>Bienvenido</h1>
  </body>
</html>

Manejo de imágenes y gifs 🏞

Algunas etiquetas como es la de <img>, se reemplazan por etiquetas personalizadas que nos da AMP, esto para garantizar un mejor rendimiento.

Con HTML tendríamos algo como lo siguiente:

HTML

<img src='bienvenido.jpg' alt='Bienvenido' height='500' width='500'></img>

Con AMP tendríamos que hacer uso de la etiqueta <amp-img> de la siguiente forma:

HTML (AMP)

<amp-img src='bienvenido.jpg' alt='Bienvenido' height='500' width='500'></amp-img>

Lo que está pasando por detrás de esta etiqueta es lo siguiente:

<amp-img src="bienvenido.jpg" alt="Bienvenido" height="500" width="500" class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout" id="AMP_2">
    <i-amp-sizer style="display: block; padding-top: 100%;"></i-amp-sizer>
    <img amp-img-id="AMP_2" alt="Bienvenido" class="-amp-fill-content -amp-replaced-content" src="bienvenido.jpg">
</amp-img>

Esto quiere decir, que realmente estamos usando la etiqueta <img>, pero con la mágia de AMP por detrás, lo que nos garantiza soporte con al menos las dos últimas versiones de los principales navegadores.

Imágenes animadas (gifs)

Para insertar un gif necesitamos la etiqueta <amp-anim>, algo totalmente distinto de la etiqueta <amp-img>, pues con esta no podríamos insertar un .gif.

HTML (AMP)

<amp-anim width='400' height='300' src='imagen.gif'></amp-anim>

Nota

Para poder usar esta etiqueta necesitamos el siguiente recurso: <script async custom-element='amp-anim' src='https://cdn.ampproject.org/v0/amp-anim-0.1.js'>dentro de <head>.

Imágenes responsive

Para crear imágenes responsive 📱 💻 es muy importante contar con los atributos width, height y srcset para los diferentes tamaños de la pantalla.

Actualmente es posible lograr estas imágenes responsive con CSS puro, pero sería mucho más difícil hacerlo de esa forma y requieren que a veces usamos hacks (trucos). AMP nos facilita esto con el atributo layout y así ya no tengamos que manipular el CSS para lograr estos resultados.

Atributo `layout`

El atributo layout es muy útil para cambiar o manipular las imágenes de nuestro sitio web de una forma bastante cómoda y fácil.

HTML (AMP)

<amp-img
    src='/img/imagen.jpg'
    width='1698'
    height='2911'
    layout='responsive'
    alt='Imagen'>
</amp-img>

Los valores que tenemos para este atributo lo los siguientes:

nodisplay: El elemento no está. El componente ocupa espacio cero en la pantalla como si su estilo de visualización no este (no requiere anchura/altura).
fixed: El elemento tiene una anchura y altura fija, sin capacidad de respuesta compatible (requiere anchura/altura).
responsive: El elemento se dimensiona a la anchura de su contenedor y cambia el tamaño de su altura automáticamente a la relación de aspecto determinada por los atributos de anchura y altura. Esto quiere decir que el elemento con este valor se vuelve completamente responsive (requiere anchura/altura).
fixed-height: El elemento toma el espacio disponible en el, pero mantiene la altura sin cambios (requiere solo altura).
fill: El elemento toma el espacio del que dispone, tanto en anchura como altura (no requiere anchura/altura).
container: El elemento permite a sus hijos definir su tamaño al igual que lo normal en un div en HTML (no requiere anchura/altura).
flex-item: El elemento y otros elementos en su matriz toman el espacio que queda en el contenedor padre cuando el padre es un recipiente flexible es decir display:flex; de CSS (no requiere anchura/altura).

Atributo `srcset`

El atributo srcset se utiliza para controlar un elemento en función de los diferentes tamaños de la pantalla, este atributo no es algo de AMP, si no más bien es algo que nos trae HTML5.

HTML (AMP)

<amp-img
    src='imagen.jpg'
    srcset='imagen-640.jpg 640w,
           imagen-320.jpg 320w'>
</amp-img>

En este ejemplo indicamos que la imagen por default va a ser imagen.jpg y cuando el navegador tenga una anchura de 640px este va a utilizar la imagen imagen-640.jpg, lo mismo pasa con la imagen de 320px.

He aquí un ejemplo más completo:

HTML (AMP)

<amp-img src='/img/amp.jpg'
      srcset='/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w, /img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w, /img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w'
      width='1080'
      height='610'
      layout='responsive'
      alt='Imagen'></amp-img>

Insertar un video

Para insertar un video 📹 tenemos que usar la etiqueta <amp-video>, esto equivaldría a la etiqueta <video> de HTML5.

HTML (AMP)

 <amp-video width='720' height='480' src='video.mp4'
  poster='imagen.jpg'></amp-video>

Insertar audio

Para insertar audio 🔊 tenemos que usar la etiqueta <amp-audio>, que al igual que pasa con los videos esto equivaldría al audio de HTML5.

HTML (AMP)

<amp-audio width='500' height='500' src='audio.mp3'>
  <source type='audio/mpeg' src='audio.mp3'>
  <source type='audio/ogg' src='audio.ogg'>
</amp-audio>

Nota

Para poder usar esta etiqueta necesitamos el siguiente recurso: <script async custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-0.1.js'></script> dentro de <head>.

Manejo de estilos

Los estilos de una página AMP no cambian en nada, simplemente es el CSS de toda la vida, solo que con algunas ⚠️ limitaciones por motivos de rendimiento.

Como primer limitante tenemos que no podemos usar la etiqueta <link> para traer estilos a nuestra página, si no más bien, tenemos que insertarlos dentro de la etiqueta <style amp-custom> que equivaldría a la etiqueta <style>

CSS

<!doctype html>
  <head>
    ...
    <style amp-custom>
      body {
        background-color: red;
      }
      amp-img {
        border: 3px solid black;
      }
    </style>
    ...
  </head>

Nota

No podemos usar más de una vez, dicha etiqueta.

Estilos no permitidos:

Las siguientes reglas no están permitidas en las páginas AMP:

important: No está permitido el uso de !important ya que puede hacer que AMP no cumpla con sus reglas de tamaño en un elemento.
selector universal: No se permite el uso del selector universal ya que no es bueno para el rendimiento al igual de que este podría afectar a otros estilos.
:not(): Totalmente lo mismo que con el selector universal.
pseudo-selectores, pseudo-clases y pseudo-elementos: Solo se permiten en los selectores que contienen nombre de las etiquetas y no en etiquetas que contengan amp-.
Clases con la palabra amp: Digamos que este nombre solo va a estar reservado para el uso interno de AMP. Por ello no lo podemos usar clases como -amp o i-amp
behavior, -moz-binding: Estas propiedades no están permitidas por cuestiones de seguridad.
Filtros: No podemos usar filtros CSS por cuestiones de rendimiento.

Estilos restringidos:

Las siguientes reglas están permitidas, pero se encuentran restringidas:

transition.
Keyframes.

Uso de media queries

Media queries en CSS

Se tiene totalmente permitido el uso de media queries (@media) en CSS. Esto para hacer nuestro sitio web responsive.

Elementos con media queries

Otra característica que tenemos con AMP es el atributo media, este atributo se puede utilizar en cada elemento de AMP, es muy similar a los media queries, con la diferencia de que solo influyen en el elemento en específico.

HTML (AMP)

<amp-img
    media='(min-width: 650px)'
    src='pequeña.jpg'
    width='466'
    height='355'
    layout='responsive'>
</amp-img>

HTML (AMP)

<amp-img
    media='(max-width: 649px)'
    src='grande.jpg'
    width='527'
    height='193'
    layout='responsive'>
</amp-img>

En función de la anchura de la pantalla, uno o el otro será tomado en cuenta y procesado.

Placeholders & fallbacks

En AMP tenemos dos atributos (placeholder y fallback) que nos van a ayudar a que el usuario 👨🏻 siempre tenga algo que ver en nuestro sitio web si llega a tener problemas, ya sea por su tipo de conexión o si su navegador no es compatible.

Placeholder

El atributo placeholder actúa como un preview del elemento padre. Esto quiere decir que para utilizarlo este debe ser un hijo directo del elemento padre.

HTML (AMP)

<amp-anim src='animacion.gif' width='466' height='355' layout='responsive'>
    <amp-img placeholder src='preview.png' layout='fill'></amp-img>
</amp-anim>

Por default el placeholder se muestra inmediatamente, una vez que su padre este listo para mostrarse se oculta su placeholder y se muestra el contenido.

Fallback

El atributo fallback se utiliza para indicar al usuario cuando su navegador no es compatible con alguna característica en particular:

HTML (AMP)

<amp-video width='720' height='480' src='video.mp4'
    poster='imagen.jpg'>
  <div fallback>
    <p>Tu navegador no soporta el elemento video de HTML5.</p>
  </div>
</amp-video>

Fuentes personalizadas

Las páginas AMP no pueden incluir hojas de estilo externas, a excepción de las fuentes personalizadas 🔤, esto se puede lograr de dos maneras:

Usando `<link>`

Las siguientes páginas son válidas para AMP:

Usando `@font-face`

Como alternativa se puede utilizar @font-face dentro de una hoja de estilos AMP:

CSS

<style amp-custom>
  @font-face {
    font-family: 'Bitstream Vera Serif Bold';
    src: url('https://somedomain.org/VeraSeBd.ttf');
  }

  body {
    font-family: 'Bitstream Vera Serif Bold', serif;
  }
</style>

Nota

Las fuentes deben ser traídas a través de HTTP o HTTPS

Vinculación de páginas

En algunos casos, podrías tener una versión AMP y una versión no AMP de tu página, pero ¿cómo Google sabe que existe una versión no AMP?

Para resolver este problema, agregamos información sobre la página AMP a la página no AMP y viceversa.

Para la página no AMP:

<link rel='amphtml' href='https://www.ejemplo.com/url/al/documento/amp.html'>

Para la página AMP:

<link rel='canonical' href='https://www.ejemplo.com/url/al/documento/completo.html'>

Si solo tienes una sola página y es AMP solo basta con usar:

<link rel='canonical' href='https://www.ejemplo.com/url/al/documento/amp.html'>

Lanza tu sitio AMP

Finalmente, para poder ver tu sitio web en acción, puedes abrirlo como cualquier otro sitio HTML estático o usando un servidor.

Es muy importante verificar que tu página AMP sea válida; de lo contrario, no podrá detectarse o distribuirse mediante plataformas de terceros como la búsqueda en Google, Puedes verificarla usando #development=1 en la URL, por ejemplo, http://localhost:8000/prueba.amp.html#development=1 y usar la consola para ver si hay errores de validación.

Otra forma de verificar tu sitio web es usando la extensión para Chrome u Opera.

Alimenta tu curiosidad

Todo esto solo es una parte de lo que podremos hacer con AMP, pues este cuenta con bastante contenido que podemos utilizar en nuestros sitios web, como tweets, post de Facebook, videos de youtube, etc. Te recomiendo ver la documentación de AMP si quieres saber más sobre este proyecto.

Se que AMP es muy estricto en cuanto a cómo usarlo o que podemos usar, pero todo esto se hace con el fin de tener sitios web bastante rápidos y óptimos para teléfonos móviles.

Te invito a que lo pruebes, veas su capacidad por ti mismo y que me des tu opinión.

Crea un sitio web usando AMP

¿Qué es AMP?

¿AMP afecta a nuestro SEO?

Antes de comenzar

Primeros pasos

Manejo de imágenes y gifs 🏞

Imágenes animadas (gifs)

Imágenes responsive

Atributo layout

Atributo srcset

Insertar un video

Insertar audio

Manejo de estilos

Estilos no permitidos:

Estilos restringidos:

Uso de media queries

Media queries en CSS

Elementos con media queries

Placeholders & fallbacks

Placeholder

Fallback

Fuentes personalizadas

Usando <link>

Usando @font-face

Vinculación de páginas

Lanza tu sitio AMP

Alimenta tu curiosidad

Atributo `layout`

Atributo `srcset`

Usando `<link>`

Usando `@font-face`