Google AMP: cos’è e come creare pagine AMP

AMP (acronimo di Accelerated Mobile Pages) è un progetto open source di Google con l’obiettivo di velocizzare l’esperienza di navigazione degli utenti da dispositivi mobili. Implementando AMP i visitatori che navigano da dispositivo mobile vedranno le pagine del tuo sito caricarsi più velocemente. Inoltre le pagine AMP tendono a posizionarsi più in alto nei risultati di Google.

Ci sono tuttavia alcuni aspetti negativi da considerare:

• La rigidità dello standard AMP potrebbe rendere difficile offrire tutte le funzionalità di un sito anche nelle pagine AMP;
• Il supporto per gli annunci pubblicitari è (attualmente) limitato;
• L’implementazione può essere impegnativa in termini di sviluppo.

Assicurati dunque di condurre un’adeguata analisi costi/benefici prima di optare per l’implementazione di AMP.

Indice dei contenuti:

• Cos’è Google AMP?
• Perché dovresti implementare le pagine AMP per la SEO?
• Come creare pagine AMP
• Best practice per creare pagine AMP
• Limiti di Google AMP
• Domande frequenti su Google AMP
• Conclusioni su Google AMP

Cos’è Google AMP?

Google AMP è una tecnologia che consente di creare pagine web che si caricano quasi istantaneamente sui dispositivi mobili (smartphone e tablet).

Le pagine AMP sono in pratica versioni ridotte e ottimizzate delle pagine complete, in modo tale che il loro caricamento avvenga più rapidamente sui dispositivi mobili.

Perché dovresti implementare le pagine AMP per la SEO?

Caricamento rapido delle pagine

AMP ti consente di rendere il caricamento delle pagine più rapido attraverso il codice ottimizzato, la memorizzazione nella cache e l’utilizzo dell’infrastruttura CDN (Content Distribution Network) di Google. Il caricamento rapido delle pagine aumenterà probabilmente il tasso di conversione e migliorerà il posizionamento sui motori di ricerca.

Adeguamento all’indice mobile-first

Dal 1° Luglio 2019 Google ha reso noto il passaggio all’indice mobile-first. Questo significa che a determinare il posizionamento su Google sarà principalmente la versione mobile di un sito e solo in seconda istanza la versione desktop. L’adozione di AMP aiuta sicuramente ad adeguarsi a questo cambiamento.

Maggiore visibilità nelle SERP di Google

Google promuove le pagine AMP nelle pagine dei risultati del suo motore di ricerca. Ad esempio, i siti di news che implementano le pagine AMP, aumentano le probabilità di apparire nel carosello delle notizie di Google.

Un’altra forma di promozione consiste nel mostrare il simbolo AMP (il fulmine) vicino al risultato, come in questo esempio:

Dunque, oltre ad una migliore esperienza di navigazione mobile, le pagine AMP prospettano anche un maggiore risalto nelle SERP di Google.

Come creare pagine AMP

Per creare pagine AMP, devi implementare un’altra versione delle pagine del tuo sito che seguano gli standard del progetto AMP.

L’implementazione di AMP consiste proprio nel rendere disponibili le pagine in un formato alternativo, quello appunto relativo alle specifiche dello standard AMP. Ciò significa che la versione AMP delle tue pagine affiancherà le pagine normali del tuo sito.

Le specifiche AMP sono ben documentate e facilmente accessibili, ma l’implementazione potrebbe risultare impegnativa in termini di sviluppo. Fortunatamente per i CMS più diffusi (WordPress, Magento, Prestashop, ecc.), esistono diversi plugin che rendono l’implementazione più semplice.

Quando si implementa AMP è necessario rispettare le specifiche e convalidare le pagine prima della pubblicazione. Dopo aver pubblicato le pagine AMP, infatti, è consigliabile testarle tramite il Test delle pagine AMP di Google, in modo che se ci sono errori di convalida è possibile intervenire celermente.

Assicurati anche di verificare periodicamente la sezione “Miglioramenti” di Google Search Console, dove riceverai eventuali notifiche su errori o miglioramenti da implementare alle pagine AMP.

Linee guida per creare pagine AMP

Dal punto di vista tecnico, AMP è composto da tre parti distinte:

AMP HTML: è HTML con proprietà personalizzate per AMP. Sebbene la maggior parte dei tag nelle pagine AMP siano comuni tag HTML, alcuni vengono sostituiti con tag AMP speciali per la creazione di contenuti avanzati oltre l’HTML di base.

AMP JS: è la libreria JavaScript che gestisce il caricamento delle risorse e garantisce il rendering veloce delle pagine AMP.

Google AMP Cache: è la rete CDN utilizzata per recuperare le pagine AMP memorizzate nella cache. Quando si utilizza la cache AMP di Google, il documento, tutti i file JavaScript e tutte le immagini vengono scaricati dalla stessa fonte utilizzando HTTP 2.0 ottenendo così le massime prestazioni. Inoltre, la cache ha un sistema di convalida integrato che conferma che la pagina funzionerà ed è indipendente da risorse esterne.

