AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Crear tu página AMP HTML

El siguiente código es un buen punto de partida o plantilla. Cópielo y guárdelo 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="https://amp.dev/es/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <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.

Cuando cree contenido y páginas AMP, valore de forma importante utilizar el protocolo HTTPS en lugar del HTTP. Si bien no es obligatorio tener HTTPS en el propio documento AMP ni en las imágenes o fuentes, hay muchas funciones de AMP que requieren HTTPS (por ejemplo, los videos, los iframes, etc). Por tanto, para asegurarte de que sus páginas AMP aprovechen al máximo todas las funciones de AMP, utilice el protocolo HTTPS. Puede consultar más información sobre HTTPS en el artículo Por qué HTTPS es importante.

Utilice el Generador de códigos repetitivos de AMP para comenzar rápidamente a crear nuevas páginas AMP.

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.
Contain a <meta name="viewport" content="width=device-width"> It's also recommended to include initial-scale=1. Especifique una ventana de visualización adaptable. Consulte 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 Google Search).

Visite estos recursos para obtener más información:

¡Buenas noticias! Eso es todo lo que necesitamos para crear nuestra primera página AMP, pero por supuesto, todavía no hay mucho que hacer en el cuerpo. En la siguiente sección, veremos cómo agregar elementos básicos como imágenes, elementos personalizados de AMP, como dar estilo su página y como crear un diseño que responda a las necesidades de los usuarios.

Capítulo anterior Siguiente capítulo