Fundamentos de Accelerated Mobile Pages

1. Descripción general

En este codelab, aprenderás a compilar páginas móviles aceleradas, o AMP para abreviar. Para lograrlo, implementarás una página web de un artículo de noticias simple que cumpla con las especificaciones de AMP y, al mismo tiempo, incorpore varias funciones web típicas que se usan comúnmente en los sitios de noticias para dispositivos móviles.

Qué aprenderás

• Cómo AMP mejora la experiencia del usuario de la Web móvil
• Los aspectos básicos de un sitio de AMP
• Limitaciones de AMP
• Cómo los componentes web de AMP resuelven problemas comunes de los sitios de noticias
• Cómo validar tu AMP
• Cómo preparar tus páginas de AMP para la Búsqueda de Google

Requisitos

• El código de muestra
• Python (preferentemente 2.7) o la extensión Chrome 200 OK Web Server
• Chrome (o un navegador equivalente que pueda inspeccionar la Consola de JavaScript)
• Editor de código (por ejemplo, Atom, Sublime, Notepad++)

2. Obtén el código de muestra

Presiona el siguiente botón para descargar el código de muestra completo en tu computadora:

Descargar ZIP

… o clona el repositorio de GitHub desde la línea de comandos:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Descargarás un archivo ZIP que contiene varios archivos de recursos de ejemplo y la página article.html inicial.

Descomprime la carpeta y navega al directorio a través de la línea de comandos en tu computadora.

3. Ejecuta la página de ejemplo

Para probar nuestra página de ejemplo, debemos acceder a los archivos desde un servidor web. Existen varias formas de crear un servidor web local temporal para realizar pruebas. En este codelab, proporcionaremos instrucciones para las 3 opciones disponibles:

• La app de Google Chrome "Web Server for Chrome": Este es el enfoque recomendado, ya que es la solución más sencilla y multiplataforma disponible. Nota: Este enfoque requiere que se instale Google Chrome.
• Firebase Hosting: Es una opción alternativa si también te interesa explorar nuestra nueva plataforma de alojamiento de recursos estáticos "Firebase Hosting". SSL habilitado de forma predeterminada.
• Un servidor HTTP local de Python: Requiere acceso a la línea de comandos.

Nota: Se recomienda usar HTTPS en entornos de producción. El protocolo HTTPS ofrece varios beneficios más allá de la seguridad, incluido el SEO. Puedes leer más sobre este tema aquí.

Opción 1: Web Server for Chrome

Puedes encontrar la app "Web Server for Chrome" en este vínculo de Chrome Web Store.

Después de instalar la app de Chrome, debes dirigirla a una carpeta específica con el botón "Elegir carpeta". Para este codelab, debes seleccionar la carpeta en la que descomprimiste los archivos de ejemplo del codelab.

Además, debes marcar la opción "Mostrar automáticamente index.html" y configurar el puerto en "8000". Deberás reiniciar el servidor web para que se apliquen estos cambios.

Accede a esta URL de las siguientes maneras:

http://localhost:8000/article.html

Si la URL anterior se carga correctamente, puedes continuar con el siguiente paso.

Opción 2: Firebase Hosting

Si te interesa explorar nuestro nuevo alojamiento web estático de Firebase, puedes seguir las instrucciones disponibles aquí para implementar tu sitio de AMP en una URL de Firebase Hosting.

Firebase Hosting es un proveedor de hosting estático que puedes usar para implementar y alojar rápidamente un sitio web estático y sus recursos, incluidos los archivos HTML, CSS y JavaScript. Los usuarios se benefician de una latencia reducida porque el contenido estático se almacena en caché en una red de distribución de contenidos (CDN) con puntos de presencia (PoP) ubicados en todo el mundo.

Por último, Firebase Hosting siempre se entrega a través de SSL, por lo que es ideal para AMP y la Web en general. Si te interesa enfocarte solo en AMP, simplemente ignora esta opción.

Opción 3: Servidor HTTP de Python

Si no usas Chrome o tienes problemas para instalar la extensión de Chrome, también puedes usar Python desde la línea de comandos para iniciar un servidor web local.

Para ejecutar el servidor HTTP integrado de Python desde la línea de comandos, simplemente ejecuta lo siguiente:

python -m SimpleHTTPServer

Y accede a esta URL:

http://localhost:8000/article.html

4. Crea una página HTML normal

En el archivo ZIP descargado, encontrarás un archivo llamado article.html. Este es el artículo para el que crearemos una página equivalente en AMP.

