HomeWeb marketingSito WebGoogle AMP per WordPress: Guida completa

Google AMP per WordPress: Guida completa

Grazie a questa guida imparerai a installare e configurare correttamente Google AMP sul tuo sito Wordpress in pochi passaggi. Otterrai risultati eccezionali in termini di velocità di caricamento delle pagine e migliorerai le performance del tuo sito.

Google AMP per WordPress: Guida completa

Quick links

Grazie a questa guida imparerai a installare e configurare correttamente Google AMP sul tuo sito WordPress in pochi passaggi. Otterrai risultati eccezionali in termini di velocità di caricamento delle pagine e migliorerai le performance del tuo sito.

Sicuramente in questo ultimo periodo ti sarà capitato di sentire parlare di Google AMP (Accelerated Mobile Pages) o di imbatterti sempre più spesso in risultati nella SERP come questo:

Google AMP Screenshot

Lo scorso anno Google ha lanciato il progetto AMP (acronimo di Accelerated Mobile Pages): un framework che permette di caricare da mobile pagine web in tempi ridottissimi.

L’obiettivo del progetto AMP è quello di rendere fruibili tutti quei contenuti che sono troppo “pesanti” da caricare per un dispositivo mobile o che peccano in termini di User Experience.

Quante volte sei uscito da un sito web perché da smartphone la pagina era troppo lenta a caricare o perché i contenuti non erano di facile accesso?

Io lo faccio sempre!

Ma come implementarlo su un sito? Procediamo con ordine.

Ho diviso questa guida in due parti:

  • Come funziona Google AMP
  • Come integrare Google AMP su WordPress

In questo modo capirai come lavora l’Accelerator Mobile Pages e sarai guidato passo passo nell’installazione.

Come funziona Google AMP

Dal punto di vista tecnico AMP rende più veloce il caricamento della pagina in tre modi:

  1. riducendo la quantità di codice Javascript delle pagine
  2. salvando sul server di Google la copia cache delle pagine in modo da non dover rimandare al server dove è ospitato il sito
  3. caricando solo le risorse necessarie (es. immagini, iframe e annunci pubblicitari)

AMP crea una “versione alternativa” del sito che segue le specifiche tecniche definite da AMP project.

In altre parole crea un HTML basico e ottimizzato per l’esperienza mobile.

Le pagine create con AMP hanno un loro indirizzo, ad esempio: nomedominio.it/nomepagina/amp.

L’introduzione dell’AMP ha portato un notevole cambiamento al funzionamento di Google.

I contenuti dei siti AMP vengono immagazzinati da Google sui propri server. Quando un utente accede ad una pagina non viene indirizzato alla versione originale del sito ma a una versione cache interna a Google.

L’utente di fatto non lascia mai il motore di ricerca, infatti gli url della versione AMP di un sito presentano questo schema: google.it/amp/nomedominio.it/nomepagina/amp

Google smette di essere un indice di risultati di ricerca che rimanda ad altri siti per diventare un grande archivio di contenuti a cui gli utenti accedono senza mai uscirne.

In tal senso Google AMP è simile a Facebook Instant Articles, un servizio che permette agli editori di pubblicare articoli in un formato adatto all’app di Facebook che li ospiterà nei suoi server, senza che l’utente debba essere reindirizzato ad alcun sito esterno tramite link.

Ora passiamo alla pratica! Vediamo come implementare Google AMP su un sito WordPress.

Come implementare Google AMP su WordPress

Una volta capito cosa rende Google AMP veramente performante vediamo come integrarlo e come settarlo su un sito web in WordPress.

Cosa serve per iniziare:

1. Installazione dei Plugin

Installa tutti i Plugin elencati e attivali.

Plugin WordPress AMP è il plugin “ufficiale” di Google AMP e ti permetterà di creare una copia AMP dei tuoi articoli e delle pagine del sito.

Plugin AMP for WP – Accelerated Mobile Pages e la sua estensione plugin Advanced AMP ADS ti consentiranno di personalizzare le tua versione del sito AMP.

installazione plugin AMP

In alcuni casi, dopo l’attivazione dei plugin, sarà necessario fare un refresh dei permalink. Per farlo vai su Impostazione > Permalink > clicca su Salva le modifiche.

WordPress rigenererà così tutti gli url dei contenuti fino a quel momento caricati e utilizzerà le nuove impostazioni per quelli futuri.

N.B. Se usi un plugin della cache sul tuo sito, ricordati di disattivarlo mentre procedi all’implementazione di AMP.

2. Personalizza la versione AMP del tuo sito

Dopo aver attivato i plugin passa alla personalizzazione della versione del sito AMP.

Nel menu di WordPress troverai una nuova voce: AMP. Clicca e vai su Getting Started.

personalizzare AMP

Qui puoi iniziare con il personalizzare il tuo sito. Aggiungi il logo, imposta il codice di monitoraggio di Google Analitycs, aggiungi il testo dei cookies ecc.

