Nozioni di base su Accelerated Mobile Pages

1. Panoramica

In questo codelab imparerai a creare pagine AMP (Accelerated Mobile Pages). Per raggiungere questo obiettivo, implementerai una semplice pagina web di articoli di notizie conforme alle specifiche AMP e che incorpora diverse funzionalità web tipiche comunemente utilizzate sui siti di notizie mobile.

Obiettivi didattici

• In che modo le pagine AMP migliorano l'esperienza utente del web mobile.
• Gli elementi di base di un sito AMP.
• Limitazioni di AMP.
• In che modo i componenti web di AMP risolvono i problemi comuni dei siti di notizie.
• Come convalidare AMP.
• Come preparare le pagine AMP per la Ricerca Google.

Che cosa ti serve

• Il codice campione
• Python (preferibilmente 2.7) o l'estensione del server web Chrome 200 OK
• Chrome (o un browser equivalente in grado di ispezionare la console JavaScript)
• Editor di codice (ad esempio Atom, Sublime, Notepad++)

2. recupera il codice campione

Puoi scaricare tutto il codice di esempio sul computer:

Scarica zip

… o clona il repository GitHub dalla riga di comando:

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

Verrà scaricato un file ZIP contenente diversi file di risorse di esempio e la pagina iniziale article.html.

Decomprimi la cartella e vai alla directory tramite la riga di comando sul computer.

3. Esegui la pagina di esempio

Per testare la nostra pagina di esempio, dobbiamo accedere ai file da un web server. Esistono diversi modi per creare un server web locale temporaneo a scopo di test. Per questo lab di codici forniremo istruzioni per tre opzioni disponibili:

• L'app Google Chrome "Web Server for Chrome": questo è l'approccio consigliato perché è la soluzione più semplice e multipiattaforma disponibile. Nota: questo approccio richiede l'installazione di Google Chrome.
• Firebase Hosting: un'opzione alternativa se ti interessa anche esplorare la nostra nuova piattaforma di hosting di asset statici "Firebase Hosting". SSL abilitato per impostazione predefinita.
• Un server HTTP Python locale: richiede l'accesso alla riga di comando.

Nota: consigliamo vivamente di utilizzare HTTPS negli ambienti di produzione. L'HTTPS offre diversi vantaggi oltre alla sicurezza, tra cui la SEO. Puoi scoprire di più su questo argomento qui.

Opzione 1: Web Server for Chrome

Puoi trovare l'app "Web Server for Chrome" a questo link sul Chrome Web Store.

Dopo aver installato l'app Chrome, devi indirizzarla a una cartella specifica tramite il pulsante "Scegli cartella". Per questo codelab, devi selezionare la cartella in cui hai decompresso i file di esempio del codelab.

Inoltre, devi selezionare l'opzione "Mostra automaticamente index.html" e impostare la porta su "8000". Per applicare queste modifiche, dovrai riavviare il server web.

Accedi a questo URL tramite:

http://localhost:8000/article.html

Se l'URL precedente viene caricato correttamente, puoi continuare con il passaggio successivo.

Opzione 2: Firebase Hosting

Se ti interessa esplorare il nostro nuovo hosting web statico di Firebase, puoi seguire le istruzioni disponibili qui per eseguire il deployment del tuo sito AMP in un URL di hosting Firebase.

Firebase Hosting è un provider di hosting statico che puoi utilizzare per eseguire rapidamente il deployment e l'hosting di un sito web statico e dei relativi asset, inclusi file HTML, CSS e JavaScript. Gli utenti beneficiano di una latenza ridotta perché i contenuti statici vengono memorizzati nella cache in una rete CDN (Content Delivery Network) con punti di presenza (PoP) situati in tutto il mondo.

Infine, Firebase Hosting viene sempre pubblicato tramite SSL, quindi è ideale per AMP e per il web in generale. Se ti interessa concentrarti esclusivamente su AMP, ignora questa opzione.

Opzione 3: server Python HTTP

Se non utilizzi Chrome o hai difficoltà a installare l'estensione Chrome, puoi anche utilizzare Python dalla riga di comando per avviare un server web locale.

Per eseguire il server HTTP integrato di Python dalla riga di comando, esegui questo comando:

python -m SimpleHTTPServer

e accedi a questo URL:

http://localhost:8000/article.html

4. Creare una normale pagina HTML