Seguono ora le migliori pratiche per creare la versione AMP di una pagina web.

URL delle pagine AMP

Scegli un URL coerente per le tue pagine AMP, preferibilmente come elemento figlio della pagina originale. Ad esempio, supponiamo che tu abbia una pagina all’indirizzo:

• https://www.sito.it/articolo-1/

ebbene un URL coerente per la versione AMP potrebbe essere questo:

• https://www.sito.it/articolo-1/amp/

Consenti solo script asincroni

JavaScript è un linguaggio potente che può modificare quasi ogni parte di una pagina, ma può anche bloccare la creazione del DOM e ritardare il rendering. Per evitare ciò, AMP consente solo il caricamento asincrono di JavaScript. Inoltre, le pagine AMP non possono includere JavaScript protetto da copyright.

Dichiara le dimensioni delle risorse esterne

AMP carica il layout di pagina senza attendere il download delle risorse esterne, poiché separa il layout del documento da quello delle risorse.

Pertanto, le dimensioni delle risorse esterne (come immagini, video, ecc.) devono essere specificate nel codice HTML affinché AMP possa determinare le dimensioni e la posizione di ciascun elemento prima di scaricare le risorse.

Utilizzare solo CSS inline

Il CSS blocca il rendering e il caricamento della pagina, aumentandone spesso le dimensioni. Per tale ragioni nelle pagine AMP sono consentiti solo CSS in linea, la cui dimensione massima non deve superare i 50 kilobyte.

Sebbene abbastanza grande per pagine molto complesse, questa dimensione richiede allo sviluppatore della pagina di mantenere il codice CSS il più pulito possibile.

Carica i font web in modo efficace

L’ottimizzazione dei font web è essenziale per l’efficienza, in quanto le loro dimensioni sono molto grandi. Per una normale pagina web, che presenta file Javascript sincroni e CSS esterni, il browser attende molto tempo per scaricare i font web.

Invece, AMP dichiara zero richieste HTTP fino all’avvio del download dei font web. Questo è possibile per via del caricamento asincrono impostato per tutto il codice JavaScript e perché sono consentiti solo CSS in linea.

Quindi non ci sono richieste HTTP che bloccano al browser il download dei font web.

Riduci al minimo il ricalcolo di stile

Ogni volta che modifichi qualcosa che incide sul layout di una pagina, attivi un ricalcolo di stile che influisce sulla velocità di caricamento perché il browser deve ricalcolare l’intero layout di pagina.

Nelle pagine AMP, tutte le operazioni di lettura DOM vengono eseguite prima di tutte le operazioni di scrittura. Questo assicura che ci sia al massimo un ricalcolo di stile per rendering.

Scopri come il ricalcolo di stile e layout influisce sulle prestazioni di rendering.

Mostra solo animazioni con accelerazione GPU

Utilizza solo animazioni CSS poiché questo assicura che le animazioni vengano accelerate attraverso il processore grafico (GPU). In particolare, le uniche animazioni consentite da AMP sono per le proprietà: transform e opacity.

Determinare la priorità di caricamento delle risorse

L’adozione di AMP prevede il controllo del download di tutte le risorse che compongono una pagina e dovrai determinare la priorità per il caricamento delle risorse, caricando solo quelle necessarie al rendering e rimandando il caricamento delle altre risorse.

Ad esempio, in questo modo immagini e annunci pubblicitari vengono scaricati solo se è probabile che l’utente li veda sullo schermo, man mano che scorre la pagina.

Inoltre, le risorse con caricamento asincrono vengono caricate il più tardi possibile, però anche recuperate il prima possibile.

In questo modo, gli elementi si caricano rapidamente, ma il processore viene utilizzato solo quando le risorse vengono visualizzate dagli utenti.

Indica a Google la versione AMP delle pagine

Una volta completata l’implementazione di AMP, avrai due varianti delle tue pagine: la versione normale (non AMP) e la versione AMP. È importante chiarire correttamente questa relazione ai motori di ricerca.

A tal fine, nella pagina normale occorre inserire l’attributo link rel=”amphtml“, mentre nella pagina AMP andrà inserito il rel canonical.

