AMP (Accelerated Mobile Pages) è una tecnologia, o più precisamente un Web Component Framework, nato dalla collaborazione di Google e Twitter. AMP consente di velocizzare il caricamento delle pagine web sui dispositivi mobili. La sua implementazione è stata motivata con l’esigenza di venire incontro a coloro che utilizzano gli smartphone durante la navigazione, desiderano risparmiare sulla quantità di traffico dati generata e non sempre possono accedere ad un segnale in grado di garantire prestazioni elevate.
Insomma, grazie ad AMP i contenuti web diventano più leggeri e veloci da caricare a tutto vantaggio di chi naviga in mobilità.
Pagine mobili più veloci + contenuti leggibili = migliore esperienza utente
Tutte le specifiche del progetto sono disponibili sul sito amp.dev
Indice
AMP significa velocità
A livello di performance AMP dovrebbe riuscire a restituire una risorsa web con una velocità prossima a quella necessaria per il caricamento di un’applicazione mobile, tale risultato non è sempre possibile ma una pagina AMP può richiedere tempi inferiori anche dell’85% rispetto alle pagine tradizionali, mentre il loro “peso” può ridursi anche di 10 volte.
Considerando che buona parte degli utenti abbandonano una pagina web quando il suo caricamento richiede un tempo superiore ai 3 secondi, ricorrere ad AMP potrebbe rivelarsi fondamentale anche per incrementare il numero di visitatori ed eventualmente le conversioni (vendite, click sui link pubblicitari…) di un sito Internet.
Perché implementare pagine AMP?
Come detto AMP migliora l’esperienza utente di chi naviga in mobilità, quindi implementare AMP significa offrire un “buon servizio” agli utenti del sito che lo fruiscono attraverso lo smartphone. questi ultimi, infatti, godranno di un accesso più veloce ai contenuti e di un’interfaccia ottimizzata al 100% per il dispositivo che hanno tra le mani.
A partire dal 2015, inoltre, Google ha dichiarato di considerare la velocità di caricamente un fattore di ranking pertanto l’implementazione di AMP sul proprio sito web può portare a dei vantaggi tangibili anche in ottica SEO. Ma non solo! Implementare pagine AMP, solitamente, migliora anche la frequenza di rimbalzo e ciò comporta un miglioramento qualitativo del sito, altro aspetto rilevato (e premiato) da Google.
AMP: alcune precisazioni preliminari
E’ bene precisare che:
- AMP non sostitiuisce le classiche pagine web, ma offre una versione alternativa di un contenuto fruibile normalmente sotto forma di normale pagina HTML;
- la versione AMP di una pagina web potrebbe non replicare esattamente la versione canonica della stessa ma gli utenti devono poter fruire, per quanto possibile, dei medesimi contenuti e avere la possibilità di effettuare le stesse operazioni;
- nonostante siano state concepite appositamente per la visualizzazione su dispositivo mobile, le pagine AMP sono accessibili e leggibili correttamente anche da altri device (come per esempio i tradizionali PC Desktop o Tablet) ma alcune funzionalità potrebbero non essere disponibili e per questo motivo Google le include unicamente nelle ricerche effettuate tramite smartphone.
Differenze tra pagine AMP e pagine canoniche
Le differenze tra pagina AMP e pagina canonica sono molteplici. La prima cosa che deve essere evidenziata riguarda l’aspetto strutturale.
Struttura di una pagina AMP
Una pagina AMP non è una normale pagina HTML: si tratta, infatti, di una pagina web “speciale” strutturata seguendo regole sintattiche ed un markup specifico che, pur assomigliando ad HTML se ne distingue, almeno in parte.
Per poter usufruire di tutte le feature del framework, infatti, è necessario realizzare delle pagine AMP valide dal punto di vista strutturale e sintattico, seguendo le varie regole definite dal framework.
Dal punto di vista della struttura ha particolare rilevanza l’impostazione degli URL delle pagine AMP che, sempre come sottolineato dalle specifiche per gli sviluppatori, devono essere “significative” per l’utilizzatore, dove con questo termine si intende “in grado di non generare confusione”. A titolo di esempio è possibile proporre il caso in cui la pagina originale sia reperibile presso la seguente URL:
https://www.mrw.it/html/guida-html/
La pagina AMP dovrebbe essere residente su una URL del tipo:
https://www.mrw.it/amp/html/guida-html/
oppure su:
https://www.mrw.it/html/guida-html/?amp=1
e non su:
https://altro-sito.it/html/guida-html/
Quando si utilizza AMP, inoltre, è fortemente consigliato il ricorso alle connessioni sicure via HTTPS, perché se è vero che le pagine AMP sono visibili anche su HTTP è anche vero che alcune funzionalità, legate ad esempio ai video e agli iframe, possono essere sfruttate solo attraverso HTTPS.
Aspetto grafico e funzionale di una pagina AMP
L’aspetto grafico di una pagina AMP solitamente differisce rispetto a quello della pagina canonica. Le regole del framework, infatti, non consentono le stessa libertà cui gli sviluppatori web sono abituati quando creando pagine web standard. Tale “minore libertà” comporta, solitamente, una grafica pù essenziale ed una minor interattività.
Pagine AMP e cache di Google
Quando si visita una pagina AMP non ci si trova sul server del sito web che ha creato il contenuto ma sui server di cache di Google al cui interno è stata salvata. In sostanza:
- il crawler di Google (cioè il processo deputato ad analizzare trovare, scansionare e analizzare le risorse presenti sul Web) accede ad un sito Internet per effettuarne il parsing alla ricerca di contenuti da indicizzare;
- quando esso individua un link alla versione AMP di una pagina Web questa viene salvata nella cache di Google e indicizzata nel motore di ricerca come alternativa alla versione canonica;
- una volta che il caricamento viene completato, la versione AMP diventa disponibile attraverso i risultati di Google per gli utenti che navigano attraverso smartphone.
Il codice sorgente di una pagina AMP
Una pagina AMP presenta una composizione simile a quella delle pagine Internet canoniche ma si differenzia in quanto, come detto, la libertà dello sviluppatore è limitata all’utilizzo di componenti specifiche:
- AMP HTML: si tratta di un’estensione dell’HTML standard che non sostituisce in toto i tag di quest’ultimo ma ne integra di nuovi che hanno sostanzialmente il compito di rendere una pagina più leggera e veloce da caricare;
- AMP JS: una libreria JavaScript che assolve specificamente due compiti: rimuovere quanto più possibile la necessità di includere altre librerie esterne e permettere il caricamento dei dati in modalità asincrona;
- AMP CDN (Content Delivery Network): è la componente che presiede al rendering dei contenuti tramite un sistema di cache, esso entra in gioco quando un utente ricerca una determinata risorsa e, se questa è disponibile nei server di Google, fornisce la pagina AMP corrispondente.
La struttura di base di una pagina AMP è la seguente, ripresa dalla documentazione ufficiale del framework, che come sarà facile notare comprende sia elementi di HTML standard che componenti specifiche per AMP:
<!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/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>Analizzando il codice proposto notiamo innanzitutto la presenza del doctype <!doctype html> che è notoriamente standard per HTML 5.
Segue il tag <html ⚡> (o in alternativa <html amp> come nell’esempio) che ha lo scopo di identificare la pagina come un contenuto AMP e delimita i tag <head> e <body> che potrebbero non essere specificati in una pagina HTML ma sono invece entrambi obbligatori in una pagina AMP.
<meta charset="utf-8"> definisce poi il set di caratteri specifico per la codifica del contenuto (ed è diffusamente utilizzato anche nelle pagine standard).
<script async src="https://cdn.ampproject.org/v0.js"></script> è un componente specifico delle pagine AMP in quanto carica dal CDN del progetto la libreria AMP JS.
Si passa quindi a <link rel="canonical" href="..."> che deve essere specificato per puntare alla versione HTML della pagina AMP (o a quest’ultimo se appunto non è disponibile una versione in HTML standard).
<meta name="viewport" content="width=device-width"> si riferisce infine all’area di visualizzazione e permette di definire un valore di scala (ad esempio initial-scale=1) per ottenere una viewport responsiva.
<script type="application/ld+json">...</script> racchiude le informazioni previste dalle specifiche di Schema.org
<style amp-boilerplate>...</style> viene richiamato per nascondere inizialmente il contenuto della pagina in attesa che AMP JS venga caricato.
Per quanto riguarda il tag <body> non ci sono particolari osservazioni da fare. All’interno del corpo della pagina sarà possibile inserire contenuti testuali utilizzando il classico markup di HTML. Differenze marcate, invece, sono presenti in fase di inclusione di immagini, elementi multimediali e contenuti di terze parti.
Inclusione dei media: immagini, video e audio
Come sottolineato in precedenza, AMP HTML supporta diversi tag dell’HTML standard, esistono però dei tag che devono essere, per forza di cose, sostituiti con quelli messi a disposizione dal framework, come per esempio il tag <img> al posto del quale deve essere impiegata l’alternativa <amp-img> da utilizzare in questo modo per includere un’immagine in una pagina AMP:
<amp-img src="logo.jpg" alt="Il nostro logo" height="800" width="1600"></amp-img>Si noti che gli attributi height e width sono obbligatori.
Per inserire in una pagina AMP un’immagine responsiva si potrà ricorrere ad un codice come il seguente che, tramite l’attributo HTML srcset del tag AMP HTML amp-img, consente di specificare i percorsi alle immagini da utilizzare a seconda dei diversi contesti di visualizzazione e, di conseguenza, dei container destinati ad ospitare le immagini:
<amp-img
src="/immagini/logo-stretto.jpg"
srcset="/immagini/logo-largo.jpg 640w, /immagini/logo-stretto.jpg 320w"
width="800"
height="400"
layout="responsive"
alt=" Il nostro logo">
</amp-img>Si noti, all’interno del codice appena proposto, l’attributo layout al quale è stato assegnato il valore “responsive”. Questo attributo facilita estremamente la creazione di elemeni adattivi all’interno di pagine AMP rispetto a quanto bisognerebbe fare utilizzando CSS.
In AMP HTML è disponibile anche un tag specifico per le GIF animate, <amp-anim>, e altre tipologie di immagini contenenti animazioni.
Per i contenuti multimediali sono, invece, disponibili i tag <amp-video> (per i filmati) e <amp-audio> (per le tracce sonore).
Di seguito un esempio di implementazione di un filmato:
<amp-video controls
width="640"
height="360"
src="/mio-video.mp4"
poster="/mio-video.png">
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>Di seguito il codice di una traccia audio:
<amp-audio width="400"
height="200"
src="/canzone.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio.</p>
</div>
<source type="audio/mpeg" src="/canzone.mp3">
<source type="audio/ogg" src="/canzone.ogg">
</amp-audio>Si noti che se nel codice di una pagina AMP venissero utilizzati i tag tradizionali di HTML questi produrrebbero ugualmente il risultato desiderato ma impedirebbero la validazione della pagina con la conseguente perdita dei vantaggi derivanti da questa tecnologia.
Includere iframe
E’ possibile includere iframe all’interno di una pagina AMP. Per farlo, innanzitutto, sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>Per includere il frame all’interno del corpo della pagina:
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="https://www.google.com/maps/embed/v1/place?key=123456&q=europe">
</amp-iframe>Includere contenuti di terze parti
Le specifiche di AMP consentono di includere in pagina anche contenuti di terze parti come:
- Tweet
- post di Instagram
- post e video di Facebook
- video di YouTube o Vimeo
- statistiche di Google Analytics
- annunci pubblicitari di diversi provider tra cui, ovviamente, AdSense
Per prima cosa sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-twitter"
src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>L’implementazione del tweet avverrà mediante questo snippet:
<amp-twitter width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>Il parametro “centrale” è data-tweetid che dovrà essere valorizzato con l’identificativo univoco del tweet che si vuole incorporare.
Per prima cosa sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>L’implementazione del post avverrà mediante questo snippet:
<amp-instagram data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>Come facile intuire, all’interno del codice il parametro data-shortcode dovrà essere valorizzato con l’identificativo univoco del post che si vuole incorporare.
Per prima cosa sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-facebook"
src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>L’implementazione di un post avverrà mediante questo snippet:
<amp-facebook width="486" height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>L’inclusione di un video, invece, richiederà quest’altro codice:
<amp-facebook width="476" height="316"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>Video di YouTube
Per prima cosa sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-youtube"
src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>L’implementazione del video avverrà mediante questo snippet:
<amp-youtube
data-videoid="mGENRKrdoGY"
layout="responsive"
width="480"
height="270"
></amp-youtube>Il parametro data-videoid, ovviamente, dovrà essere valorizzato con l’identificativo univoco del video che si vuole riprodurre.
Video di Vimeo
Per prima cosa sarà necessario includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-vimeo"
src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>L’implementazione del video avverrà mediante questo snippet:
<amp-vimeo
data-videoid="27246366"
layout="responsive"
width="500"
height="281"
></amp-vimeo>Anche in questo caso il parametro data-videoid dovrà essere opportunamente valorizzato con l’identificativo univoco del video che si desidera incorporare nella pagina AMP.
Google Analytics
Il traffico di una pagina AMP può essere misurato esattamente come nelle comuni pagine web. Il framework, infatti, supporta la possibilità di includere svariati servizi di analytics tra cui, ovviamente, Google Analytics.
Per incorporare il tracciamento di Analytics all’interno della nostra pagina AMP dovremo, innanzitutto, includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>Nel corpo della pagina dovremo invee includere
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>Il codice qui sopra deve essee personalizzato sostituendo “UA-XXXXX-Y” con l’identificativo univoco del proprio account Google Analytics.
Il codice proposto può essere poi ulteriormente modificato implementando diverse opzioni, tuttavia lo snippet di codice dovrebbe essere sufficiente a soddisfare le esigenze più comuni.
Implementare annunci pubblicitari
Le pagine AMP, ovviamente, non escludono la possibilità di monetizzare il traffico mediante annunci pubblicitari, anzi il supporto alle forme di advertising è piuttosto ampio e comprende non solo Google AdSense.
di seguito un viedo ufficiale di AdSense che spiega i vantaggi di AMP anche e soprattutto dal punto di vista degli annunci pubblicitari:
L’inclusione di annunci all’interno di una pagina AMP è piusttosto semplice: basta copiare ed incollare il relativo snippet di codice prodotto all’interno dell’interfaccia di Google AdSense.
Per incorporare annunci pubblicitari all’interno della nostra pagina AMP dovremo, innanzitutto, includere questo script tra i tag <head> e </head>:
<script async custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>Di seguito un esempio di codice per un annuncio responsivo di Google AdSense:
<amp-ad
width="100vw"
height="320"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="123456789"
data-auto-format="rspv"
data-full-width
>
<div overflow></div>
</amp-ad>Come detto all’inizio del paragrafo, il supporto per gli annunci pubblicitari è molto ampio. Per una lista completa dei provider pubblicitari supportati si faccia riferimento alla documentazione ufficiale a questa pagina.
Altri servizi di terze parti
la lista dei servizi di terze parti che è possibile includere all’interno di pagine AMP è particolarmente ricca, tra i tanti possiamo ricordare: Dailymotion, Pinterest, Reddit, Soundcloud, ecc.
Dimensionamento degli elementi
Una caratteristica interessante di AMP riguarda il fatto che, a differenza di quanto accade nelle pagine Web basate sull’HTML standard (dove volendo è possibile utilizzare soltanto CSS per il layout degli elementi) il framework AMP richiede che vengano sempre esplicitate le dimensioni di ognuno di essi (salvo alcune eccezioni).
Lo abbiamo già visto in precedenza quando abbiamo presentato i tag per l’inclusione delle immagini, degli elementi multimediali e dei contenuti di terze parti.
AMP e fogli di stile CSS
E’ possibile personalizzare qualsiasi elemento di una pagina AMP tramite le proprietà di CSS (ad eccezione di alcune che non sono state supportate per questioni di performance).
Per aggiungere regole di stile alla pagina sarà necessario includerle direttamente delimitandole fra <style amp-custom>…</style>, come nell’esempio seguente:
<style amp-custom> body { background-color: bisque; } amp-img { background-color: chocolate; border: 2px dashed teal; } </style>E’ importante ricordare che per ciascuna pagina AMP è consentita l’inclusione di un solo foglio di stile, quindi non sarà possibile inserire diverse occorrenze del tag <style amp-custom>.
L’utilizzo del markup <link rel="stylesheet"> è ammesso esclusivamente per includere delle Custom Fonts (come ad esempio le Google Fonts).
Un’altra importante eccezione riguarda la keyword !important che non è supportata.
L’attributo layout
Quando, poco sopra, abbiamo parlato di immagini responsive abbiamo introdotto l’attributo layout. Questo è un attributo specifico del framework AMP e, come già detto, consente di gestire in modo estremamente semplice l’aspetto degli elementi della pagina senza ricorrere a CSS.
Negli esempi precedenti abbiamo sempre assegnato a questo attributo il valore “responsive”, tuttavia questo non è l’unico valore a messo per layout.
Di seguito i valori più utilizzati:
- fill – l’elemento assumerà le dimensioni del suo container, sia in larghezza che in altezza, riempiendone, di fatto, la superficie.
- fixed – l’elemento assumerà le dimensioni specificate all’interno degli attributi with e height;
- nodisplay – l’elemento non sarà visibile e non occuperà alcuno spazio sullo schermo (l’effetto è analogo all’utilizzo di
display: nonein CSS) - responsive – l’elemento si ridimensionerà automaticamente mantenendo le proporzioni originali sulla base dei valori di with e height.
Oltre a quelli indicati esistono altri valori per l’attributo layout, tuttavia, il loro utilizzo è limitato a casi specifici.
Collegare pagine canoniche a pagine AMP (e viceversa)
Quando si desidera indicare che una pagina canonica e una pagina AMP sono associate tra loro, ciascuna di esse deve riportare un link all’altra attraverso il tag <link> da inserire, con argomenti differenti, all’interno della porzione di codice delimitata da <head>. Motivo per il quale nella pagina canonica dovrà essere indicato ad esempio:
<link rel="amphtml" href="https://www.miosito.com/pagina.html?amp=1">mentre nella pagina AMP si avrà ad esempio:
<link rel="canonical" href="https://www.miosito.com/pagina.html">Da notare che il parametro canonical dell’attributo rel del tag link deve essere utilizzato anche nell’eventualità in cui esista soltanto la pagina AMP che, in questo caso, farà riferimento a sé stessa e il suo URL diventerà canonico:
<link rel="canonical" href="https://www.miosito.com/pagina.html?amp=1">Implementare AMP all’interno del proprio sito web
Implementare AMP all’interno del proprio sito web potrebbe non essere semplicissimo, questo ovviamente dipende dalla tecnologia con la quale è stato sviluppato il sito web ed anche dalla mole di contenuti in quest’ultimo ospitata.
Se per implementare AMP all’interno di un CMS come WordPress può essere sufficiente un plugin, in un sito realizzato “a mano” le cose potrebbero rivelarsi ben più complesse.
In siti di poche pagine, inoltre, la conversione delle pagine HTML in AMP potrebbe essere effettuata manualmente, viceversa in siti con molti contenuti bisognerà trovare soluzioni automatiche che consentano di convertire il codice HTML nel formato validato da AMP.
A tal fine vi segnalo due applicazioni PHP che consentono di effettuare automaticamente la conversione di un sorgente HTML in AMP:
- AMP Converter Library: è una libreria PHP che consente di trasformare un markup HTML in codice AMP.
- AMP PHP Library: è una libreria PHP open-source in grado di effettuare il pasring di un markup HTML e di convertirlo in codice AMP.
Esistono, ovviamente, altre librerie sia in PHP che in altri linguaggi in grado di automatizzare il processo di conversione dei contenuti di un sito web dinamico.
Validazione delle pagine AMP
una volta conclusa la conversione del codice HTML in codice AMP, potremmo pubblicare il file all’interno del nostro sito web in attesa che Google effettui la scansione. Affinché tutto vada a buon fine, tuttavia, è necessario che la pagina ampia sia stata formattata correttamente o, più precisamente, sia valida.
Ma come effettuare la validazione di una pagina AMP?
Esistono diversi modi per farlo, il più semplice, probabilmente è ricorrere all’apposito tool messo a disposizione da Google che è raggiungibile all’indirizzo validator.ampproject.org.
Per verificare la validità o meno di un documento AMP sarà sufficiente inserirne la URL all’interno dell’apposito campo e premere sul pulsante “Validate”.
In caso di errori, il sistema restituirà una lista dettagliata in modo da semplificarne la correzione.
Oltre al citato tool Made in Google esistono anche diverse estensioni per Chrome e Firefox che consentono di verificare la conformità di una pagina AMP alle specifiche del Framework.