Copia el código del ejemplo de article.html y pégalo en un archivo nuevo. Guarda este archivo como article.amp.html..

Nota: No es necesario que nombres tus archivos AMP como .amp.html. De hecho, los archivos AMP pueden tener la extensión que desees. Es común que los publicadores diferencien las páginas de AMP de sus versiones canónicas usando parámetros en la URL. P. ej.: http://publisher.com/article.html?amp

Tu archivo article.amp.html ahora debería verse así:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Esta es una página intencionalmente simple con elementos comunes de artículos de noticias estáticos: CSS, JavaScript y una etiqueta de imagen.

Por el momento, nuestra versión de AMP del artículo es solo una copia del artículo original. Convirtámosla en una página AMP. Para comenzar, agregaremos el archivo de la biblioteca de JavaScript de AMP y veremos qué errores aparecen cuando se activa el validador de AMP.

Para incluir la biblioteca de AMP, agrega esta línea al final de la etiqueta <head>:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Ahora, carguemos la nueva página article.amp.html en nuestro navegador a través del siguiente vínculo y abramos la Consola para desarrolladores en Chrome a través de Menu > More Tools > Developer Tools:

Ahora, inspecciona el resultado de JavaScript en la consola para desarrolladores. Asegúrate de que esté seleccionada la pestaña Console:

Deberías ver aparecer este registro:

Powered by AMP ⚡ HTML

Ahora, para habilitar el validador de AMP, agrega este identificador de fragmento a tu URL:

#development=1

Por ejemplo:

http://localhost:8000/article.amp.html#development=1

Es posible que debas actualizar de forma manual la página en tu navegador. Puedes actualizar manualmente una página en tu navegador presionando este botón:

Deberías recibir varios errores de validación:

Si bien AMP significa Accelerated Mobile Pages, se puede usar para crear páginas adaptables que se rendericen bien en todos los tamaños de pantalla. Para obtener más información, consulta la sección Diseño web responsivo del sitio web de Google Developers.

Simular la experiencia de un dispositivo móvil en las Herramientas para desarrolladores de Chrome Haz clic en el ícono de dispositivo de teléfono celular aquí:

Ahora selecciona un dispositivo móvil (por ejemplo, un "Pixel 2") en este menú:

En tu navegador, deberías ver una resolución simulada para dispositivos móviles, como la siguiente:

Ahora sí, ¡manos a la obra! Analicemos los errores de validación uno por uno y veamos cómo se relacionan con AMP.

5. Cómo resolver errores de validación

Se requiere un conjunto de caracteres

Comenzaremos por corregir el siguiente error:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Para que el texto se muestre correctamente, AMP requiere que se establezca el conjunto de caracteres de la página. También debe ser el primer elemento secundario de la etiqueta head. El motivo es evitar la reinterpretación del contenido que se agregó antes de la etiqueta de metaconjunto de caracteres.

Agrega el siguiente código como la primera línea de la etiqueta head:

<meta charset="utf-8" />  

Guarda el archivo, vuelve a cargar la página y verifica que este error ya no aparezca.

Los archivos AMP deben tener una etiqueta <link rel=canonical>.​​​

Todos los documentos de AMP deben tener un vínculo que haga referencia a la página canónica. Entonces, agreguemos el vínculo a nuestro artículo original.

Agrega el siguiente código debajo de la etiqueta <meta charset="utf-8" />:

<link rel="canonical" href="/article.html">

Importante: Es posible crear una página de AMP independiente, es decir, una página que no tenga una canónica. En este caso, el vínculo canónico sigue siendo obligatorio, pero debe dirigir al artículo de AMP:

<link rel="canonical" href="/article.amp.html">

Ahora, reinicia el servidor web si es necesario y vuelve a cargar la página. Aunque aún hay muchos errores que corregir, el error "Los archivos de AMP deben tener una etiqueta <link rel=canonical>" ya no aparece.

Se requiere el atributo de AMP

AMP requiere un atributo en el elemento HTML raíz de una página para declarar la página como un documento de AMP:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Para resolver este problema, solo agrega el atributo ⚡ a la etiqueta <html> de la siguiente manera:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Ahora, vuelve a cargar la página y verifica que ambos errores hayan desaparecido.

Nota: Si bien ⚡ es el enfoque recomendado, también es posible usar el atributo amp en lugar del atributo ⚡. Por lo tanto, el lenguaje de marcado se convierte en lo siguiente:

<!doctype html>

<html amp lang="en">