Ma vediamo le voci nel dettaglio:

  • General: In questa sezione puoi aggiungere il logo che apparirà sul sito in versione AMP.
  • Homepage: Se vuoi attivare la homepage e scegliere una front page personalizzata.
  • Analytics: In questa cartella puoi inserire il codice di monitoraggio di Analytics per analizzare il traffico AMP. Ti consiglio di creare una nuova proprietà dedicata solo alle pagine AMP.
  • Design: Per modificare colori, i metadati da visualizzare, le icone ecc.
  • SEO: Funziona solo con SEO by Yoast attivato e ti permette di modificare alcuni parametri come i tag e metadati su AMP.
  • Menu: Qui decidi se vuoi aggiungere o meno il menu delle pagine AMP.
  • Advertisement: Qui puoi aggiungere i banner pubblicitari AdSense alle pagine AMP.
  • Single: Impostazioni relative ai post.
  • Social Share: Ti permette di scegliere quali social attivare o meno.
  • Structured Data: Serve a configurare i dati strutturati di Google.
  • Notifications: Qui puoi inserire il messaggio di utilizzo cookies.
  • Translation Panel: Per tradurre le varie voci che di default sono in lingua inglese.
  • Comments: Serve per attivare i commenti Disqus.
  • Advance Settings: Altre configurazioni di personalizzazione.

Ti consiglio di prestare attenzione a tutti i campi del setting al fine di ottenere un lavoro ben fatto e garantire all’utente del tuo sito la migliore esperienza possibile.

Ti gioverà tanto in tempo di permanenza sulla pagina.

Dai miei test mi sono accorto di come i tempi medi sulle pagine /amp siano notevolmente più lunghi rispetto a quelle senza.

tempi su pagina AMP

Come puoi notare dall’immagine sopra i tempi di permanenza media sulla pagina AMP sono circa 5 minuti più lunghi rispetto alla stessa pagina Non-AMP.

3. Impostare gli annunci Google AdSense su AMP

La versione base di AMP for WP – Accelerated Mobile Pages ti permette di inserire solo 4 annunci pubblicitari in posizioni prestabilite.

Per avere una maggiore personalizzazione, ma soprattutto per massimizzare i guadagni del tuo sito ti consiglio di acquistare l’estensione Advanced AMP ADS: 19,99 $ ben spesi!!

Scariare l'estenzione AMP ADS

Si apriranno le porte di un nuovo mondo!

Ti voglio svelare un trucco per ottenere il massimo dagli annunci.

In molti mi chiedono dove è meglio posizionare gli annunci. In realtà una risposta esatta non esiste.

Esistono piuttosto delle best practice che è giusto seguire e partendo da queste fare esperimenti per trovare la soluzione migliore al sito.

Partendo da questo assunto il mio consiglio è quello di inserire 3 annunci sulle pagine /amp posizionati in questa maniera:

  • il primo dopo 3 paragrafi
  • il secondo a metà articolo/pagina
  • il terzo a fine articolo/pagina

Inserire ADV dopo il terzo paragrafo AMP

4. Testare le pagine AMP e implementare Google Search Console

Per evitare errori che possono compromettere il lavoro fatto fin qui testa le tue pagine /amp con questo tool gratuito di Google:

https://search.google.com/search-console/amp

Test delle pagine AMP

Se non ci sono errori clicca su Invia a Google.

A questo punto vai su Google Search Console > Aspetto nella ricerca > Accelerated Mobile Pages e aspetta qualche giorno affinché si indicizzino le pagine AMP.

Presta attenzione agli errori che possono venirsi a creare. La maggior parte delle volte sono problemi non critici relativi a tag obsoleti.

Alcune considerazioni su Google AMP

Integrare AMP su un sito web è sicuramente un fattore positivo per migliorare l’esperienza utente di un visitatore e per rendere velocissimo il sito.

test pingdom AMP

Ma non tutti i siti hanno bisogno di questa integrazione.

Blog, siti di news, e-commerce, directory di film o di videogiochi hanno sicuramente giovamento da AMP.

Al contrario siti internet con elementi come mappe, moduli contatti, pop-up e campi compilabili non sono ancora compatibili con questa tecnologia.

Un consiglio che mi sento di darti è quello di verificare tramite Google Analitycs il numero di accessi al sito da mobile.

Se supera il 50% e la tipologia di sito web lo permette allora puoi pensare di integrare AMP project.

Un’altra considerazione che va fatta è: Google AMP influisce positivamente lato SEO?

A questa domanda mi sento di rispondere così: Si e No.

Si perché migliorando in termini di velocità e tempo di permanenza su pagina si hanno migliori chance di essere premiati da Google.

No perché integrare AMP in un sito non è un fattore di posizionamento SEO ma rappresenta soltanto un segnale inviato a Google di buona user experience del sito web sui dispositivi mobile.

In questo post sul blog ufficiale di ampproject viene mostrato un case study sui vantaggi dell’AMP lato SEO di Wired.com.

E tu hai integrato Google AMP sul tuo sito o blog?
Raccontaci la tua esperienza, potrebbe essere d’aiuto a tanti che come te hanno trovato difficoltà a implementare AMP sul loro sito web.