Il web è in continua evoluzione e per molti imprenditori questo significa dover essere al passo con tutte le novità introdotte da Google. Se non vi adattate, potreste rimanere indietro. Per questo abbiamo pensato fosse importante presentare Google AMP, la loro iniziativa mobile per accelerare il web, illustrandovi alcuni passaggi utili per iniziare a lavorare con Google AMP in WordPress, e condividendo con voi alcuni dei pro e dei contro di questo nuova piattaforma.
- Che Cos’è Google AMP?
- Pro di Google AMP
- Contro di Google AMP
- Come Configurare Google AMP in WordPress
- Convalidare il Vostro Codice Google AMP
Che cos’è Google AMP?
Google AMP (Accelerated Mobile Pages Project) è stato originariamente rilasciato nel mese di ottobre 2015. Il progetto si basa su AMP HTML, un nuovo framework aperto, interamente basato su tecnologie web esistenti, che consente di creare pagine web leggere. Per dirla in modo semplice, offre un modo per pubblicare una versione ridotta delle vostre pagine web correnti.
Fin dal primo giorno, un punto chiave per AMP è stata la velocità. È discutibilmente una delle cose più frustranti del web mobile – a conferma della recente ricerca di Google che mostra che il 53% delle persone lascerà un sito che non riesce a caricare in tre secondi o meno. Questo è il peggiore di tutti i mondi per utenti, aziende, editori, siti web e web mobile nel complesso. – David Besbris, responsabile progetto AMP in Google
Secondo l’ultimo rapporto State of the Online Retail Performance di Akamai, ogni decimo di secondo è importante. Anche un leggero aumento del tempo di caricamento della pagina a 2,8 secondi, ha causato un calo del 2,4% nel tasso di conversione.
Nell’ultimo anno molte grandi aziende hanno adottato Google AMP, tra queste WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, ecc. Secondo quanto afferma Google, Slate ha visto un aumento del 44% di visitatori unici mensili e un 73 % di aumento delle visite per visitatore unico mensile.
Quando una pagina viene servita tramite AMP, in Google questa avrà accanto il simbolo AMP, come mostrato di seguito nella demo del New York Times. Nota, dovete essere su un dispositivo mobile per testarlo. Potete anche utilizzare l’emulatore di dispositivo in Chrome devtools. Il markup dei dati strutturati consente a Google di presentare i vostri contenuti in modo più evidente nei risultati di ricerca. Ad esempio, gli articoli AMP che includono le proprietà di markup appropriate possono ottenere l’ambito carosello nelle SERP, come mostrato di seguito.
Ed ecco un esempio di come appare una pagina AMP nel sito web del New York Times. Come potete vedere, è essenziale e semplificata, ciò che è l’obiettivo di AMP. Questo assicura che la pagina carichi velocemente e offra una migliore usabilità.
Come avviene con qualsiasi nuova piattaforma, dovreste valutare i pro e i contro e decidere se è questa la mossa giusta per la vostra azienda o il vostro sito web.
Pro di Google AMP
- AMP è gratuito e open source.
- AMP può sicuramente migliorare i tempi di caricamento del vostro sito WordPress. E ricordate che la velocità è un fattore di ranking.
- Posizionamenti migliori nelle SERP con possibilità di carosello per un CTR migliore. In una implementazione con un editore popolare, Google AMP ha generato un 600% di CTR!
- Google AMP costringe a rispettare molte delle pratiche raccomandate a proposito delle prestazioni web, come quella di evitare grandi framework CSS e JS.
- Potrebbe influire positivamente sulle vostre conversioni.
- Nell’ultimo anno sono stati apportati molti miglioramenti e le opzioni pubblicitarie sono ora subito disponibili in Google AMP. Ciò significa che i magazine e le nuove pubblicazioni possono mantenere o addirittura aumentare le loro entrate AdSense.
- Ottimizzazione automatica delle immagini (anche conversione in formato WebP!)
- AMP Lite introduce una ulteriore ottimizzazione per connessioni di rete lente. Google ha visto una riduzione complessiva in byte del 45%.
Contro di Google AMP
- AMP non è al momento un fattore di ranking, ma potrebbe esserlo in futuro. Questo potrebbe essere considerato sia un vantaggio che uno svantaggio.
- AMP può essere difficile da implementare e testare se non siete sviluppatori. Tuttavia, per nostra fortuna, la piattaforma di WordPress è un po’ più semplice di altre.
- Presenta una piattaforma separata completamente nuova e funzionalità che bisogna tenere in considerazione. Cosa è successo solo per ottimizzare i nostri siti mobili?
- Potrebbe danneggiare o influenzare le vostre conversioni in modo negativo.
- Sono state segnalate dati statistici di Google AMP assenti in Google Analytics.
- Alcuni hanno riportato un coinvolgimento peggiore e tassi di rimbalzo più elevati.
- Ci sono ancora script e applicazioni di terzi che potrebbero non essere supportati.
- Nessun supporto da alcuni vecchi browser come Internet Explorer 11. Hanno affermato che in generale supporteranno le ultime 2 versioni dei principali browser come Chrome, Firefox, Edge, Safari e Opera. E supportano le versioni desktop, phone, tablet e web view dei rispettivi browser.
- Leggete l’opinione di Jan Dawson sul perché Google AMP sta rendendo più difficile, non più facile, pubblicare sul web.
- Leggete l’articolo di Alex Kras su alcuni dei problemi di Google AMP, con la risposta del responsabile tecnico del progetto AMP da Google.
- Tim Kadlec condivide la sua opinione su Google AMP e sulla necessità di un’alternativa migliore: politiche di performance dei contenuti.
A partire da febbraio 2017, Google AMP ha iniziato a mostrare gli URL diretti dei publisher. In precedenza mostrava solo la versione di Google pubblicata dalla cache. Questo suscitava preoccupazioni dal punto di vista del branding. Per fortuna Google l’ha capito e ha introdotto un cambiamento. Ora, il campo URL di un browser continuerà a mostrare un URL di Google. Tuttavia, l’area dell’intestazione AMP mostrerà un’icona di collegamento o di catena, che chiama pulsante “ancora”. Facendo clic su questo pulsante, sarà visualizzato l’URL diretto del publisher, in modo che questo possa essere facilmente copiato e incollato. Questa non è ancora una soluzione perfetta, ma è sempre meglio di niente.
Ecco un altro esempio di perdita del brand.
Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ
— Syed Balkhi (@syedbalkhi) January 19, 2017
È anche importante notare che, se l’unica versione della pagina mobile esistente è una versione AMP, Google utilizzerà comunque la versione desktop per l’indicizzazione, anche quando Google passa sull’indice mobile first.
So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch
— Jennifer Slegg (@jenstar) November 14, 2016
Come Configurare Google AMP in WordPress
Per fortuna ora è molto più semplice implementare Google AMP in WordPress rispetto a qualche tempo fa. Sono stati fatti molti progressi sui plugin di WordPress e sulla piattaforma nel suo complesso. Ricordate, però, che il vostro codice deve essere convalidato da Google per mostrare la versione AMP del vostro sito nelle SERP. Un plugin trasformerà il vostro post in una versione AMP, ma è Google che decide di mostrare la versione AMP.
Fondamentalmente al vostro post WordPress viene assegnato un URL diverso. Tutto questo viene gestito automaticamente dal plugin di WordPress. In genere /amp o /?amp viene aggiunto al post corrente. Ecco un esempio:
URL del post originale: https://domain.com/blog-post
URL del post AMP: https://domain.com/blog-post/amp/
Google AMP WordPress Plugin
Ci sono al momento 2 popolari plugin per WordPress nella repository che possono aiutarvi a configurare Google AMP. Il primo è il plugin gratuito AMP ufficiale, che è in realtà sviluppato dal team di Automattic.
Al momento in cui scriviamo, il plugin vanta oltre 200.000 installazioni attive, con un punteggio di 3,5 stelle su 5. Potete scaricarlo dalla repository di WordPress o cercarlo all’interno della dashboard alla voce “Aggiungi nuovo” plugin. È possibile personalizzare leggermente l’aspetto nell’editor “Appearance AMP” (come mostrato di seguito). Tuttavia, le opzioni sono abbastanza limitate e dipende da voi come implementare filtri aggiuntivi per funzionalità come AdSense o Analytics.
È anche importante notare che questo supporta solo i post, non le pagine. Sebbene sia stato annunciato che il team sta lavorando per aggiungere questa funzionalità. Qui sotto è riportato un esempio di come appare il nostro post WordPress dopo aver installato il plugin.
Se state cercando un modo semplice per aggiungere ulteriori funzionalità, ecco che entra in gioco il plugin gratuito AMP for WP. Questa è fondamentalmente una versione più avanzata del plugin AMP ufficiale e offre funzionalità e supporto aggiuntivi. È stata sviluppata da Ahmed Kaludi e Mohammed Kaludi, che gestiscono anche un negozio di temi WordPress di successo.
Al momento il plugin vanta oltre 70.000 installazioni attive con una valutazione di 4.6 stelle su 5. Potete scaricarlo dalla repository di WordPress o cercarlo all’interno della dashboard alla voce “Aggiungi nuovo” plugin. Questo plugin vi consente di personalizzare molto di più con la configurazione di Google AMP. Inoltre, supporta le pagine. Di seguito analizzeremo le personalizzazioni e le funzioni disponibili nelle impostazioni del plugin AMP nella dashboard.
In realtà utilizziamo questo plugin anche qui da Kinsta! Potete vedere AMP in esecuzione su questo post se andate su https://kinsta.com/blog/google-amp/amp/. (Aggiornamento: dai primi di settembre, non utilizziamo più AMP nel nostro sito. Date un’occhiata al nostro case study sul motivo per cui abbiamo scelto di disattivare Google AMP). Potete vedere di seguito un esempio nelle SERP di un post del blog di Kinsta, dove c’è il logo AMP.
General
Nella schermata generale, potete aggiungere un logo, personalizzare le dimensioni e anche decidere se volete o meno abilitare AMP sulle pagine. A seconda del sito e del traffico, potreste abilitare AMP solo sul vostro blog (tipi post).
Homepage
Nella sezione Homepage potete attivare o disattivare il supporto per la homepage, ignorare la dimensione dell’immagine di anteprima della home page e scegliere cosa volete che succeda quando gli utenti fanno clic sul logo (andare alla versione AMP o alla versione non AMP).
Page Builder
Nella sezione Page Builder potete attivare l’utilizzo dei widget AMP.
Design
Alla voce Design è possibile avviare il builder dei post o selezionare da un template precostruito. È possibile abilitare HTTPS per la ricerca e aggiungere anche un pulsante “Call Now”. C’è ANCHE un’opzione per i CSS personalizzati. Ad esempio, sul nostro sito aggiungiamo il seguente codice per personalizzare il colore dell’intestazione:
.amp-wp-header {background-color:#5CC0C0;}
Single
Alla voce Single è possibile abilitare le icone social, disabilitare i collegamenti, mostrare la biografia dell’autore e persino modificare le opzioni per i post correlati.
Advertising
Nella schermata Advertisement potete abilitare AdSense e scegliere i posizionamenti. Questo plugin offre uno dei modi più semplici per aggiungere AdSense con Google AMP. Per coloro che si affidano alla pubblicità per finanziare i propri siti, questa può essere una funzionalità molto utile (lettura suggerita: Come aggiungere Google AdSense a WordPress).
Menu AMP
Alla voce Menu potete scegliere se aggiungere o non aggiungere /amp/ alla fine degli URL del menu. Se volete che i vostri visitatori rimangano sul sito AMP, attivate questa impostazione.
Social
Dal menu Social potete aggiungere i social network che volete mostrare sui dispositivi mobili per la condivisione. Per Facebook dovrete registrare un App ID gratuito.
SEO
La schermata SEO è probabilmente una delle più importanti, in quanto determina il modo in cui Google vedrà e classificherà il vostro contenuto AMP. Raccomandiamo di abilitare l’opzione “Meta Description”. Se state utilizzando il plugin Yoast SEO, vi consigliamo di abilitare anche le opzioni “Meta tag from Yoast” e “Yoast Description in ld+jason”.
Analytics
La schermata Analytics vi consente di aggiungere i vostri script di monitoraggio per Google Analytics, così oltre per il Google Tag Manager. Dovrete farlo per assicurarvi di mantenere aggiornati i dati dei rapporti.
Supporta anche Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Measure Measure, StatCounter, HitStats Analytics, Yandex Metrika e Chartbeat Analytics.
Structured Data
La schermata dei dati strutturati consente di personalizzare il logo dei dati strutturati predefinito e l’immagine dei post.
Contact Form
La schermata del modulo di contatto vi consente di abilitare il supporto di Contact Form 7.
Notifications
Nella schermata Notifications potete abilitare le notifiche per mostrare un avviso di cookie. Questo può essere utile per ci risiede in paesi che hanno leggi sulla privacy più restrittive.
Comments
Nela schermata dei commenti è possibile abilitare il supporto per i sistemi di commento di terzi, come i commenti di Disqus e Facebook.
Advanced Settings
Nelle impostazioni avanzate è possibile abilitare il reindirizzamento da mobile. Ricordate che di default AMP sarà abilitato solo per gli utenti mobili che fanno clic sul relativo pulsante nelle SERP. Se un utente mobile visita direttamente il vostro sito, non vedrà la pagina abilitata per AMP, a meno che non attivi il reindirizzamento. In questa schermata è anche possibile inserire codice HTML personalizzato e modificare l’azione del link del footer.
Extensions
Gli sviluppatori hanno a disposizione anche estensioni premium che possono acquistare per estendere ulteriormente le funzionalità del plugin AMP. Alcuni dei più popolari che potrebbero interessarvi sono le opzioni Email, i pulsanti CTA e il supporto dei custom post type.
Ed ecco come appare il nostro post con il plugin AMP for WP in esecuzione sul blog di Kinsta.
Gli stessi sviluppatori di AMP for WP hanno recentemente rilasciato un nuovo plugin, AMP WooCommerce, che consente di abilitare AMP nel vostro negozio ecommerce.
Convalidare il Vostro Codice Google AMP
Dopo aver completato la configurazione di Google AMP nel vostro sito WordPress, dovrete assicurarvi che il vostro codice venga convalidato. In caso contrario, Google non mostrerà la versione AMP nelle SERP. Potete eseguire il vostro sito WordPress nel Google AMP Validator. Questo vi dirà, in basso, se la verifica va a buon fine o no.
Potete anche scaricare l’estensione gratuita AMP per Chrome, che convaliderà ciascuna pagina. Se qualcosa viene visualizzato in rosso, potete fare clic sopra e visualizzare rapidamente gli errori o gli avvisi relativi alla pagina.
Se la pagina non supera la convalida, potreste visualizzare un errore come questo: “Not a valid AMP page.” Nell’esempio che segue, l’errore era dovuto all’utilizzo di tag HTML vecchi e non più supportati, e . Potete consultare l’elenco completo dei tag HTML supportati da AMP. Le pagine AMP non valide non saranno visualizzate come AMP nei risultati di ricerca di Google.
Potete anche controllare il vostro sito per problemi relativi ad AMP in Google Search Console, nella sezione “Search Appearance”. È importante notare che molti utenti hanno segnalato ritardi notevoli con i rapporti AMP in Google Search Console. Questo è molto probabile perché è ancora una piattaforma abbastanza nuova e la scansione non è frequente.
In caso di errori, Google vi notificherà via email che è necessario aggiungere i dati strutturati richiesti alle vostre pagine AMP.
SEO di Google AMP
Un altro aspetto su cui probabilmente vi starete ponendo delle domande riguarda la SEO, perché ora avete due copie della stessa pagina o dello stesso post. Non dovete preoccuparvi di contenuti duplicati perché entrambi i plugin sopra illustrati utilizzano i tag canonici con AMP. I Canonical Tag dicono a Google che il contenuto originale è la versione desktop. Google rileverà automaticamente le pagine AMP del tuo sito poiché la vostra pagina originale viene pubblicata con un tag di intestazione che indirizza Googlebot alla vostra pagina AMP.
Esempio sulla vostra pagina originale:
<link rel="amphtml" href="https://domain.com/amp/">
Esempio sulla vostra pagina AMP:
<link rel="canonical" href="https://domain.com/">
Anche il plugin AMP for WP sopra menzionato funziona perfettamente con il plugin Yoast SEO per aggiungere i tag meta e OG a fini SEO e social. Guardiamo questo esempio.
Monitoraggio New Relic con Google AMP
È inoltre importante notare che il validatore di Google AMP potrebbe non funzionare per i clienti che utilizzano il monitoraggio di New Relic (licenza obbligatoria), a causa di un errore di script di terze parti:
The tag 'script' is disallowed except in specific forms.
Questo perché le pagine HTML formattate per Google AMP non sono autorizzate a contenere JavaScript di terze parti. Il plugin AMP for WP sopra menzionato supporta completamente New Relic. Ma se dovete disabilitare il Browser New Relic nelle pagine AMP, seguite le istruzioni nell’articolo in cui si spiega come disattivare il monitoraggio del browser per specifiche pagine. Potete anche installare il plugin gratuito per WordPress Disabled NewRelic For AMP.
Abilitare AMP per i Collegamenti Esterni con Cloudflare
Cloudflare dispone di una nuova funzione, lanciata di recente, che consente di abilitare i collegamenti mobili accelerati sui collegamenti esterni quando AMP è in esecuzione. Uno dei vantaggi di questa funzionalità è che il contenuto AMP viene caricato in un visualizzatore direttamente sul sito collegato al contenuto. Il che significa che, dopo che il lettore ha terminato di usufruire del contenuto, chiude il viewer e viene riportato al vostro sito. Quindi, in un certo senso, potrebbe aumentare il tempo complessivo di permanenza sul vostro sito. Potete abilitarlo all’interno della dashboard delle performance di Cloudflare.
Riepilogo
Quindi, come potete vedere, ci sono diversi semplici metodi per far funzionare Google AMP sul vostro sito WordPress. Dovreste adottare subito Google AMP? Questo dipende in realtà dal tipo di sito WordPress che gestite. Se avete una rivista o un sito di notizie, potrebbe aver senso implementarlo subito e iniziare a testare le posizioni di AdSense. Se avete un business SaaS, se non state attenti AMP potrebbe finire per danneggiare le vostre conversioni. Google AMP comporta sicuramente un grande cambiamento, soprattutto se avete già un grande traffico mobile. Il nostro consiglio è di iniziare i test, in quanto questo è l’unico modo per sapere se la vostra azienda avrà risultati positivi o negativi.
Avete altri suggerimenti sull’utilizzo di Google AMP con WordPress? Se è così, ci piacerebbe leggerli di seguito nei commenti! In ultimo, ricordatevi di controllare la roadmap ufficiale di AMP.
Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.
Lascia un commento