Nel file ZIP scaricato, troverai un file denominato article.html. Questo è l'articolo per cui stiamo creando una pagina AMP equivalente.

Copia il codice dall'esempio article.html e incollalo in un nuovo file. Salva questo file come article.amp.html.

Nota: non devi denominare i file AMP come .amp.html. Infatti, i file AMP possono avere qualsiasi estensione. È comune che i publisher distinguano le pagine AMP dalle loro versioni canoniche utilizzando i parametri nell'URL. Ad es.: http://publisher.com/article.html?amp

Il file article.amp.html ora dovrebbe avere il seguente aspetto:

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

Si tratta di una pagina intenzionalmente semplice con elementi comuni di articoli di notizie statici: CSS, JavaScript e un tag immagine.

Al momento, la nostra versione AMP dell'articolo è solo una copia dell'articolo originale. Convertiamolo in un AMP. Per iniziare, aggiungeremo il file della libreria JavaScript AMP e vedremo quali errori vengono visualizzati quando il validatore AMP è attivo.

Per includere la libreria AMP, aggiungi questa riga in fondo al tag <head>:

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

Ora carichiamo la nuova pagina article.amp.html nel browser tramite il seguente link e apriamo la console per sviluppatori in Chrome tramite Menu > More Tools > Developer Tools:

Ora esamina l'output JavaScript nella console per gli sviluppatori. Assicurati di aver selezionato la scheda Console:

Dovresti visualizzare questo log:

Powered by AMP ⚡ HTML

Ora, per attivare lo strumento di convalida AMP, aggiungi questo identificatore di frammento all'URL:

#development=1

Ad esempio:

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

Potresti dover aggiornare manualmente la pagina nel browser. Puoi aggiornare manualmente una pagina nel browser premendo questo pulsante:

Dovresti ricevere diversi errori di convalida:

Anche se AMP sta per Accelerated Mobile Pages, può essere utilizzato per creare pagine adattabili che vengono visualizzate correttamente su tutte le dimensioni dello schermo. Per saperne di più, consulta la sezione Responsive Web Design del sito web Google Developers.

Per simulare l'esperienza dei dispositivi mobili negli Strumenti per sviluppatori di Chrome. Fai clic sull'icona del dispositivo di telefonia mobile qui:

Ora seleziona un dispositivo mobile (ad esempio "Pixel 2") da questo menu:

Nel browser dovresti visualizzare una risoluzione simulata per il mobile, ad esempio questa:

Ora siamo pronti per iniziare. Esaminiamo gli errori di convalida uno per uno e vediamo in che modo sono correlati ad AMP.

5. Risolvere gli errori di convalida

Set di caratteri obbligatorio

Inizieremo correggendo il seguente errore:

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

Per la corretta visualizzazione del testo, AMP richiede l'impostazione del set di caratteri per la pagina. Inoltre, deve essere il primo elemento secondario del tag head. Il motivo è evitare di reinterpretare i contenuti aggiunti prima del tag meta charset.

Aggiungi il seguente codice come prima riga del tag head:

<meta charset="utf-8" />  

Salva il file, ricarica la pagina e verifica che l'errore non venga più visualizzato.

I file AMP devono avere un tag <link rel=canonical>.​​​

Ogni documento AMP deve avere un link che fa riferimento alla pagina canonica. Aggiungiamo quindi il link al nostro articolo originale.

Aggiungi il seguente codice sotto il tag <meta charset="utf-8" />:

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

Importante: è possibile creare una pagina AMP autonoma, ovvero una pagina che non ha una pagina canonica. In questo scenario, il link canonico è ancora necessario, ma deve puntare all'articolo AMP stesso:

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

Ora, riavvia il web server, se necessario, e ricarica la pagina. Sebbene ci siano ancora molti errori da correggere, l'errore "I file AMP devono avere un tag <link rel=canonical>" non è più presente.

Attributo AMP obbligatorio

AMP richiede un attributo nell'elemento HTML principale di una pagina per dichiarare la pagina come documento 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.

Questo problema si risolve semplicemente aggiungendo l'attributo ⚡ al tag <html> nel seguente modo:

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

Ora ricarica la pagina e verifica che entrambi gli errori non siano più presenti.

Nota: anche se ⚡ è l'approccio consigliato, è anche possibile utilizzare l'attributo amp al posto dell'attributo ⚡. Pertanto, il markup diventa:

<!doctype html>