<head>

...

Se requiere el viewport

A continuación, abordaremos el siguiente error:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP requiere la definición de un width y un minimum-scale para la ventana gráfica. Estos valores se deben definir como device-width y 1, respectivamente. La ventana gráfica es una etiqueta común que se incluye en el <head> de una página HTML.

La mejor manera de corregir esto es agregar el siguiente fragmento de código HTML a la etiqueta <head>. Agrega la siguiente etiqueta meta:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Estos son los únicos valores válidos para width y minimum-scale en AMP. Definir initial-scale no es obligatorio, pero se suele incluir en el desarrollo de la Web móvil y se recomienda hacerlo. Puedes obtener más información sobre la ventana gráfica y el diseño responsivo aquí.

Como antes, vuelve a cargar la página y verifica si desapareció el error.

Hojas de estilo externas

El siguiente error se relaciona con el uso de hojas de estilo:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

Específicamente, se queja de la siguiente etiqueta de vínculo de la hoja de diseño en nuestra etiqueta <head>:

<link href="base.css" rel="stylesheet" />

El problema es que se trata de una referencia a una hoja de diseño externa. En AMP, para mantener los tiempos de carga de los documentos lo más rápidos posible, los desarrolladores no pueden incluir hojas de estilo externas. En cambio, todas las reglas de la hoja de estilo deben incluirse intercaladas en el documento de AMP.

Por lo tanto, quita la etiqueta de vínculo en <head> y reemplázala por una etiqueta intercalada como la siguiente:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

El contenido de la etiqueta de estilo debe copiarse directamente del archivo base.css en el directorio de tu proyecto. El atributo amp-custom en la etiqueta de estilo es obligatorio.

Una vez más, vuelve a cargar la página y verifica si desapareció el error de las hojas de estilo.

Nota: No solo se requiere el diseño intercalado, sino que hay un límite de tamaño de archivo de 50 kilobytes para toda la información de diseño. Se recomienda usar preprocesadores de CSS, como SASS, y reducir el tamaño de tu CSS antes de insertarlo en tus páginas.

Importante: Solo puedes tener una etiqueta de estilo en todo el documento AMP. Si tus artículos hacen referencia a varias hojas de estilo externas, deberás recopilarlas en un solo conjunto de reglas. Consulta esta página de documentación para obtener más información sobre qué reglas de CSS son válidas en los documentos de AMP.

JavaScript de terceros

Si bien las hojas de estilo se pueden volver a trabajar con AMP de forma relativamente sencilla a través de la inserción directa, lo mismo no se aplica a JavaScript.

The tag 'script' is disallowed except in specific forms.

En AMP, no se permiten las secuencias de comandos generadas por el usuario. Los scripts en AMP solo se permiten si cumplen con dos requisitos principales:

• Todo el código JavaScript debe ser asíncrono, es decir, debe incluir el atributo async en la etiqueta de secuencia de comandos.
• Solo se pueden incluir la biblioteca y los componentes de AMP.

Esto descarta de manera efectiva el uso de todo el código JavaScript de terceros. Hay una excepción: se puede usar JavaScript de terceros en iframes.

Intenta abrir el archivo base.js externo. ¿Qué ves? El archivo no debe contener código JavaScript y solo debe incluir un comentario de información como el siguiente:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Dado que este archivo JavaScript externo no es un componente funcional de nuestro sitio web, podemos quitar la referencia por completo sin problemas.

Quita la siguiente referencia externa de JavaScript de tu documento:

<script type="text/javascript" src="base.js"></script>

Ahora, vuelve a cargar la página y verifica que el error de secuencia de comandos haya desaparecido.

Importante: Incluir JavaScript a través de un iframe debe considerarse una medida de último recurso. Siempre que sea posible, la funcionalidad de JavaScript debe reemplazarse con el uso de los componentes integrados de AMP. Exploraremos nuestro primer componente de AMP en la siguiente sección.

Nota: Las únicas excepciones para las secuencias de comandos generadas por el usuario son cuando el atributo de tipo es application/ld+json o application/json, que se usan para agregar metadatos a la página y configurar componentes de AMP. Es posible que se agreguen otros lenguajes de secuencias de comandos no ejecutables en el futuro.

El código estándar de CSS de AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Los siguientes errores hacen referencia a dos etiquetas faltantes en la etiqueta <head>. Todos los documentos de AMP requieren que se incluyan las siguientes etiquetas:

<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>

Agrega el fragmento de código anterior al final de la etiqueta <head> de tu documento.

