Come installare AMP Google su 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 AMP acronimo di accelerated mobile pages semplifica di molto questo compito.

In questo articolo, spiegheremo come installare AMP Google su 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’è AMP Google e come convalidarlo al termine del processo di installazione.

Mettiamoci subito al lavoro!

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

Google A M P Accelerated Mobile Pages è 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.

AMP è estremamente intuitivo e si basa su piattaforme e framework esistenti. Inoltre, è completamente compatibile con WordPress. In breve, 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.).

AMP quindi analizza ulteriormente e appiattisce il tuo sito, per performance del sito migliori. Il risultato sarà simile al seguente:

Il progetto 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 è l’aumento della velocità. Poiché la velocità di caricamento della pagina è un fattore critico quando si tratta di posizionamento dei risultati di ricerca (SERP), questo può aiutare a rendere più visibile il tuo sito. AMP Google 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).
• Una migliore user experience (esperienza utente). 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. AMP semplifica la creazione di pagine mobili di facile utilizzo, per aiutarti a evitare queste insidie.
• Migliori prestazioni del server. AMP Google 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, aiuta a migliorare le prestazioni del tuo sito.

Di seguito i contro associati all’utilizzo di Google Accelerated Mobile Pages:

• Limitazioni di CSS e Javascript. Sebbene A M P 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 responsive 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 Google.

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

In che modo AMP Google migliora la velocità?

Il framework open source di AMP è stato progettato per sfruttare le tecnologie web esistenti e basarsi su di esse. Ecco perché, funziona immediatamente nei content management system come WordPress.

AMP segue un framework standardizzato per creare pagine web e garantisce che tutte le pagine web esistenti possano adattarsi a tale framework. In termini leggermente più tecnici , consente solo script asincroni, non consente i meccanismi esterni di blocco del rendering, consente solo i CSS inline e molto altro.

In poche parole, AMP esegue innanzitutto il rendering del layout della pagina web (quasi istantaneamente) e carica i contenuti in modo prioritario. Elimina qualsiasi attesa di risorse e riduce al minimo il numero di richieste. Quando tutti questi fattori funzionano in perfetta armonia tra loro, si ottiene un sito web velocissimo che si carica quasi in un istante.

Dai un’occhiata al seguente test di velocità compilato da PenguinWP , che mostra “l’effetto AMP”. Utilizzando AMP, sono stati in grado di:

• Aumentare il punteggio PageSpeed ​​di 3 punti
• Ridurre il tempo di caricamento della pagina del 72% da 5 a 1,4 secondi!
• Ridurre le dimensioni della pagina dell’80% e il numero di richieste dell’82%

Ecco la tabella con i risultati:

Conservazione del contenuto

Accelerated Mobile Pages è stato progettato per rendere il web veloce e più responsive per i dispositivi mobili. Lo ha fatto rimuovendo alcune funzionalità non essenziali delle tecnologie web esistenti.

Ciò non significa che tutte le fantastiche funzionalità del web moderno vengano rimosse. No. Esegue semplicemente la migrazione di tutte queste funzionalità avanzate in un framework standardizzato con spazio di manovra minimo.

AMP supporta pienamente caroselli di immagini, mappe, plug-n social, visualizzazioni di dati e video per rendere le storie degli editori più interattive e quindi distinguersi.

Come installare AMP su WordPress utilizzando i plugin

Per implementare AMP pages sul il tuo sito, avrai bisogno di un plugin WordPress. Prima di procedere con uno dei seguenti metodi e le linee guida, ti consigliamo di eseguire un backup del sito.

Opzione 1: utilizzare il plugin ufficiale 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 poche funzionalità per personalizzare la configurazione, 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 giusto..

Quindi, installalo e attivalo :

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

Una volta lì, seleziona la scheda Design :

Qui, puoi personalizzare la modalità di visualizzazione del tuo sito 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 :

Seleziona le caselle in Supported Templates che desideri includere e fai clic su Salva modifiche .

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

Puoi ad esempio utilizzare Glue for Yoast SEO & AMP per integrare il plugin Yoast SEO nella configurazione Accelerated Mobile Pages.

Passa a Plugin › Aggiungi nuovo , quindi trova, installa e attiva il plugin 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 Accelerated Mobile Pages su WordPress:

Quindi, premi il pulsante Salva le modifiche .

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

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

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

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

Oltre a fornire un’interfaccia elegante e intuitiva per la configurazione delle tue pagine, questo plugin 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 , accedi a Plugin > Aggiungi nuovo nella dashboard.

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

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 :

Ti consigliamo di iniziare consultando la pratica Guida introduttiva che troverai in questa pagina che aiuterà a impostare in modo ottimale la tua configurazione AMP in WordPress.

Successivamente, è possibile scorrere le varie opzioni offerte dal plugin, 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 minificazione dei file. La minificazione può migliorare ulteriormente la velocità di caricamento 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..
• Impostazioni avanzate: puoi inserire HTML personalizzato per intestazioni e piè di pagina, impostare il mobile redirection e attivare e disattivare le immagini retina.

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

Successivamente, seleziona la scheda Design :

In sostanza, è qui che puoi personalizzare l’aspetto del tuo sito. Per fare ciò, puoi scegliere un tema 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

Quando sei soddisfatto dell’aspetto del tuo sito, puoi salvare le modifiche. Puoi anche visualizzarli in anteprima semplicemente navigando su Aspetto > AMP:

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 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 type e altro:

Sono disponibili 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:

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 WordPress, c’è ancora un passo da fare : dovrai convalidarlo per assicurarti che sia accessibile e collegato da piattaforme supportate. La convalida è anche un modo pratico per visualizzare eventuali errori 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 efficace consiste nell’utilizzare l’estensione AMP Validator per Google Chrome e Opera :

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 AMP ti aiuta affinchè le pagine del tuo sito vengano caricate alla velocità della luce sui dispositivi mobili.

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

Buon lavoro!