<html amp lang="en">

<head>

...

Area visibile obbligatoria

Ora affrontiamo il seguente errore:

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

AMP richiede la definizione di width e minimum-scale per la finestra. Questi valori devono essere definiti rispettivamente come device-width e 1. Il viewport è un tag comune incluso nella sezione <head> di una pagina HTML.

Il problema si risolve al meglio aggiungendo il seguente snippet HTML al tag <head>. Aggiungi il seguente tag 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">

...

Questi sono gli unici valori validi per width e minimum-scale in AMP. La definizione di initial-scale non è obbligatoria, ma è un'inclusione comune nello sviluppo web mobile ed è consigliata. Puoi scoprire di più sul viewport e sul design responsivo qui.

Come prima, ricarica la pagina e verifica se l'errore è scomparso.

Fogli di stile esterni

Il seguente errore è correlato al nostro utilizzo dei fogli di stile:

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

Nello specifico, si tratta del seguente tag di collegamento al foglio di stile nel nostro tag <head>:

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

Il problema è che questo è un riferimento a un foglio di stile esterno. In AMP, per mantenere i tempi di caricamento dei documenti il più rapidi possibile, gli sviluppatori non possono includere fogli di stile esterni. Tutte le regole del foglio di stile devono invece essere incluse in linea nel documento AMP.

Pertanto, rimuovi il tag link in <head> e sostituiscilo con un tag in linea come il seguente:

<style amp-custom>

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

...

</style>

I contenuti del tag di stile devono essere copiati direttamente dal file base.css nella directory del progetto. L'attributo amp-custom nel tag style è obbligatorio.

Ricarica la pagina e verifica se l'errore relativo ai fogli di stile è scomparso.

Nota: non solo è necessario lo stile in linea, ma esiste un limite di dimensione del file di 50 kilobyte per tutte le informazioni di stile. Ti consigliamo di utilizzare pre-processori CSS come SASS e di minimizzare i CSS prima di inserirli nelle pagine.

Importante: puoi avere solo un tag di stile nell'intero documento AMP. Se i tuoi articoli fanno riferimento a diversi fogli di stile esterni, dovrai raccoglierli in un unico insieme di regole. Leggi questa pagina della documentazione per saperne di più sulle regole CSS valide nei documenti AMP.

JavaScript di terze parti

Mentre i fogli di stile possono essere rielaborati in modo relativamente semplice con AMP tramite l'incorporamento, lo stesso non vale per JavaScript.

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

In AMP, gli script generati dagli utenti non sono consentiti. Gli script in AMP sono consentiti solo se rispettano due requisiti principali:

• Tutto il codice JavaScript deve essere asincrono, ovvero deve includere l'attributo async nel tag script.
• Possono essere inclusi solo la libreria AMP e i componenti AMP.

In questo modo si esclude l'utilizzo di tutto il JavaScript di terze parti. Esiste un'eccezione: JavaScript di terze parti può essere utilizzato negli iframe.

Prova ad aprire il file esterno base.js. Cosa vedi? Il file deve essere privo di codice JavaScript e includere solo un commento di informazioni come questo:

/*

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.

*/

Considerando che questo file JavaScript esterno non è un componente funzionale del nostro sito web, possiamo rimuovere in sicurezza il riferimento.

Rimuovi il seguente riferimento JavaScript esterno dal documento:

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

Ora ricarica la pagina e verifica che l'errore di script non sia più presente.

Importante: l'inclusione di JavaScript tramite un iframe deve essere considerata una misura di ultima istanza. Ove possibile, la funzionalità JavaScript deve essere sostituita tramite l'utilizzo dei componenti AMP integrati. Esploreremo il nostro primo componente AMP nella sezione successiva.

Nota: le uniche eccezioni per gli script generati dagli utenti si verificano quando l'attributo type è application/ld+json o application/json, che vengono utilizzati per aggiungere metadati alla pagina e configurare i componenti AMP. In futuro potrebbero essere aggiunti altri script non eseguibili.

Il codice boilerplate CSS di 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.

Gli errori successivi si riferiscono a due tag mancanti nel tag <head>. Ogni documento AMP richiede l'inclusione di questi tag:

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

Aggiungi lo snippet di codice riportato sopra in fondo al tag <head> del documento.

