AMP: anatomia e implementazione

L’avvento AMP

Lo scorso ottobre Google ha annunciato l’avvento delle Pagine Mobile Accelerate (AMP), un framework facilmente accessibile per creare pagine web dal tempo di caricamento estremamente ridotto, pensate espressamente per l’accesso da dispositivi mobili.

L’iniziativa, totalmente open-source, è stata ideata per permettere agli sviluppatori di migliorare le performance da dispositivi mobili senza dover ristrutturare completamente il proprio sito.

Ovviamente risultati simili possono essere ottenuti attraverso un’ottimizzazione intensiva focalizzata sulle prestazioni del sito, ma l’ulteriore vantaggio offerto da Google a chi decide di aggiungere le pagine AMP al proprio sito è quello di potersi posizionare in un carousel che occupa una zona prominente delle serp presentate agli utenti che effettuano ricerche da smartphone e tablet.

ScreenAMP

Come è fatto AMP

La specifica Google AMP è costituita da 3 elementi: AMP HTML, AMP JS e Google AMP Cache.
AMP HTML definisce:

  • L’insieme degli elementi HTML non consentiti, per esempio non è permesso l’uso dei tag <input> e <form> né l’uso di CSS attraverso l’attributo “style” o file esterni.
  • Le estensioni dell’HTML: alcuni tag, come <img> vengono sostituiti con un tag AMP. Si tratta di elementi molto dispendiosi in termini di rendering e/o che fanno uso di Javascript (AMP non permette l’uso di Javascript agli sviluppatori).
  • I requisiti minimi: l’insieme degli elementi che devono essere presenti in una pagina per essere considerata AMP (sono obbligatori elementi come il <!doctype html> e il link canonical).

AMP JS è una libreria Javascript che si occupa di renderizzare la pagina attuando una serie di politiche che impediscono il blocco della generazione del DOM. Per esempio, tutte le risorse Javascript vengono caricate in modo asincrono e viene renderizzata solo la parte di pagina visibile all’utente.

Google AMP Cache è un CDN dedicato alle pagine AMP: i contenuti AMP validi vengono memorizzati in questa cache per essere caricati più velocemente.

Per verificare se una pagina AMP è valida, è sufficiente accedervi da browser aggiungendo “#development=1” alla fine dell’ URL e verificare che nella console venga visualizzato il messaggio “AMP validation successful”.
Però, per una quantità alta di pagine generate dinamicamente, può essere più comodo il rapporto AMP di Google Search Console, il quale mostra quante pagine sono già valide e indicizzate e quali invece hanno degli errori.

Accellerated Mobile Pages

Come far trovare a Google le pagine AMP

Al fine di permettere a Google di trovare i contenuti AMP è utile inserire i seguenti tag <link> dentro i tag <head>:

  • Se generiamo la versione AMP di una pagina già esistente dovremo inserire:
    • <link rel=”amphtml” href=”[URL_PAGINA_AMP]”> nella pagina già esistente.
    • <link rel=”canonical” href=”[ULR_PAGINA_ORIGINALE]”> nella pagina AMP.
  • Se invece generiamo un contenuto AMP a cui non corrisponde nessuna pagina HTML classica inseriremo il tag:<link rel=”canonical” href=”[URL_PAGINA_AMP]”>.

Invece, per identificare le singole informazioni contenute nella pagina è buona pratica inserire (sempre all’interno dei tag <head>) i dati strutturati in formato JSON-LD utilizzando lo schema Article o uno dei suoi figli (per esempio NewsArticle o BlogPosting).

Integrare una piattaforma di tracking

Il tag AMP HTML per il tracking delle visite e degli eventi in pagina è amp-analytics. La proprietà type di questo tag identifica la piattaforma di tracciamento da utilizzare.

Se si utilizza Google Analytics, al fine di gestire correttamente le pagine AMP lato server viene chiesto di utilizzare una proprietà Google Analytics a parte. Per permettere la registrazione delle visite, è sufficiente inserire dopo il <body> il tag con i parametri relativi alla proprietà come quello sottostante (il parametro “account” identifica la proprietà Google Analytics).

<amp-analytics type="googleanalytics">
<script type="application/json">
	{
		"vars": {
			"account": "UA-XXXXX-Y"
		},
		"triggers": {
			"trackPageview" : {
				"on": "visible",
				"request": "pageview"
			}
		}
	}
</script>
</amp-analytics>

Siccome si tratta di un componente esteso, nella sezione head, prima della chiamata a AMP JS, va inserita quella a amp-analytics:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Inserire annunci

Per l’inserimento di annunci in pagina esiste il componente amp-ad. Attraverso il parametro “type” di tale elemento è possibile identificare quale tra le ad-network supportate utilizzare, ed è in base a questa network che il tag va opportunamente personalizzato con parametri specifici.

E’ stata testata l’integrazione di annunci provenienti da DoubleClickRubiconCriteo e Improve Digital. Le uniche configurazioni a cui fare attenzione sono lato Ad server: per esempio, le creatività vanno servite via https).

In particolare, per quanto riguarda DoubleClick, esistono dei requisiti sia per il formato che per il tipo di annuncio. Essi possono variare a seconda della versione del tag.

Di seguito, un esempio di tag AMP configurato per DoubleClick da inserire in pagina (il parametro “data-slot” identifica l’unità pubblicitaria):

