Le pagine AMP sono utili per migliorare l’esperienza di navigazione per gli utenti mobile.
Il termine AMP, acronimo di Accelerated Mobile Pages, indica un tipo di pagina web di dimensioni estremamente inferiori rispetto ad una pagina tradizionale. Viene utilizzato per caricare i siti su dispositivi mobile e permette un tempo di attesa sensibilmente più basso. Basti pensare che il limite di dimensione per una pagina AMP è di 50Kb, quindi il caricamento sarebbe estremamente veloce.
Purtroppo le pagine AMP non vengono generate automaticamente da Google, ma bisogna implementare AMP all’interno della propria piattaforma web, al fine di avere due versioni di uno stesso articolo, uno standard (link canonico) e uno AMP (seguito dal suffiso ?amp nell’URL). Per rendere un sito web compatibile con AMP è necessario eseguire una serie di passaggi, che abilitano diversi script creati appositamente per la tecnologia AMP. Vediamo quindi come implementare AMP correttamente sul proprio sito web.
Installazione e configurazione del plugin AMP
Per prima cosa bisogna installare il plugin per attivare il servizio AMP sul proprio dominio. Su WordPress, basta andare su Plugin>Aggiungi nuovo e scrivere semplicemente “amp” nella casella di ricerca. Nei risultati troverete due tra i plugin più utilizzati per questo scopo: AMP e AMP per WP – Accelerated Mobile Pages.
Noi abbiamo scelto AMP poiché si tratta del plugin ufficiale per WordPress, ma nessuno vi vieta di utilizzare l’altro, nel caso abbiate problemi con il primo.
Dopo aver installato ed attivato il plugin, vedrete apparire il logo AMP nel menù di WordPress. Cliccateci sopra per accedere alle impostazioni generali.
Qui ora è fondamentale scegliere la modalità con la quale implementare AMP nel sito web. Esistono tre differenti opzioni:
- Native: il sito diventa di tipo AMP-First, ovvero qualsiasi pagina web verrà caricata in modalità AMP, sia da PC che mobile. Questa modalità utilizza il tema in uso sul sito per caricare le pagine AMP.
- Transitional: anche in questo caso viene utilizzato il tema attivo sul sito, con la differenza che viene generato un URL separato per le pagine AMP, contrassegnato dal suffisso ?amp alla fine dell’indirizzo (es. www.miosito.it/articolo/?amp)
- Reader: le pagine web AMP vengono visualizzate sfruttando il tema base del framework AMP, dunque non coincide con quello attivo sul sito. Ciò potrebbe creare confusione nei visitatori, ma sicuramente avrete una pagina AMP perfettamente ottimizzata.
E’ importante inoltre attivare la voce Automatically accept sanitization for any newly encountered AMP validation errors, per evitare che qualche errore possa compromettere la visualizzazione delle pagine AMP. Si consiglia comunque di cercare di risolvere eventuali errori di codice o di visualizzazione.
Ora che il plugin è configurato, bisogna implementare AMP a livello di codice.
Implementare AMP nel codice di WordPress
Avere una pagina estremamente leggera come quella AMP non significa necessariamente rinunciare a tutti gli elementi a schermo presenti nelle pagine classiche, come script, video o immagini. Semplicemente il sistema AMP utilizza degli script proprietari che garantiscono un’ottimizzazione degli elementi già presenti, alleggerendo le pagine web per gli utenti mobile.
Un primo codice obbligatorio da aggiungere è il cosiddetto amp boilerplate. Si tratta di una serie di istruzioni che indicano ai motori di ricerca che quella pagina esiste anche nella sua versione AMP. In questo modo gli utenti che navigano da mobile vedranno direttamente la versione AMP e non quella normale. Per implementare l’amp boilerplate in WordPress bisogna accedere all’editor del tema (Aspetto>Editor del tema), selezionare il file header.php ed inserire il seguente codice all’interno dell’<head>:
<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>Sono permesse delle modifiche a questo codice, ma se non siete esperti è meglio lasciare tutto così com’è. Una volta salvate le modifiche, possiamo proseguire oltre. Prima di ogni altra istruzione, è necessario attivare il modulo AMP, inserendo questa stringa sempre nel file header.php:
<script async src="https://cdn.ampproject.org/v0.js"></script>A questo punto l’implementazione base di AMP è completata. Ora sarà necessario aggiungere tutti quei moduli relativi agli elementi che fanno riferimento a risorse esterne, come gli Analytics, i video YouTube o i pulsanti di condivisione social.
Implementare AMP su WordPress: gli script più comuni
Come già detto ad inizio articolo, una pagina AMP ha dimensione massima di 50Kb. E’ chiaro quindi come elementi quali script, video o annunci pubblicitari siano eccessivamente pesanti per una singola pagina. Per questo ci vengono in aiuto gli script AMP, sviluppati appositamente per mantenere le stesse caratteristiche di una pagina standard in una pagina AMP. Di seguito un elenco di script che basta semplicemente inserire nel file header.php:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<script async custom-element="amp-auto-ads"src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>Vediamo nel dettaglio cosa riguardano questi script:
- amp-youtube: permette di mostrare i video YouTube
- amp-social-share: aggiunge il supporto per i pulsanti di condivisione sui social network
- amp-analytics: attiva gli Analytics per le pagine AMP
- amp-fit-text: permette di modificare la grandezza del testo per adattarsi allo spazio in cui si trova
- amp-carousel: mostra le immagini in un carosello orizzontale, per rendere la pagine più flessibile e performante
- amp-font: gestisce i font personalizzati nelle pagine AMP
- amp-auto-ads: mostra gli annunci automatici nelle pagine AMP
Come potete notare, il modulo AMP dispone di script appositi per ogni elemento della pagina, incluso il testo, per rendere il tutto più leggero e fruibile possibile da dispositivi mobili. Vogliamo rassicurarvi dicendovi che ogni script è di tipo async, ovvero vengono eseguiti in contemporanea con il caricamento del sito, così da non allungare ulteriormente la velocità di caricamento del sito stesso.
Per scoprire tutti gli script disponibili per le pagine AMP, potete fare riferimento alla documentazione ufficiale.
Attivare gli Analytics e gli annunci su pagine AMP
I due script sui quali vogliamo soffermarci sono amp-analytics e amp-auto-ads. Il primo permette di abilitare gli Analytics per le pagine AMP mentre il secondo attiva gli annunci pubblicitari in un formato apposito molto più leggero. In questo caso però è necessario inserire un ulteriore codice per rendere effettivo lo script. Nel caso degli Analytics, è necessario andare sulla scheda Analytics del plugin AMP ed inserire il seguente codice sotto JSON Configuration:
{
"vars": {
"account": "UA-XXXXXXXX-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}Al posto di UA-XXXXXXXX-1 dovrete inserire il vostro ID di monitoraggio, che potete trovare nel vostro profilo di Google Analytics, andando su Amministratore>Informazioni sul monitoraggio>Codice di monitoraggio. Una volta salvata la configurazione, vedrete apparire un ID:
Tornate nel file header.php ed inserite questo codice appena dopo il tag <body>:
<amp-analytics type="googleanalytics" id="xxxxxxxxxxxx"><script type="application/json">{"vars": {"account": "UA-79190589-1"},"triggers": {"trackPageview": {"on": "visible","request": "pageview"}}}</script></amp-analytics>Dove al posto delle x dovrete inserire l’ID appena ricavato dalla configurazione. Ora avete attivato correttamente gli Analytics sulle pagine AMP. Dopo qualche giorno noterete che su Google Analytics verranno indicate separatamente le sessioni e le visite riguardo le pagine standard e AMP.
Ora vediamo invece come abilitare gli annunci automatici su pagine AMP. In questo caso la soluzione è molto più semplice, anche perché è Google stessa che ci fornisce tutte le istruzioni per implementarli. Una volta entrati nel vostro account Google AdSense, dovrete andare in Annunci>Annunci automatici e selzionare Annunci automatici per AMP.
Basterà seguire le semplici istruzioni fornite da Google per attivare subito gli annunci Google anche nelle pagine AMP. Potrebbero essere necessari 20-30 minuti prima di vedere effettivamente gli annunci attivi.
Verificare che l’implementazione AMP sia corretta
E’ giunto il momento di fare la prova del nove. Dopo aver eseguito tutti i passaggi descritti in questa guida ed inserito correttamente tutti gli script necessari, è il momento di verificare che effettivamente le pagine AMP siano attive. Andare quindi a questo link ed incollare l’URL di una pagina AMP. Dopo aver premuto su VALIDATE, dovrete ottenere Validation Status: PASS.
Ciò significa che la pagina AMP è perfettamente funzionante e sarà indicizzata nei motori di ricerca. Se per qualche motivo doveste visualizzare Validation Status: FAIL, verificate attentamente gli errori e cercate di trovare una soluzione. Di seguito vi elenchiamo i problemi più comuni:
- MANDATORY_TAG_MISSING: il codice amp boilerplate non è stato inserito correttamente
- TAG_REQUIRED_BY_MISSING: manca lo script relativo ad uno specifico elemento della pagina
- DISALLOWED_SCRIPT_TAG: non sono permessi gli script personalizzati
Con questa guida potrete finalmente implementare AMP sul vostro sito web in maniera sicura e definitiva, senza preoccuparvi di ricevere errori di indicizzazione da Google.