Diseño web

Cómo crear páginas AMP

Seguimos hablando de las Accelerated Mobile Pages. Si anteriormente vimos qué eran, esta vez nos centraremos en cómo crear AMP para nuestro sitio web. Vamos con un contenido un poco más técnico.

Introducción

Vale, ¿Nos animamos a realizar nuestro sitio web en este formato? Debes tener en cuenta unas consideraciones previas. Por un lado ten en cuenta que vas a tener dos versiones de una misma página: Su versión normal y su versión AMP. Para organizar mejor estas duplicidades tendrás que echar mano de la etiqueta canónica y marcar la principal.

<link rel="canonical" href="https://carontestudio.com/blog/" />

Por otro lado, en la principal, podremos poner una etiqueta indicando la ruta de la versión AMP. Lo haremos a través de rel=»amphtml»:

<link rel="amphtml" href="https://carontestudio.com/blog/amp/" />

IMAGEN DE RELACIONES DE ETIQUETAS

Los archivos y URL de la página acelerada serán propios, tenlo en cuenta, también, cuando mires las estadísticas de Analytics o quieras hacer modificaciones.

A la hora de crearlas, básicamente, vamos a tener dos opciones:

AMP HTML

La primera opción, claro, es hacer nuestro código a mano, igual que si hiciéramos una página en HTML5. Es una opción lenta y costosa, pero tendremos todo el control sobre el producto final. Te dejo aquí un enlace a la documentación AMP que te podrá servir de ayuda en este caso.

Te recordamos que:

Tiene etiquetas específicas que sustituyen a las de HTML5
No se puede añadir JS
Algunos elementos no son compatibles con estas páginas
Todo el CSS debe ser en línea

Todas estas restricciones hacen que, más que hacer tu sitio compatible con AMP, sea más conveniente crear un duplicado de tus páginas con este formato.

Si te aventuras a ello, te dejamos aquí un enlace a algunas plantillas AMP que pueden servirte de punto de partida. Necesitarás, no obstante, conocer todos los elementos que pueden componer estas Accelerated Mobile Pages.

Etiquetas

Ya hemos dicho que es un lenguaje semejante a HTML, pero con sus peculiaridades y diferencias. Algunas de ellas:

En vez de <html> nos encontraremos la especificación <html amp> o <html⚡>.
<img> es sustituida por <amp-img>(ojo, esta sí se cierra), donde es obligatorio indicar anchura y altura de la imagen. Además, el atributo srcset nos permitirá escoger diferentes tamaños según el tamaño del dispositivo.

<amp-img alt="Caronte" src="https://www.carontestudio.com/image.jpg" srcset="/img2.jpg 576w,/img3.jpg 350w" height="100" width="150"></amp-img>

<video> se sustituye con <amp-video>.
Se soportan los iframes, pero bajo la etiqueta <amp-iframe>.

CSS

No se admiten archivos externos, todo el código debe ir en la propia página, bien declarándose dentro de una etiqueta <style>, bien declarándolo en línea. La excepción a esta regla son las fuentes personalizadas, que sí se permiten.

JavaScript

Para añadir JavaScript a nuestra página AMP deberemos incluir los scripts por medio de <amp-script>. AMP tiene una restricción que limita a 150 kB el JS personalizado, lo que incluye el contenido de estas etiquetas. Esta y otras restricciones hacen que su uso deba reducirse al máximo.

AMP en WordPress

Sí, tenemos una buena noticia. Si tu sitio web está funcionando bajo WordPress tienes una solución rápida y sencilla para crear las versiones AMP de tus páginas webs. Para ello podrás encontrar varios módulos gratuitos que, no solo harán esta labor por ti, si no que, además, te darán toda una serie de facilidades de maquetación, funcionalidad, etc.

Estos son algunos de los que pueden convertir tu WordPress en un sitio compatible con esta tecnología:

Esperamos que, tras estas breves indicaciones, te animes a crear una página AMP y nos cuentes tu experiencia ¿Crees que siguen siendo necesarias hoy en día? ¿Lo encuentras más complicado de programar que el HYML? Déjanos tus comentarios y no te pierdas el próximo artículo en que veremos cómo realizar una validación del código de las páginas AMP.

Páginas AMP: Qué son | Cómo crearlas

Alberto Bravo

Hola, soy Alberto Bravo, licenciado en BB.AA. en la Universidad del País Vasco. Me especialicé en diseño gráfico e ilustración. Tras varios años trabajando de ello (etapa de autónomo incluida), decidí digitalizarme y pasar al diseño web. Allí descubrí el SEO y la programación. Actualmente, soy el responsable del departamento SEO de Caronte Studio y ya no tengo tiempo para ilustrar. En mis artículos te hablaré, principalmente, de SEO y tiendas online, pero seguro que también podrás encontrar algún que otro artículo sobre diseño gráfico. WEB | LINKEDIN | ARTSTATION