Cosa sono le pagine AMP ?
Le AMP (Accelerate Mobile Pages) sono tutte quelle pagine realizzate seguendo una particolare struttura per risultare ottimizzate per dispositivi mobile.
Se usi il cellulare/tablet o altro dispositivo mobile per effettuare ricerche su google, forse avrai notato che ai primi posti molto probabilmente ci sono risultati evidenziati da un simbolo : ⚡ – AMP
In effetti queste pagine oltre ad essere ottimizzate per mobile come le pagine responsive (quindi con una lettura adatta ai monitor mobile ) sono davvero leggerissime, infatti per creare pagine ottimizzate AMP c’è bisogno di rispettare dei criteri molto rigidi: Elaborazione di javascript solo in asincrono, assenza di css esterni, e dichiarazioni e tag HTML diversi.
In effetti Google ha premiato i proprietari di queste pagine posizionandole ai primi posti dopo una ricerca, e in certi casi se le pagine sono molteplici le accoppia in una sorta di carousel ( galleria orizzontale a scorrimento ).
Come funzionano le pagine AMP?
Che tu abbia un blog o un sito di informazione, per ogni tuo articolo/news dovrai avere 2 tipi di pagine , una per desktop e una per AMP. Ogni tuo articolo per desktop quindi avrà un codice che indicherà che c’è anche la versione AMP di quella pagina:
<link rel="amphtml" href="https://www.francescodestefano.com/come-creare-una-pagina-amp-su-wordpress-e-non/amp/" />
Le pagine AMP invece avranno un codice inverso che indicherà la pagina originale dell’articolo:
<link rel="canonical" href="https://www.francescodestefano.com/come-creare-una-pagina-amp-su-wordpress-e-non/" />
In questo modo le pagine saranno collegate tra loro e verrà visualizzata l’una o l’altra in base al dispositivo del visitatore.
Implementare le pagine AMP sul proprio blog
Se non hai wordpress puoi implementare manualmente le tue pagine AMP, di seguito ti spiegherò come sono strutturate queste pagine. Hai già wordpress? Sei fortunato già esistono plugin appositi per creare le tue pagine amp, una volta installato il plugin vai su Impostazioni>Permalink e aggiorna i permalink in modo da poter far generare le pagine amp del plugin che avranno lo stesso URL delle pagine originali più il suffisso /amp.
Quindi www.sito.it/articolo-1/ avrà la versione amp su www.sito.it/articolo-1/amp
Con un pò di abilità nei codici HTML è possibile personalizzare le proprie pagine amp. Dopodichè testate le vostre pagine direttamente dallo strumento di test di google indicando la pagina amp in questione, e non dimenticatevi di controllare direttamente da Search Console l’andamento delle vostre pagine direttamente da
Aspetto nella ricerca > Accelerated Mobile Pages
AMP HTML
L’AMP HTML praticamente è un HTML con aggiunta di tag nuovi per alcune informazioni chiave nella pagina. In modo che venga tutto interpretato velocemente e in modo ordinato. Vi riporto la guida in inglese su github , mentre di seguito alcuni dei tag obbligatori
<!doctype html> // TAG INIZIALE <html ⚡> oppure <html amp> // 2° TAG <head> e <body> // OBBLIGATORI <meta charset="utf-8"> // SUBITO DOPO IL TAG HEAD <script async src="https://cdn.ampproject.org/v0.js"></script> // 2° TAG DOPO HEAD <link rel="canonical" href="$SOME_URL" /> // TAG PER SPECIFICARE LA PAGINA ORIGINALE <meta name="viewport" content="width=device-width,minimum-scale=1"> // TAG PER SPECIFICARE CHE E' OTTIMIZZATO PER MOBILE, CONSIGLIATO minimum-scale=1
Più un tag di default per la risoluzione dei monitor:
<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>
Infine abbiamo la parte dello stile, qui come accennato prima non possiamo utilizzare fogli di stile esterni, e non possiamo utilizzare il tag !important , il codisi si presenta cosi:
<style amp-custom>
body{}
.content{font-size:16px}
</style>
AMP JS
Le librerie AMP JS risolvono molti problemi dovuti alla necessità di caricare js in modo asincrono. Ipotizziamo di dover inserire analytics nella pagina, basterà inserire il seguente codice:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
e quindi utilizzare nalla parte bassa della pagina il codice per analitics in jSON:
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": " account id "
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Altro plugin indispensabile è il plugin per l’accettazione dei cookie, qui ci viene in aiuto AMP project con il seguente codice:
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
Dopodichè basterà inserire nella parte bassa della pagina un codice del genere:
<amp-user-notification layout=nodisplay id="amp-user-notification1" data-persist-dismissal=“true”> Utilizziamo i cookie....... <a href="#LINK CONTINUA A LEGGERE">Clicca qui</a> <button on="tap:amp-user-notification1.dismiss">TESTO ACCETTO</button> </amp-user-notification>
Non dimenticatevi quindi di settare un css per l’amp notice per poterlo personalizzare come volete :
amp-user-notification { padding:10px 0px; color...}
JSON E TAG AMP
La parte più difficile se cosi possiamo definirla è questa.. Tutti i parametri dell’articolo vanno passati tramite tag json in questo modo:
<script type="application/ld+json">
{"@context":"http:\/\/schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":" URL ARTICOLO ORIGINALE ",
"publisher":{"@type":"Organization",
"name":"Keyword Studio",
"logo":{"@type":"ImageObject",
"url":" URL LOGO ",
"width":"201px","height":"60px"}},
"headline":" TITOLO ARTICOLO ",
"datePublished":"2016-11-26T13:07:34+00:00",
"dateModified":"2016-11-29T17:14:52+00:00",
"author":{"@type":"Person",
"name":" NOME AUTORE"},
"image":{"@type":"ImageObject",
"url":" IMMAGINE ARTICOLO ","width":"500px","height":"500px"}}
</script>
E con questo abbiamo concluso la prima parte del codice fino al tag head
CONTENUTO DELLA PAGINA
Passiamo al tag body, e al reale contenuto della pagina. L’intestazione della pagina avrà un codice header del genere:
<header id="#top" > <div> <a href=" link "> <center><amp-img src=" url immagine " width="201" height="44"></amp-img></center> </a> </div> </header>
per poi procedere con il tag <article> … </article>
Il testo (per fortuna) può essere scritto quasi senza limiti, quindi nei div nei tag p, span etc.
Per le immagini invece la storia cambia, il tag <img non esiste nell’HTML AMP qui questo tag diventa <amp-img , le immagini quindi potranno avere un valore fisso del genere:
<amp-img src=" url immagine " width="36" height="36" layout="fixed"></amp-img>
oppure avere a loro volta un adattamento in base alla risoluzione, come in questo caso:
<amp-img width="500" height="500" src=" url " srcset=" urlimmaginefinoa500larghezza 500w, urlfinoa150larghezza 150w, urlfinoa300larghezza 300w, urlfinoa100larghezza 100w" sizes="(min-width: 500px) 500px, 100vw"></amp-img>
Arrivati a questo punto va solo personalizzato il footer, Qui possiamo inserire un link all’articolo originale per poter continuare a leggere specialmente se anche l’articolo originale è ottimizzato in responsive e infine i dati sul blog/portale.
Test della pagina su search console
Per poter testare le proprie pagine AMP , google ci ha fornito una pagina apposita da qui possiamo controllare gli errori e tutti i tag mancanti, una volta risolti tutti gli errori non vi resta che aspettare che google indicizzi le vostre pagine amp, o effettuare una scansione direttamente da google search console
Conclusioni
Prendiamo ad esempio quest’articolo, e la pagina generata in amp
Unico contro è a discapito della grafica, e delle funzioni personalizzate che abbiamo sulle nostre pagine, ma abbandonato questo problema abbiamo visto che ci sono tanti fattori che ci indicano che creare pagine amp per il nostro blog/sito è davvero importante. Queste pagine hanno un turbo rispetto a quelle normali avendo solo i tag indispensabili, sono posizionate automaticamente meglio su google, e ti permetteranno di raggiungere un nuovo target di visitatori e differenziarti da tutti gli altri siti web visto che in italia utilizzano le pagine amp meno dell’5% del totale. Che aspetti?
Finalmente una guida completa e in italiano.. Complimenti