Come implementare Google AMP su WordPress

Pubblicato in data 14 Settembre 2019 Categoria Consigli WordPress, Seo & Marketing

google amp wordpress

Secondo uno studio condotto da Google, oltre il 50% delle query di ricerca in tutto il mondo sono effettuate tramite dispositivi mobili. Pertanto, garantire che il tuo sito WordPress si carichi rapidamente (e abbia un bell’aspetto) dovrebbe essere una priorità. Per fortuna Google Accelerated Mobile Pages (AMP) semplifica di molto questo compito.

In questo articolo, spiegheremo come implementare AMP in WordPress in due modi:

  1. Utilizzando il plugin AMP per WordPress
  2. Tramite il plugin AMP for WP – Accelerated Mobile Pages

Spiegheremo inoltre che cos’è Google AMP WordPress e come convalidarlo al termine del processo di installazione. Immergiamoci!

Che cos’è AMP per WordPress (e come può beneficiarne il tuo sito)

home page di Google AMP

Google Accelerated Mobile Pages (AMP) è una libreria open source che ti aiuta a creare versioni veloci, scorrevoli e ridotte delle tue pagine web che si adattano perfettamente ai dispositivi mobili.

Google AMP è estremamente intuitivo e si basa su piattaforme e framework esistenti. Inoltre, è completamente compatibile con WordPress.

In breve, Google AMP ti consente di creare un duplicato del tuo sito utilizzando AMP HTML .

Questo processo elimina la maggior parte degli elementi che causano un caricamento lento del tuo sito (JavaScript, script di terze parti, ecc.).

Google AMP quindi analizza ulteriormente e appiattisce il tuo sito, per tempi di caricamento ancora più rapidi. Il risultato sarà simile al seguente:

Un esempio di un sito Web AMP

Google AMP offre numerosi vantaggi, sebbene presenti anche alcuni potenziali svantaggi. Esploriamoli entrambi. I vantaggi includono:

  • Una spinta all’ottimizzazione dei motori di ricerca (SEO). Il vantaggio più evidente offerto da Google AMP è l’aumento della velocità. Poiché la velocità della pagina è un fattore critico quando si tratta di posizionamento dei motori di ricerca (SERP), questo può aiutare a rendere più visibile il tuo sito. Google AMP assicurerà inoltre che le pagine del tuo sito vengano visualizzate nel carosello di Google News, che ha la priorità sopra il posizionamento above the fold nelle ricerche su dispositivi mobili (migliorando ulteriormente la tua SEO).
  • Un’esperienza utente migliorata. Si stima che il 33% di tutte le potenziali vendite fallisca quando un sito web non è ottimizzato per i dispositivi mobili. Uno studio ancora più preoccupante ha rilevato che il 57% degli utenti di Internet ha dichiarato di non raccomandare un’attività con un sito web mobile progettato in modo inadeguato. Google AMP semplifica la creazione di pagine web mobili di facile utilizzo, per aiutarti a evitare queste insidie.
  • Migliori prestazioni del server. Google AMP beneficia di alcune delle principali funzionalità di ottimizzazione di Google. Riduce del 50% l’utilizzo della larghezza di banda delle immagini (senza influire sulla qualità) e aumenta il rendering lato server. Riducendo il carico sul tuo server, AMP aiuta a migliorare le prestazioni del tuo sito.

Di seguito i contro associati all’utilizzo di AMP Google:

  • Limitazioni di CSS e Javascript. Sebbene AMP ti consenta di ottenere tempi di caricamento estremamente rapidi, ciò può andare a discapito degli elementi del branding. AMP rimuoverà grafica ad alta definizione, le animazioni elaborate e altri elementi appariscenti che utilizzano CSS e JavaScript.
  • Vengono visualizzate solo le pagine memorizzate nella cache. Le alte velocità di Google AMP possono essere parzialmente attribuite al fatto che consente a Google di visualizzare le versioni cache delle tue pagine web. Per questo motivo, i tuoi utenti potrebbero non avere sempre accesso all’ultima versione dei tuoi contenuti.
  • Le funzionalità di entrate pubblicitarie sono limitate. Sebbene AMP Google supporti gli annunci pubblicitari , il processo per implementarli è piuttosto complicato. Ha anche un potenziale di integrazione limitato con piattaforme pubblicitarie esterne.

Se questi svantaggi sono sufficienti per farti mettere in pausa, potresti invece considerare di investire in un design web responsivo per il tuo sito.

Se stai cercando un modo semplice e veloce per rendere le tue pagine web belle e funzionali sui dispositivi mobili, vale comunque la pena prendere in considerazione AMP di Google.

Nella prossima sezione tratteremo due metodi per configurare AMP in WordPress, con l’aiuto di alcuni pratici plugin di WordPress per pagine AMP.

Come implementare WordPress AMP utilizzando i plugin

