Etiquetado AMP básico y obligatorio de una página para ser válida

Sencillo post para ver el etiquetado AMP básico y obligatorio que tiene que tener una página para ser validada.

Para los que no sepáis nada de AMP os recomiendo leer estas entradas:

Etiquetado AMP básico

En este ejemplo AMP vamos a ver el etiquetado HTML que tiene que tener obligatoriamente una página AMP según su web oficial:

<!doctype html>
<html amp lang="es">
 <head>
 <meta charset="utf-8">
 <link rel="canonical" href="url-equivalente-no-amp.html" />
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <script async src="https://cdn.ampproject.org/v0.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>
 
 </head>
 <body>
  <h1>Mi primera página AMP</h1>
  <p>Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo. Texto de párrafo.</p>
 </body>
</html>

Repasamos del código superior las etiquetas obligatorias:

Definimos el doctype y en el tag <html> debemos añadir amp –> <html amp lang=»es»>
Dentro del <head> definimos la codificación de caracteres en meta charset.
Dentro del <head> definimos el viewport, con dejarlo así vale.
Dentro del <head> definimos la URL canonical de la versión no AMP de la página.
Dentro del <head> incluimos la llamada a la librería JS de AMP project.
Por último dentro del <head> incluimos los estilos CSS obligatorios <style amp-boilerplate> y <noscript>. Estos estilos deben existir y no ser alterados, si necesitáis incluir CSS adicional hay que usar el tag <style amp-custom>.
Despúes dentro del <body> tenemos los tag <h1> y <p> para mostrar un título y párrafo de texto. Estos tags son opcionales e incluiremos los tags que estimemos oportunos según el contenido que queramos mostrar.