Il primo tag rende invisibili i contenuti della pagina finché la libreria JavaScript AMP non aggiorna il tag body in modo che tornino visibili una volta che i contenuti della pagina sono pronti per il rendering. AMP esegue questa operazione per impedire la visualizzazione di contenuti della pagina a cui non è ancora stato applicato uno stile. In questo modo, l'esperienza utente è davvero immediata, poiché i contenuti della pagina vengono visualizzati tutti insieme e tutto ciò che si trova sopra la piega viene visualizzato contemporaneamente. Il secondo tag ripristina questa logica se JavaScript è disattivato nel browser.

Il tag amp-img

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

AMP ha un componente web progettato appositamente per sostituire il tag immagine, chiamato amp-img:

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

Prova a includere il tag amp-img riportato sopra ed esegui di nuovo il validatore. Dovresti ricevere diversi nuovi errori:

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

Perché amp-img ha generato un altro errore? Perché amp-img non è un sostituto diretto del tag HTML img tradizionale. Esistono requisiti aggiuntivi per l'utilizzo di amp-img.

Sistema di layout

Questo errore indica che amp-img non supporta il tipo di layout "container". Uno dei concetti più importanti nella progettazione di AMP è la sua attenzione alla riduzione della quantità di reflow DOM necessaria per il rendering delle pagine web.

Per ridurre il reflow del DOM, AMP include un sistema di layout per garantire che il layout della pagina sia il più rigido possibile il prima possibile nel ciclo di vita del download e del rendering della pagina.

Il sistema di layout consente di posizionare e scalare gli elementi di una pagina in vari modi: dimensioni fisse, design adattabile, altezza fissa e altro ancora.

Nel nostro caso, il sistema di layout ha dedotto che il tipo di layout per amp-img è container. Tuttavia, il tipo di contenitore è per gli elementi che contengono elementi secondari ed è incompatibile con il tag amp-img, motivo di questo errore.

Perché è stato dedotto il tipo di contenitore? Perché non abbiamo specificato un attributo altezza per il tag amp-img. In HTML, il reflow può essere ridotto specificando sempre una larghezza e un'altezza fisse per gli elementi di una pagina. In AMP, è consigliabile definire la larghezza e l'altezza degli elementi amp-img, in quanto ciò consente ad AMP di comprendere le proporzioni dell'elemento.

Imposta la larghezza e l'altezza nel seguente modo:

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

Aggiorna la pagina e controlla lo strumento di convalida: non dovresti più visualizzare errori. Tuttavia, l'immagine non ha un bell'aspetto perché è posizionata in modo strano sulla pagina. Sarebbe fantastico se potessimo scalare l'immagine in modo reattivo per adattarla alla pagina indipendentemente dalle dimensioni dello schermo.

Sorprendentemente, la definizione di larghezza e altezza non limita l'elemento a una dimensione completamente fissa. Il sistema di layout AMP può posizionare e scalare l'elemento in vari modi conoscendo le sue proporzioni. L'attributo di layout indica ad AMP come vuoi che l'elemento venga posizionato e scalato.

Impostando l'attributo layout su responsive possiamo ottenere questo risultato:

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

Voilà! La nostra immagine ha le proporzioni corrette e riempie in modo reattivo la larghezza dello schermo.

Operazione riuscita.

Ora il documento AMP dovrebbe avere un aspetto simile a questo:

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

Aggiorna la pagina e guarda l'output della console. Dovresti visualizzare il seguente messaggio:

AMP validation successful.

Domande frequenti

• Che cos'è l'adattamento dinamico del DOM?
• Cosa succede se l'attributo layout non è definito?
• Cosa succede se la larghezza e l'altezza non sono definite?

6. URL canonici, metadati e ricerca

Una parte della nuova iniziativa AMP è l'evidenziazione dei documenti AMP validi nell'interfaccia dei risultati di ricerca di Google nell'ambito di una nuova interfaccia a carosello. Questa interfaccia offre una migliore esperienza utente alle persone che cercano articoli sul web. Affinché questa esperienza sia la migliore possibile, le pagine incluse devono soddisfare determinati criteri oltre a superare il validatore AMP.

Questo passaggio fornisce una panoramica dei requisiti completi.

Collegamento di pagine canoniche e documenti AMP

AMP mira a rendere il web più veloce e, anche se il progetto era più incentrato sui contenuti statici nei suoi primi giorni, l'aggiunta di componenti come amp-bind lo rende adatto a un'ampia varietà di siti, come editori di notizie, e-commerce, siti web di viaggi, blog e altri.

