El siguiente código es un buen punto de partida o plantilla. Cópialo y guárdalo en un archivo con extensión .html.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>Welcome to the mobile web</h1>
  </body>
</html>

Hasta ahora, el contenido del cuerpo es bastante claro, pero en el encabezado de la página hay mucho código adicional que no resulta tan obvio. Vamos a desglosar el código necesario.

Código obligatorio

Los documentos de AMP HTML deben:

Regla Descripción
Empezar por el tipo de documento <!doctype html>. Estándar de HTML.
Incluir una etiqueta de nivel superior <html ⚡>
(<html amp> también se acepta).
Identifica la página como contenido de AMP.
Incluir etiquetas <head> y <body>. Opcional en HTML, pero no en AMP.
Incluir una etiqueta <meta charset="utf-8"> como la primera etiqueta secundaria de su etiqueta <head>. Identifica la codificación de la página.
Incluir una etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> como la segunda etiqueta secundaria de la etiqueta <head>. Incluye y carga la biblioteca JS de AMP.
Incluir una etiqueta <link rel="canonical" href="$SOME_URL"> dentro de <head>. Dirige a la versión HTML normal del documento AMP HTML o a sí misma si no existe dicha versión HTML. Consulta más información en el artículo sobre cómo hacer que una página sea visible.
Incluir una etiqueta <meta name="viewport" content="width=device-width,minimum-scale=1"> dentro de la etiqueta <head>. También se recomienda incluir initial-scale=1. Especifica un viewport adaptable. Consulta más información en el artículo sobre cómo crear páginas AMP adaptables.
Incluir el código de plantilla de AMP en la etiqueta <head>. La plantilla CSS para ocultar inicialmente el contenido hasta que se cargue AMP JS.

Metadatos opcionales

Además de los requisitos básicos, nuestra muestra también incluye una definición de Schema.org en el encabezado, la cual no es un requisito obligatorio para AMP, pero sí un requisito para que el contenido se distribuya en determinados lugares (por ejemplo, en el carrusel de noticias destacadas de la Búsqueda de Google).


¡Y ya está! Esto es todo lo que necesitamos para crear nuestra primera página AMP, aunque si solo incluimos esto, nos quedará una página sin mucho contenido, claro. En la siguiente sección explicaremos cómo añadir elementos básicos como imágenes, personalizar elementos AMP, editar páginas y crear un diseño adaptable.