Riprendendo l’esempio precedente, la pagina normale (https://www.sito.it/articolo-1/) presenterà il riferimento alla versione AMP mediante la sintassi:

<link rel="amphtml" href="https://www.sito.it/articolo-1/amp/" />

La versione AMP, invece, presenterà il rel canonical verso la pagina normale:

<link rel="canonical" href="https://www.sito.it/articolo-1/" />

Qualora un sito sia composto da sole pagine AMP, queste dovrebbero presentare un rel canonical autoreferenziale.

Monitora le pagine AMP in una proprietà dedicata di Google Analytics

Google consiglia di tenere traccia delle pagine AMP in una proprietà separata di Google Analytics, in modo da poter confrontare correttamente le statistiche delle pagine normali e delle pagine AMP.

Limiti di Google AMP

Funzionalità limitate

A causa della rigidità delle linee guida per l’implementazione di AMP, potrebbe non essere possibile replicare tutte le funzionalità previste nella versione normale del tuo sito web. Ciò è particolarmente limitante per i siti ricchi di funzionalità come gli e-commerce e in questi casi è preferibile non utilizzare AMP.

Maggiore controllo di Google sui contenuti

Con la crescente popolarità di AMP, Google ha acquisito un controllo ancora maggiore sugli editori e su come e quando mostrare i contenuti di un sito. Ricordiamoci che Google agirà nel suo interesse, che potrebbe non coincidere con il nostro.

Supporto pubblicitario limitato

Per molti le entrate generate dagli annunci pubblicitari solo la primaria fonte di sostentamento. Le pagine AMP attualmente possono disporre solo di un supporto limitato per la visualizzazione di annunci pubblicitari.

Effetti link building ridotti

Se investi in Link Building, i backlink che puntano alle pagine AMP trovate tramite la ricerca di Google (ad esempio https://www.google.com/amp/s/sito.it), non trasferiranno alcun PageRank al tuo sito, poiché le pagine sono tecnicamente ospitate sui server di Google il quale pubblicherà i contenuti direttamente sul suo dominio (a cui sarà trasferita la link juice).

AMP non è la bacchetta magica

AMP rende il caricamento delle pagine web più veloce, ma non è la bacchetta magica che ti farà avere successo. Rendere il caricamento delle pagine più veloce è sicuramente un aspetto apprezzato da Google, ma se il tuo contenuto non aggiunge alcun valore, la sola velocità di caricamento non ti aiuterà ad ottenere migliori posizionamenti.

Domande frequenti su Google AMP

• Quando devo creare pagine AMP?
• Devo aggiungere le pagine AMP alla Sitemap XML?
• Perché vedo più traffico ma meno interazione dopo l’implementazione di AMP?

Quando devo creare pagine AMP?

AMP non è l’unico modo per offrire agli utenti una buona esperienza di navigazione mobile. Ad esempio, anche il responsive web design aiuta a offrire una buona esperienza mobile.

L’ottimizzazione del codice sorgente e delle immagini, combinata con un uso corretto della cache e un’adeguata infrastruttura per la distribuzione dei contenuti (CDN), consentono di erogare velocemente le pagine agli utenti.

Praticamente puoi ottenere gli stessi risultati che avresti con AMP, mantenendo però il pieno controllo dei tuoi contenuti e delle funzionalità disponibili.

Vediamo alcune domande da porsi per valutare se conviene investire nella creazione di pagine AMP:

• Il tuo sito è già ottimizzato per i dispositivi mobili tramite web design responsive e l’ottimizzazione delle web performance? In questo caso non beneficerai molto dalle pagine AMP e probabilmente non vale la pena investire in tale implementazione.
• La fonte primaria di guadagno del tuo sito sono gli annunci pubblicitari (ad esempio AdSense)? Probabilmente non dovresti implementare AMP, perché il supporto agli annunci è limitato.
• Sei un quotidiano online e stai vedendo mese dopo mese un calo del traffico organico poiché la concorrenza ha implementato AMP? Questa è sicuramente una buona motivazione per implementare le pagine AMP.
• Hai un sito ricco di contenuti che funge da generatore di lead? Potrebbe avere senso valutare l’adozione di AMP, perché farebbe risaltare maggiormente le tue pagine, portando così a più clic e più traffico.

Devo aggiungere le pagine AMP alla Sitemap XML?

Se stai utilizzando sia pagine AMP che pagine normali (non AMP), non devi aggiungere le pagine AMP alla sitemap xml. L’attributo rel=”amphtml” fornisce a Google segnali sufficienti per individuare le pagine AMP.

Devi includere le pagine AMP nella sitemap xml solo nel caso in cui il tuo sito sia costituito esclusivamente da pagine AMP.

Perché vedo più traffico ma meno interazione dopo l’implementazione di AMP?

Ci sono diversi aspetti da prendere in considerazione:

• il monitoraggio dei visitatori sulle pagine AMP non è ancora perfetto. Ad esempio, gli utenti di ritorno possono essere conteggiati due volte;
• i visitatori che interagiscono con il carosello delle notizie di Google possono semplicemente saltare il tuo articolo senza interagire effettivamente con esso;
• le pagine AMP offrono spesso meno funzionalità per interagire con il contenuto, riducendo così il livello generale di interazione e coinvolgimento.

Quando si decide di implementare le pagine AMP è importante stabilire attentamente quali debbano essere i KPI (indicatori di performance) più adatti per valutare le loro performance.

Conclusioni su Google AMP

Google AMP è sicuramente un opportunità, ma bisogna valutare attentamente il rapporto costi/benefici prima di stabilire se implementare o meno questa tecnologia sul proprio sito.

Se ti occorre un supporto professionale per il tuo caso specifico, puoi visitare la pagina dedicata ai servizi SEO oppure valutare una consulenza SEO oraria.

Se, invece, hai dubbi o domande sulle pagine AMP oppure vuoi arricchirci con il tuo punto di vista sull’argomento, non esitare ad utilizzare i commenti.