Per implementare AMP Google sul il tuo sito, avrai bisogno di un plugin AMP WordPress.

Prima di procedere con uno dei seguenti metodi, ti consigliamo di eseguire un backup del sito.

Opzione 1: utilizzare il plugin AMP per WordPress

plugin google amp per wordpress

Il plugin AMP per WordPress è uno strumento eccellente se desideri configurare AMP su WordPress in modo rapido e semplice.

Sebbene la versione predefinita abbia pochei funzionalità per personalizzare la configurazione di AMP, le opzioni possono essere estese con l’aiuto di plugin aggiuntivi.

Tratteremo questo processo in seguito. Per ora, esaminiamo come impostare il plugin.

Innanzitutto, seleziona Plugin › Aggiungi nuovo nella dashboard di WordPress.

Inserisci ‘ AMP for WordPress ‘ nella barra di ricerca e cerca il plugin AMP giusto per WordPress. Quindi, installalo e attivalo :

Installa plugin google amp wordpress

Quindi, vai alla nuova scheda Aspetto > AMP nella dashboard. Verrà visualizzata la pagina di personalizzazione AMP.

Una volta lì, seleziona la scheda Design :

Customizer google amp wordpress plugin

Qui, puoi personalizzare la modalità di visualizzazione del tuo sito AMP WordPress e visualizzare in anteprima le modifiche prima di rendere attivo il tuo sito.

È possibile regolare il testo, il collegamento e il colore di sfondo. Quando sei soddisfatto delle modifiche, premi Pubblica nella parte superiore dello schermo.

Puoi anche scegliere se vuoi che post, pagine o entrambi vengano visualizzati su AMP WordPress.

Per fare ciò, torna semplicemente alla dashboard di WordPress e vai su AMP > General :

Configurazione google amp wordpress plugin

Seleziona le caselle in Supported Templates che desideri includere nell’AMP di WordPress e fai clic su Salva modifiche .

Probabilmente noterai che non ci sono molte opzioni di personalizzazione. Per fortuna, ci sono diversi plugin che puoi usare per estendere le tue scelte.

Puoi ad esempio utilizzare Glue for Yoast SEO e AMP per integrare il plugin Yoast SEO nella configurazione AMP Google.

Passa a Plugin › Aggiungi nuovo , quindi trova, installa e attiva il plugin Yoast SEO:

Installa Yoast SEO

Dopodiché, fai lo stesso con il plugin Glue for Yoast SEO & AMP. Quindi, vai a SEO › AMP nella tua dashboard.

Da lì, puoi selezionare se vuoi abilitare post e tipi di media per avere il supporto AMP su WordPress:

Yoast SEO google amp

Quindi, premi il pulsante Salva le modifiche .

È inoltre possibile configurare impostazioni aggiuntive nella scheda Design : puoi impostare un’icona per il tuo sito AMP WordPress, regolare la combinazione di colori ed aggiungere CSS personalizzati:

Yoast google amp wordpress

Ancora una volta, non dimenticare di salvare le modifiche al termine della configurazione del sito.

AMP per WordPress è un plugin eccellente se si desidera aggiungere funzionalità di base AMP Google al proprio sito ma se desideri un maggiore controllo sull’aspetto del tuo sito WordPress AMP (e il potenziale per estenderne ulteriormente le funzionalità), il prossimo plugin WordPress per pagine AMP potrebbe adattarsi meglio alle tue esigenze.

Opzione 2: installare il plugin AMP for WP – Accelerated Mobile Pages

AMP per WP - Schermata della pagina del plugin WordPress per pagine mobili accelerate

Oltre a fornire un’interfaccia elegante e intuitiva per la configurazione delle tue pagine, questo plugin AMP per WordPress può integrarsi con molti strumenti aggiuntivi tra i quali WooCommerce (il plugin di e-commerce leader per WordPress), metriche Alexa , notifiche push OneSignal e altro ancora.

Per utilizzare questo plugin AMP per WordPress, ti consigliamo di accedere a Plugin > Aggiungi nuovo nella dashboard.

Cerca ‘ AMP per WP ‘, quindi installa e scarica il plugin:

installa amp per wordpress

Vai alla nuova scheda AMP nella dashboard di WordPress. Verrà visualizzato un menu a discesa con sezioni per Settings , Design , Extensions e così via.

Diamo un’occhiata più da vicino all’opzione Settings :

Schermata della pagina Impostazioni plug in AMPforWP

Ti consigliamo di iniziare consultando la pratica Guida introduttiva che troverai in questa pagina.

Ti aiuterà a settare in modo ottimale la tua configurazione AMP in WordPress.