Tuttavia, è importante comprendere l'ambito completo di come AMP dovrebbe inserirsi nella struttura di un sito web. Anche se AMP può essere utilizzato per creare interi siti web, molti editori preferiscono utilizzarlo con l'approccio accoppiato, in cui i documenti AMP vengono generati come accompagnamento agli articoli HTML regolari che un editore ospiterebbe sul proprio sito web.

Nota:per ulteriori informazioni sull'utilizzo di AMP per creare un intero sito web, chiamati anche siti AMP canonici, consulta anche il codelab "Pagine AMP accattivanti, interattive e canoniche".

Il collegamento canonico nelle normali pagine HTML è una tecnica comune per dichiarare quale pagina deve essere considerata la pagina preferita quando più pagine includono gli stessi contenuti. Poiché i documenti AMP possono essere generati per essere disponibili insieme alle pagine degli articoli tradizionali di un sito web, dobbiamo trattare le pagine HTML tradizionali come pagine "canoniche".

Abbiamo già fatto il primo passo per raggiungere questo obiettivo nel nostro documento AMP includendo un tag link nella sezione <head> che rimanda alla pagina canonica:

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

Il passaggio successivo consiste nel collegare l'articolo canonico alla pagina AMP. Ciò si ottiene includendo un tag <link rel="amphtml"> nella sezione <head> dell'articolo canonico.

Aggiungi il seguente codice alla sezione <head> del file article.html:

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

Il seguente diagramma illustra le direzioni dei tag di collegamento:

È necessario configurare questo collegamento bidirezionale affinché il crawler della Ricerca Google comprenda la relazione tra il nostro documento canonico HTML normale e il nostro documento AMP. Se non sono stati forniti link, non è necessariamente chiaro al crawler quali articoli sono le "versioni AMP" dei normali documenti HTML. Fornendo esplicitamente questi link, ci assicuriamo che non ci siano ambiguità.

Metadati dei motori di ricerca Schema.org

Un altro requisito per la visualizzazione dei documenti AMP nella nuova interfaccia del carosello è il rispetto della specifica dei metadati dei motori di ricerca di Schema.org. Questi metadati sono inclusi nel tag <head> dei tuoi documenti tramite un tag script di tipo application/ld+json.

Aggiungi il seguente codice in fondo alla sezione <head> del 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>

Ricarica la pagina nel browser e verifica che non siano stati introdotti errori di convalida AMP.

Ora, apri lo Strumento di convalida dei dati strutturati in una nuova finestra del browser e fai clic su "Testa il mio markup". Poi seleziona la scheda "Snippet di codice", copia l'intero codice sorgente dalla tua pagina AMP e incollalo nel riquadro dell'editor di testo dello strumento di convalida, quindi fai clic su "Esegui test":

Dovresti visualizzare qualcosa di simile a questo nella pagina:

Importante:assicurati che venga visualizzato il testo verde "Tutto a posto". Solo le pagine AMP che superano questa convalida vengono visualizzate nel carosello AMP.

Nota: i contenuti devono essere sempre gli stessi. Per gli articoli di notizie, utilizza il tipo "NewsArticle". Il titolo deve corrispondere a quello dell'articolo. L'immagine si riferisce all'immagine hero dell'articolo.

I requisiti chiave per essere visualizzati nel nuovo carosello della Ricerca Google per gli articoli di notizie basati su AMP sono i seguenti:

1. Assicurati che il documento AMP venga convalidato.
2. Fai riferimento al documento AMP dalla pagina HTML tradizionale tramite il tag <link> e viceversa.
3. Includi il tag Metadati del motore di ricerca riportato sopra.

Scopri di più sul rilevamento delle pagine.

7. Complimenti!

Hai completato il codelab ed esplorato molti dei concetti fondamentali dei documenti AMP.

Spero che tu abbia capito non solo come implementare questi concetti e queste funzionalità in un documento AMP, ma anche perché AMP è stato progettato in questo modo.

Di seguito sono riportati alcuni argomenti e link aggiuntivi che potresti voler esplorare per migliorare ulteriormente le tue competenze.

• Tutto sulla visibilità della pagina
• Tag HTML non consentiti
• Regole CSS e animazioni con limitazioni
• Scopri di più sugli iframe
• La CDN AMP
• Elenco dei componenti AMP disponibili