In questo codelab, imparerai a creare brevi pagine AMP (Accelerated Mobile Pages). A questo scopo, occorre implementare una semplice pagina web dedicata alle notizie AMP che rispetti le specifiche AMP, incorporando al tempo stesso diverse funzioni web tipiche comunemente utilizzate nei siti di notizie per dispositivi mobili.
Obiettivi didattici
- In che modo AMP migliora l'esperienza utente del Web mobile.
- Le basi di un sito AMP.
- Limitazioni relative alle pagine AMP.
- In che modo i componenti web di AMP risolvono i problemi più comuni del sito di notizie.
- Come convalidare le pagine AMP.
- Come preparare il formato AMP per la Ricerca Google.
Che cosa ti serve
- Codice di esempio
- Python (preferibilmente 2.7) o l'estensione Chrome Web Server OK 200
- Chrome (o un browser equivalente in grado di esaminare la console JavaScript)
- Editor di codice (ad esempio, Atom, Sublime, Notepad++)
Puoi scaricare tutto il codice di esempio sul computer:
...o clona il repository GitHub dalla riga di comando:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitPuoi scaricare un file ZIP contenente diversi file di esempio di risorse e la pagina iniziale di article.html.
Decomprimi la cartella e vai alla directory dalla riga di comando sul tuo computer.
Per testare la nostra pagina di esempio, dobbiamo accedere ai file da un server web. Esistono diversi modi per creare un server web locale temporaneo ai fini dei test. Per questo lab, ti forniremo tre istruzioni disponibili:
- L'app Google Chrome "Web Server per Chrome": l'approccio consigliato in quanto è 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 statica di hosting degli asset "Firebase Hosting". SSL per impostazione predefinita.
- Un server Python HTTP locale: richiede l'accesso alla riga di comando.
Opzione 1: server web per Chrome
L'app "Web Server per Chrome" è disponibile su questo link nel Chrome Web Store.
Dopo aver installato l'app Chrome, devi puntarla 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, è necessario riavviare il server web.
Accedi a questo URL tramite:
http://localhost:8000/article.html
Se l'URL sopra indicato viene caricato correttamente, puoi andare al passaggio successivo.
Opzione 2: hosting di Firebase
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 di Firebase.
Firebase Hosting è un provider host statico che puoi utilizzare per eseguire il deployment e ospitare rapidamente un sito web statico e i relativi asset, inclusi i file HTML, CSS e JavaScript. Gli utenti traggono vantaggio da una latenza ridotta perché i contenuti statici vengono memorizzati nella cache in una rete CDN (Content Delivery Network) con punti di presenza (PoP) di tutto il mondo.
Infine, Firebase Hosting è sempre gestito tramite SSL, perciò è ideale per AMP e per il Web in generale. Se ti interessa soprattutto concentrarti sulle pagine AMP, puoi semplicemente ignorare questa opzione.
Opzione 3: server Python HTTP
Se non utilizzi Chrome o hai difficoltà a installare l'estensione di Chrome, puoi anche utilizzare Python dalla riga di comando per attivare un server web locale.
Per eseguire il server HTTP integrato da Python dalla riga di comando, esegui semplicemente quanto segue:
python -m SimpleHTTPServer
E accedi a questo URL:
http://localhost:8000/article.html
Nel file ZIP scaricato, troverai un file denominato article.html. Questo è l'articolo per il quale stiamo creando una pagina equivalente per AMP.
Copia il codice dall'esempio article.html e incollalo in un nuovo file. Salva questo file come article.amp.html.
Il tuo file article.amp.html 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 semplificata con comuni elementi di notizie statici: CSS, JavaScript e un tag immagine.
La nostra versione AMP dell'articolo è solo una copia dell'articolo originale in questo momento. Convertilo in formato AMP. Per iniziare, aggiungeremo il file della libreria JavaScript di AMP e mostreremo quali errori vengono visualizzati quando lo strumento di convalida AMP è attivo.
Per includere la libreria AMP, aggiungi questa riga alla fine del tag <head>:
<script async src="https://cdn.ampproject.org/v0.js"></script>Adesso caricheremo la nuova pagina article.amp.html nel nostro browser tramite il seguente link e apri la Console per gli sviluppatori in Chrome tramite Menu > More Tools > Developer Tools:
Ora controlla l'output JavaScript nella console per sviluppatori. Assicurati che la scheda Console sia selezionata:
Dovrebbe essere visualizzato 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:
Dovrebbero essere visualizzati diversi errori di convalida:
Anche se AMP è l'acronimo di Accelerated Mobile Pages, può essere utilizzato per creare pagine adattabili che vengono visualizzate correttamente su schermi di ogni dimensione. Per ulteriori informazioni, consulta la sezione Responsive web design del sito web Google Developers.
Per simulare l'esperienza sui dispositivi mobili negli Strumenti per sviluppatori di Chrome. Fai clic sull'icona del dispositivo mobile qui:
Ora seleziona un dispositivo mobile (ad esempio "Pixel 2") da questo menu:
Dovresti vedere una risoluzione simulata per dispositivi mobili nel browser, ad esempio:
Adesso siamo pronti per andare al lavoro! Analizziamo gli errori di convalida uno alla volta e affrontiamo il modo in cui sono correlati ad AMP.
Set di caratteri obbligatorio
Inizieremo correggendo il seguente errore:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Per una corretta visualizzazione del testo, AMP richiede l'impostazione del set di caratteri della pagina. Deve anche essere il primo elemento secondario del tag head. Il motivo è evitare di reinterpretare i contenuti aggiunti prima del meta tag charset.
Aggiungi il seguente codice come prima riga del tag head:
<meta charset="utf-8" /> Salva il file, ricarica la pagina e verifica che questo errore non venga più visualizzato.
I file AMP devono avere un tag <link rel=canonical>.
Ogni documento AMP deve avere un link che faccia riferimento alla pagina canonica. Ora aggiungiamo il link all'articolo originale.
Aggiungi il seguente codice sotto il tag <meta charset="utf-8" />:
<link rel="canonical" href="/article.html">
Ora, riavvia il server web, se necessario, e ricarica la pagina. Anche se ci sono ancora molti errori da correggere, i file "AMP" devono avere un tag <link rel=canonical>".
Attributo AMP obbligatorio
AMP richiede un attributo sull'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.
Per risolvere il problema, basta aggiungere l'attributo ⚡ al tag <html>, come segue:
<!doctype html>
<html ⚡ lang="en">
<head>
...Ora ricarica la pagina e verifica che entrambi gli errori siano stati eliminati.
Area visibile obbligatoria
Affronteremo il seguente errore:
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP richiede la definizione di width e minimum-scale per l'area visibile. Questi valori devono essere definiti rispettivamente come device-width e 1. L'area visibile è un tag comune incluso nell'elemento <head> di una pagina HTML.
Consigliamo di risolvere questo problema 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 di width e minimum-scale in AMP. La definizione di initial-scale non è obbligatoria, ma è un'inclusione comune nello sviluppo per il Web mobile e consigliata. Puoi trovare ulteriori informazioni sull'area visibile e sul responsive design qui.
Come in precedenza, ricarica la pagina e controlla se l'errore è scomparso.
Fogli di stile esterni
Il seguente errore è relativo 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, questo problema si riferisce al seguente tag link del foglio di stile nel nostro tag <head>:
<link href="base.css" rel="stylesheet" />Il problema è che si tratta di un riferimento di foglio di stile esterno. In AMP, per mantenere i tempi di caricamento dei documenti il più veloce possibile, agli sviluppatori non è consentito includere fogli di stile esterni. Tutte le regole del foglio di stile devono essere incluse in linea nel documento AMP.
Pertanto, rimuovi il tag link nel tag <head> e sostituiscilo con un tag incorporato come segue:
<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 del tag di stile è obbligatorio.
Ancora una volta, ricarica la pagina e verifica se l'errore dei fogli di stile è scomparso.
JavaScript di terze parti
I fogli di stile possono essere rielaborati in modo relativamente semplice con AMP tramite l'incorporamento, ma non è lo stesso per JavaScript.
The tag 'script' is disallowed except in specific forms.
Non sono consentiti gli script generati dagli utenti in AMP. Gli script in AMP sono consentiti solo se soddisfano due requisiti principali:
- Tutto il codice JavaScript deve essere asincrono, ad esempio deve includere l'attributo
asyncnel tag dello script. - Possono essere incluse solo la libreria AMP e i componenti AMP.
In questo modo si esclude l'utilizzo di tutto il codice JavaScript di terze parti. C'è un'eccezione: JavaScript può essere utilizzato negli iframe di terze parti.
Prova ad aprire il file base.js esterno. Cosa vedi? Il file deve essere vuoto per l'eventuale codice JavaScript e includere solo un commento di informazioni come il seguente:
/* 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. */
Considerato che questo file JavaScript esterno non è un componente funzionale del nostro sito web, possiamo rimuovere completamente 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 dello script sia scomparso.
La 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 riguardano 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 alla fine del tag <head> del documento.
Il primo tag rende invisibili i contenuti della pagina finché la libreria JavaScript AMP aggiorna il tag body per renderla di nuovo visibile quando i contenuti della pagina sono pronti per la visualizzazione. In questo modo, AMP impedisce che vengano visualizzati i contenuti della pagina che non sono stati ancora definiti. In questo modo, l'esperienza utente risulta veramente immediata poiché i contenuti della pagina vengono visualizzati tutti in una volta, mentre tutti i contenuti above the fold vengono visualizzati insieme. 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 dispone di un componente web appositamente progettato 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 lo strumento di convalida. Dovrebbero essere visualizzati 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 sostituisce direttamente il tag HTML img tradizionale. Esistono altri requisiti quando utilizzi 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 ripetizione del flusso DOM richiesta per il rendering delle sue pagine web.
Per ridurre il flusso di flusso 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 di download e rendering della pagina.
Il sistema di layout consente di posizionare e ridimensionare gli elementi di una pagina in molti modi: dimensioni fisse, responsive design, altezza fissa e altro ancora.
Nel nostro caso il sistema di layout ha dedotto il tipo di layout per amp-img come tipo container. Tuttavia, il tipo di contenitore è destinato agli elementi che contengono elementi secondari ed è incompatibile con il tag amp-img che è il motivo dell'errore.
Perché è stato dedotto il tipo di container? Perché non abbiamo specificato un attributo altezza per il tag amp-img. Nel codice HTML, la ripetizione del flusso può essere ridotta 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, poiché consentono di capire le proporzioni dell'elemento.
Imposta la larghezza e l'altezza come segue:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>Aggiorna la pagina e controlla lo strumento di convalida: non dovrebbero più essere visualizzati errori. Tuttavia, l'immagine non ha una buona qualità così come è posizionata in modo scomodo sulla pagina. Sarebbe fantastico se potessimo ridimensionare l'immagine in modo che si reindirizzi rapidamente e si adatti alla pagina indipendentemente dalle dimensioni dello schermo.
Stranamente, la definizione di larghezza e altezza non limita l'elemento a una dimensione completamente fissa. Il sistema di layout AMP è in grado di posizionare e scalare l'elemento in diversi modi attraverso la conoscenza delle sue proporzioni: l'attributo di layout informa AMP su come vuoi che l'elemento venga posizionato e ridimensionato.
Impostando l'attributo di layout responsive su questo obiettivo, possiamo ottenere questo risultato:
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>Voilà! Le nostre immagini sono nelle proporzioni corrette e riempiono in modo adattabile 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 controlla l'output della console. Dovresti essere accolto con il seguente messaggio:
AMP validation successful.
Domande frequenti
La nuova iniziativa AMP si propone di mettere in evidenza i documenti AMP validi nell'interfaccia dei risultati della Ricerca Google, nell'ambito di una nuova interfaccia carosello. Questa interfaccia fornisce 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 al superamento dello strumento di convalida AMP.
Questo passaggio fornisce una panoramica dei requisiti completi.
Collegamento di pagine canoniche e documenti AMP
L'obiettivo di AMP è rendere il Web più veloce e, anche se il progetto era più incentrato sui contenuti statici sin dagli inizi, grazie all'aggiunta di componenti come amp-bind, è adatto a una vasta gamma di siti, come editori giornalistici, e-commerce, siti web di viaggi, blog e altri.
Tuttavia, è importante capire l'ambito completo della posizione di AMP all'interno della struttura di un sito web. Anche se è possibile utilizzare AMP per creare siti web interi, molti publisher preferiscono utilizzarli come con l'approccio accoppiato, in cui i documenti AMP vengono generati come accompagnamento ai normali articoli HTML che un publisher ospita sul proprio sito web.
Il collegamento canonico nelle pagine HTML standard è 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 di articoli tradizionali di un sito web, dobbiamo considerare le pagine HTML tradizionali come pagine "canoniche".
Abbiamo già fatto il primo passo per raggiungere questo obiettivo nel nostro documento AMP inserendo un tag link nella <head> tornando alla pagina canonica:
<link rel="canonical" href="/article.html">Il passaggio successivo consiste nel collegare l'articolo canonico alla pagina AMP. A tale scopo, includi 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 indicazioni dei tag link:
È necessario configurare questo collegamento bidirezionale affinché il crawler di ricerca di Google comprenda la relazione tra il nostro documento canonico HTML standard e il nostro documento AMP. Se non sono stati forniti link, il crawler non dovrebbe necessariamente indicare quali articoli sono "versioni AMP" dei normali documenti HTML. Fornendo esplicitamente questi link, garantiamo che non ci siano ambiguità.
Metadati motore di ricerca di schema.org
Un altro requisito per la visualizzazione dei documenti AMP nella nuova interfaccia del carosello è il rispetto della specifica dei metadati del motore di ricerca di Schema.org. Questi metadati sono inclusi nel tag <head> dei documenti tramite un tag script di tipo application/ld+json.
Aggiungi il seguente codice alla parte inferiore della 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 "Test my markup". Quindi seleziona la scheda "Snippet di codice", copia il codice sorgente completo dalla pagina AMP e incollalo nel riquadro dell'editor di testo dello strumento di convalida, quindi fai clic su Esegui test:
Nella pagina dovresti vedere un testo simile al seguente:
I requisiti principali per la visualizzazione nel nuovo carosello di Ricerca Google per gli articoli di notizie AMP sono i seguenti:
- Assicurati che il documento AMP sia convalidato.
- Fai riferimento al documento AMP dalla pagina HTML tradizionale tramite il tag <link> e viceversa.
- Includi il tag di metadati del motore di ricerca sopra indicato.
Leggi ulteriori informazioni sul rilevamento di pagine.
Hai completato il lab del codice e hai esplorato con successo molti dei concetti fondamentali dei documenti AMP.
Speriamo di aver compreso non solo come implementare questi concetti e queste funzionalità in un documento AMP, ma anche capirne i motivi.
Di seguito sono riportati alcuni argomenti e link aggiuntivi che potresti voler esplorare per amplificare ulteriormente le tue competenze.