Successivamente, è possibile scorrere le varie opzioni offerte da AMP for WP, tra cui:

  • SEO: include le impostazioni della meta descrizione, l’integrazione con i plugin SEO, ecc.
  • Prestazioni: E’ presente una singola impostazione per attivare e disattivare la minimizzazione dei file. La minimizzazione può migliorare ulteriormente la velocità del tuo sito.
  • Analytics: qui puoi impostare l’integrazione con Google Tag Manager e le varie opzioni di analytics.
  • Commenti: E’ possibile selezionare se si desidera includere o meno i commenti di WordPress, Disqus e / o Facebook nell’AMP di WordPress.
  • Impostazioni avanzate: puoi inserire HTML personalizzato per intestazioni e piè di pagina, impostare il mobile redirection e attivare e disattivare le immagini retina.

Assicurati di fare clic su Salva modifiche per ciascuna delle impostazioni di cui sopra dopo averle configurate.

Successivamente, seleziona la scheda Design :

Schermata dell'opzione Temi AMPforWP

In sostanza, è qui che puoi personalizzare l’aspetto del tuo sito AMP WordPress. Per fare ciò, puoi scegliere un tema AMP dedicato tra i vari elencati nel menu a discesa Selettore temi .

Dopo aver scelto un tema, puoi personalizzarne l’aspetto.

Troverai le impostazioni di progettazione per combinazioni di colori e caratteri (che sono elencate nella scheda Globale ), opzioni di visualizzazione di intestazione e piè di pagina, opzioni della barra laterale della home page e altro.

Nella sezione Social , puoi anche selezionare quali pulsanti dei social media desideri visualizzare sul tuo sito AMP WordPress.

Quando sei soddisfatto dell’aspetto del tuo sito AMP, puoi salvare le modifiche.

Puoi anche visualizzarli in anteprima semplicemente navigando su Aspetto > AMP:

AMPforWP aspetto

La versione gratuita di AMP for WP contiene una vasta gamma di funzionalità.

Tuttavia, puoi migliorare in modo significativo l’aspetto e la funzionalità del tuo sito AMP con estensioni premium.

Esistono estensioni per l’implementazione di recensioni (che sono perfette per prodotti o profili immobiliari), che si integrano con AMP WooCommerce Pro , utilizzando custom post types e altro:

Schermata della pagina Estensioni AMPforWP

Sono disponibili per l’acquisto anche temi premium. Puoi visualizzarli tornando su Design > Temi nella dashboard.

Troverai opzioni che si rivolgono in modo specifico a determinati tipi di siti web, come siti di news, magazine e così via.

Inoltre, ci sono alcuni temi polifunzionali eccezionali:

Schermata della pagina dei temi premium di AMPforWP

Se vuoi usufruire di funzionalità ancora più avanzate, ci sono una varietà di piani Pro disponibili per questo plugin che vanno dal piano personale (utilizzo su un sito a 149 $ all’anno) al piano agency (utilizzo su siti illimitati per 499 $ all’anno).

Come convalidare il tuo sito AMP WordPress

Dopo aver configurato uno dei plugin AMP in WordPress, c’è ancora un passo da fare.

Dovrai convalidare il tuo AMP WordPress per assicurarti che sia accessibile e collegato da piattaforme supportate .

La convalida è anche un modo pratico per visualizzare eventuali errori AMP ai fini della risoluzione dei problemi.

Un metodo rapido e semplice per eseguire la convalida AMP prevede l’utilizzo degli strumenti per sviluppatori del browser.

Per fare ciò, dovrai aprire una pagina AMP nel tuo browser preferito (in questo esempio utilizzeremo Google Chrome).

Dovrai quindi aggiungere quanto segue alla fine dell’URL della pagina:

#development=1

Una volta fatto, apri la console degli strumenti per sviluppatori del tuo browser. Se sono presenti errori, verranno evidenziati in rosso, insieme a un’analisi di ciò che ha causato l’errore.

In genere, gli errori di convalida sono causati da prefissi non validi, formattazione e voci di codice errate e / o tag non consentiti.

Un altro metodo di convalida AMP efficace consiste nell’utilizzare l’estensione AMP Validator per Google Chrome e Opera :

Estensione AMP Validator per Google Chrome

Questo strumento fornisce una semplice sovrapposizione di errori (icone rosse) e le relative cause.

Inoltre, se stai eseguendo il AMP validator su una pagina non AMP, apparirà un’icona di estensione blu che ti collega alla versione AMP di quella pagina.

Questa funzione è un modo utile per valutare elementi del tema del tuo sito che potrebbero impedire a WordPress AMP di essere visualizzato correttamente.

Conclusione

Anche qualche secondo in più di tempo di caricamento potrebbe ridurre significativamente il posizionamento sui motori di ricerca del tuo sito (e i tuoi tassi di conversione).

Per fortuna l’utilizzo di Google AMP ti aiuta affinchè le pagine del tuo sito vengano caricate alla velocità della luce sui dispositivi mobili.

Inoltre, la configurazione e la personalizzazione di AMP per WordPress è semplice e diretta, purché si utilizzi il plugin WordPress per Accelerated Mobile Pages giusto.