<amp-ad width="300" height="250"
type="doubleclick"
data-slot="/xxxxxxx/Test_AMP"
>
</amp-ad>

Esempio di integrazione AMP

Attraverso la guida presente sul portale ufficiale del progetto, è facile ottenere delle piccole pagine statiche contenenti gli elementi essenziali di una pagina AMP valida. Questo probabilmente può essere fatto solo per prendere dimestichezza con la sintassi AMP, perché nella maggior parte dei casi ci si troverà a dover integrare AMP in pagine generate dinamicamente.

La complessità di questa integrazione varia a seconda della tecnologia utilizzata lato server per generare i contenuti. Se non si utilizza un CMS, bisognerà implementare tutte le specifiche da zero, in caso contrario esistono delle estensioni che semplificano molto questo processo.

Per esempio WordPress fornisce un plug-in ufficiale che permette di visualizzare la versione AMP di un post aggiungendo “/amp” alla fine della URL, ma da solo non offre alcuna possibilità di personalizzazione. Per estendere le sue funzionalità può essere utile PageFrog. Questi due plug-in assieme permettono di:

  • Cambiare alcuni elementi di stile della pagina (logo, colore e tipo della barra di stato, ecc.);
  • Inserire il tag amp-analytics associandolo ad un account Google Analytics, Chartbeat o Parsely, oppure inserire direttamente il tag di un’altra piattaforma;
  • Inserire annunci Google AdSense. E’ possibile connettere il plugin ad un account Goolge AdSense e impostare la frequenza con cui gli annunci vengono inseriti nel corpo della pagina (numero di parole);
  • Scegliere per quali contenuti visualizzare una versione AMP: è possibile sia generare la versione AMP per tutti i post e per tutte le pagine, che disabilitare e abilitare la versione AMP della singola pagina o post;
  • Forzare lo switch-off di plug-in che non permettono di validare la pagina AMP (tipicamente plug-in che fanno uso di Javascript).

Questa coppia di plug-in permette di generare pagine AMP molto velocemente e in modo semplice, tuttavia presenta i seguenti limiti:

  • PageFrog non è stato testato con l’ultima versione di WordPress (4.5.2);
  • Possono esserci dei problemi di compatibilità con altri plug-in che agiscono sui permalink: per esempio con i plug-in WPML attivi non viene fornita la versione AMP dei contenuti tradotti;
  • Ogni volta che viene modificata la struttura dei permalink, è necessario disattivare i plug-in e riattivare prima PageFrog e poi AMP dal pannello setup di PageFrog;
  • Ottenere pagine AMP valide (senza errori) potrebbe non essere immediato perché il codice html inserito dall’utente potrebbe non essere conforme alla specifica AMP. Quindi potrebbe essere necessario modificare tale codice o estendere opportunamente il plugin;
  • Non è possibile fare il tracking di eventi (scroll, click ecc.);
  • Sono permessi solo annunci adSense;
  • E’ possibile inserire annunci solo nel corpo dell’articolo. Non è possibile inserire un banner tra la barra contenente il logo e il titolo o nel footer;
  • Non è possibile scegliere quale pagina o articolo deve avere annunci: gli annunci vengono messi su tutti i contenuti AMP;
  • Non viene gestita una notifica utente.  Ormai è molto comune trovare il popup con l’informativa sulla privacy. Il plug-in non gestisce un generico pop-up informativo pur esistendo un componente AMP apposito (amp-user-notification);
  • Non sono previsti dei pulsanti per il social sharing: Anche questi molto comuni ed esiste il relativo componente (amp-social-share).

Nonostante le carenze elencate, la soluzione PageFrog+AMP può essere comoda in molti casi (per esempio questo blog). L’estensione di questi plug-in per correggere gli errori di validazione e per aggiungere funzionalità non è stata, infatti, complicata.

Conclusioni

Sicuramente la creazione di pagine AMP è un’opportunità da non sottovalutare in quanto, come detto precedentemente, esse offrono la possibilità di generare traffico attraverso un “nuovo canale” prettamente mobile.

Come sappiamo, le ricerche da dispositivi mobili hanno ormai superato per numero quelle effettuate da desktop: un motivo in più per investire nel proprio posizionamento mobile. Nonostante ciò, è necessario evidenziare anche i risvolti meno positivi:

  • Al momento non tutte le query di ricerca mostrano il carousel AMP;
  • Posizionarsi in questi carousel non è scontato e non è ancora chiaro quali sono i fattori che maggiormente condizionano questo posizionamento;
  • Le pagine AMP sono “meno belle” di quelle tradizionali;
  • Non si a ancora quali siano i piani futuri di Google per quanto riguarda le AMP.

Il consiglio è quello di sviluppare una versione AMP delle proprie pagine editoriali, contenenti guide o informazioni condivisibili o, nel caso di siti di settore, delle proprie ricette, anche se questo potrebbe non portare nessun “vantaggio immediato” in quanto non è possibile ottenere la certezza che venga mostrato il carosello di pagine accelerate per query pertinenti alle nostre pagine AMP.

Essere early adopter di una novità tecnologica però porta numerosi vantaggi, garantendo una posizione privilegiata nei confronti dei propri concorrenti. Questa affermazione è valida in particolar modo per i nuovi prodotti testati da BigG, che storicamente non pubblica avvisi su come e quando rilascerà ufficialmente una nuova feature.

Leave a Reply

Name*

e-Mail * (will not be published)

Website