La primera etiqueta hace que el contenido de la página sea invisible hasta que la biblioteca de JavaScript de AMP actualiza la etiqueta body para que vuelva a ser visible una vez que el contenido de la página esté listo para renderizarse. AMP hace esto para evitar que aparezca contenido de la página que aún no se haya diseñado. Esto garantiza que la experiencia del usuario se sienta verdaderamente instantánea, ya que el contenido de la página aparece todo a la vez y todo lo que se encuentra en la mitad superior de la página se renderiza en conjunto. La segunda etiqueta revierte esta lógica si JavaScript está inhabilitado en el navegador.

La etiqueta amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP tiene un componente web diseñado específicamente para reemplazar la etiqueta de imagen, llamado amp-img:

<amp-img src="mountains.jpg"></amp-img>

Intenta incluir la etiqueta amp-img anterior y vuelve a ejecutar el validador. Deberías recibir varios errores nuevos:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

¿Por qué amp-img activó otro error? Esto se debe a que amp-img no es un sustituto directo de la etiqueta img HTML tradicional. Existen requisitos adicionales cuando se usa amp-img.

Sistema de diseño

Este error nos indica que amp-img no admite el tipo de diseño "container". Uno de los conceptos más importantes en el diseño de AMP es su enfoque en reducir la cantidad de reflujos del DOM necesarios para renderizar sus páginas web.

Para reducir el reflujo del DOM, AMP incluye un sistema de diseño que garantiza que el diseño de la página sea lo más rígido posible lo antes posible en el ciclo de vida de descarga y procesamiento de la página.

El sistema de diseño permite que los elementos de una página se posicionen y se ajusten de diversas maneras: dimensiones fijas, diseño responsivo, altura fija y mucho más.

En nuestro caso, el sistema de diseño infirió que el tipo de diseño para amp-img es el tipo container. Sin embargo, el tipo de contenedor es para elementos que contienen elementos secundarios y es incompatible con la etiqueta amp-img, que es el motivo de este error.

¿Por qué se infirió el tipo de contenedor? Esto se debe a que no especificamos un atributo de altura para la etiqueta amp-img. En HTML, el reflujo se puede reducir especificando siempre un ancho y una altura fijos para los elementos de una página. En AMP, se recomienda definir el ancho y la altura de los elementos amp-img, ya que esto permite que AMP comprenda la relación de aspecto del elemento.

Establece el ancho y la altura de la siguiente manera:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Actualiza la página y revisa el validador. Ya no deberías ver ningún error. Sin embargo, la imagen no se ve tan bien, ya que está ubicada de forma incómoda en la página. Sería genial si pudiéramos ajustar la escala de la imagen para que se estire y se ajuste a la página de forma responsiva, sin importar el tamaño de la pantalla.

Sorprendentemente, definir el ancho y la altura no restringe el elemento a un tamaño completamente fijo. El sistema de diseño de AMP puede posicionar y escalar el elemento de varias maneras conociendo su relación de aspecto. El atributo de diseño le informa a AMP cómo quieres que se posicione y escale el elemento.

Si establecemos el atributo de diseño en responsive, podemos lograr lo siguiente:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

¡Listo! Nuestra imagen tiene la relación de aspecto correcta y llena de forma responsiva el ancho de la pantalla.

¡Listo!

Ahora, tu documento AMP debería verse de la siguiente manera:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Actualiza la página y observa la salida de la consola. Deberías ver el siguiente mensaje:

AMP validation successful.

Preguntas F****recuentes

• ¿Qué es el reprocesamiento del DOM?
• ¿Qué sucede si no se define el atributo de diseño?
• ¿Qué sucede si el ancho y la altura no están definidos?

6. URLs canónicas, metadatos y Búsqueda

Parte de la nueva iniciativa de AMP es destacar los documentos de AMP válidos en la interfaz de resultados de la Búsqueda de Google como parte de una nueva interfaz de carrusel. Esta interfaz proporciona una mejor experiencia del usuario a las personas que buscan artículos en la Web. Para que esta experiencia sea lo mejor posible, las páginas incluidas deben cumplir con ciertos criterios más allá de aprobar el validador de AMP.

En este paso, se proporciona una descripción general de todos los requisitos.

Vincula páginas canónicas y documentos de AMP

El objetivo de AMP es acelerar la Web y, si bien en sus inicios el proyecto se centró más en el contenido estático, la incorporación de componentes como amp-bind lo hace adecuado para una amplia variedad de sitios, como editores de noticias, comercios electrónicos, sitios web de viajes, blogs y otros.

Sin embargo, es importante comprender el alcance completo de cómo AMP debe ubicarse dentro de la estructura de un sitio web. Si bien AMP se puede usar para crear sitios web completos, muchos editores prefieren usarlo con el enfoque de sitios web vinculados, en el que los documentos de AMP se generan como complemento de los artículos HTML normales que un editor alojaría en su sitio web.

Nota: Para obtener más información sobre el uso de AMP para crear un sitio web completo, también llamado sitios canónicos de AMP, asegúrate de consultar el codelab"Páginas de AMP atractivas, interactivas y canónicas".

La vinculación canónica en páginas HTML normales es una técnica común para declarar qué página se debe considerar la preferida cuando varias páginas incluyen el mismo contenido. Dado que los documentos de AMP se pueden generar para que estén disponibles junto con las páginas de artículos tradicionales de un sitio web, debemos tratar las páginas HTML tradicionales como las páginas "canónicas".

Ya dimos el primer paso para lograrlo en nuestro documento de AMP, ya que incluimos una etiqueta de vínculo en el <head> que dirige a la página canónica:

<link rel="canonical" href="/article.html">

El siguiente paso es vincular el artículo canónico a la página de AMP. Para ello, se incluye una etiqueta <link rel="amphtml"> en la sección <head> del artículo canónico.

Agrega el siguiente código a la sección <head> del archivo article.html:

<link rel="amphtml" href="/article.amp.html">

En el siguiente diagrama, se ilustran las direcciones de las etiquetas de vínculo:

Es necesario configurar esta vinculación bidireccional para que el rastreador de la Búsqueda de Google comprenda la relación entre nuestro documento canónico HTML normal y nuestro documento de AMP. Si no se proporcionaron vínculos, el rastreador no tendría claro qué artículos son las "versiones AMP" de los documentos HTML normales. Al proporcionar estos vínculos de forma explícita, nos aseguramos de que no haya ambigüedades.

Metadatos de motores de búsqueda de Schema.org

Otro requisito para que los documentos de AMP aparezcan en la nueva interfaz del carrusel es el cumplimiento de la especificación de metadatos del motor de búsqueda de Schema.org. Estos metadatos se incluyen en la etiqueta <head> de tus documentos a través de una etiqueta de secuencia de comandos de tipo application/ld+json.

Agrega el siguiente código a la parte inferior de la sección <head> de tu documento AMP:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Vuelve a cargar la página en el navegador y verifica que no se hayan introducido errores de validación de AMP.

Ahora, abre la Herramienta de validación de datos estructurados en una nueva ventana del navegador y haz clic en "Probar mi lenguaje de marcado". Luego, selecciona la pestaña "Fragmento de código", copia el código fuente completo de tu página AMP y pégalo en el panel del editor de texto de la herramienta de validación. Por último, haz clic en "Ejecutar prueba":

Deberías ver algo como esto en la página:

Importante: Asegúrate de que se muestre el texto verde "Todo está bien". Solo las páginas de AMP que pasen esta validación se mostrarán en el carrusel de AMP.

Nota: El contenido siempre debe ser el mismo. Para los artículos de noticias, usa el tipo "NewsArticle". El título debe coincidir con el título del artículo. La imagen hace referencia a la imagen principal del artículo.

Estos son los requisitos clave para aparecer en el nuevo carrusel de la Búsqueda de Google para artículos de noticias potenciados por AMP:

1. Asegúrate de que se valide tu documento de AMP.
2. Haz referencia a tu documento de AMP desde tu página HTML tradicional a través de la etiqueta <link> y viceversa.
3. Incluye la etiqueta de metadatos del motor de búsqueda que se muestra arriba.

Obtén más información sobre el descubrimiento de páginas.

7. ¡Felicitaciones!

Terminaste el codelab y exploraste correctamente muchos de los conceptos fundamentales de los documentos AMP.

Esperamos que no solo hayas comprendido cómo se pueden implementar estos conceptos y funciones en un documento de AMP, sino también por qué AMP se diseñó de la manera en que lo hizo.

A continuación, se incluyen algunos temas y vínculos adicionales que puedes explorar para ampliar aún más tus habilidades.

• Todo sobre el Descubrimiento de páginas
• Etiquetas HTML no permitidas
• Reglas y animaciones de CSS restringidas
• Más información sobre los iframes
• La CDN de AMP
• Lista de componentes de AMP disponibles