Andiamo a vedere come ho realizzato la versione AMP di questo sito, costruito mediante CMS Wordpress.

Sicuramente questo caso studio non può esser valido per tutte le situazioni, ma potrebbe essere un punto di partenza per comprendere le azioni necessarie a:

• comprendere se è necessaria una versione AMP del nostro sito;
• sviluppare una versione Accelerated Mobile Page;
• analizzare gli errori e correggerli;

AMP: perchè svilupparlo e per quali siti web

Come ho spiegato in altri articoli prima di passare ad una versione AMP per il propio sito è necessario capire a cosa serve questa tecnologia e che vantaggi/svantaggi porta al nostro sito.
Sommario

• AMP: perchè svilupparlo e per quali siti
  • A cosa serve AMP
    • Come funziona
  • Come deve essere il nostro sito
  • Quali siti conviene AMPizzare?
    • Analisi degli accessi: comprendere se realizzare una versione AMP dei contenuti
  • Realizzare una versione AMP di un sito Wordpress
    • Testare AMP su una versione locale
    • Installare le plugin
    • Configurare l'aspetto della pagina
      • I tipi di post con supporto AMP
      • Configurare il Design
      • Inserire AMP Analytics
      • Analizzare gli errori delle pagine e correggerli
        • Come funzionano le plugin AMP su Wordpress
        • Che cos'è il "contenuto"
        • L'analisi del mio contenuto
        • Effettuare la pulizia del codice di kk star ratings
      • Modifiche da sito locale a sito di produzione
    • Analizzare l'indicizzazione delle pagine AMP con Google Search Console
    • Differenze nei tempi di caricamento

In più ricordate, pur se dal motore di ricerca Google ci fanno sapere che le pagine AMP entreranno in SERP e alcuni SEO negli Stati Uniti hanno già visto questa tipologia di contenuti indicizzati, ad oggi sulle SERP italiane non si scorgono ancora versione Accelerated Mobile Page dei risultati di ricerca se non per i siti di news.

Caso studio: i diversi aspetti necessari per sviluppare la versione #AMP di un sito #Wordpress Share on X

A cosa serve AMP?

Il linguaggio di markup AMP permette di realizzare una versione del nostro sito, per i dispositivi mobile, dai tempi di caricamento estremamente ridotti.

Per questo è però necessario rinunciare a:

• una grafica personalizzata delle nostre pagine, passando ad un layout abbastanza "standard";
• all'interazione con la nostra utenza, a causa della mancanza dei form;
• all'interattività delle nostre pagine, in quanto non è possibile utilizzare animazioni e/o Javascript;

Attenzione! Una versione AMP non si posiziona meglio sui motori di ricerca, per cui se è quello il vostro scopo, lasciate perdere.

Come funziona AMP

Chiedersi (e rispondersi) come funziona AMP è la domanda principale per capire se il nostro sito necessita del lavoro necessario a realizzare una versione Accelerated Mobile Page.

Schematizzando possiamo infatti dire che ad oggi AMP funziona così:

• realizzo una versione AMP dei miei contenuti, a cui direttamente dal mio sito l'utenza difficilmente potrebbe arrivare;
• il motore di ricerca legge che esiste una versione AMP delle mie pagine e agli utenti provenienti da device mobile, quando effettuano una ricerca, mostra l'URL che punta alla versione AMPizzata dei miei contenuti;
• l'utenza (da device mobile) atterra su una versione Accelerated Mobile Page, ma al secondo click su URL corrispondente al mio dominio passa alla versione classica;

Di nostro non è opportuno diffondere i link AMP del nostro sito perchè potrebbero arrivare a utenti che navigano da desktop, e che rimarrebbero delusi da una versione così scarna delle nostre pagine.

Come deve essere il nostro sito?

Prima di realizzare una versione AMP del nostro sito è opportuno controllare che il dominio su cui ci accingeremo a lavorare sia già ottimizzato per i device mobile. Grazie a questa tecnologia infatti non possiamo pensare di migliorare l'usabilità globale della nostra utenza che proviene dai device mobile, ma al massimo migliorare l'accesso delle informazioni relative alla pagina di atterraggio iniziale. I visitatori infatti potranno poi a seguire navigare in altre pagine, che se non ottimizzate per smartphone/tablet potrebbero farli fuggire.

Quali siti conviene AMPizzare?

Come accennato nel paragrafo precedente non tutti i siti necessitano di una versione AMP.

Sicuramente potrebbero trovare giovamento tutti i portali di notizie, le directory di film e/o videogame, i siti di ricette, i blog, le pagine prodotto degli e-commerce, mentre per i siti con pagine comprensive di elementi interattivi come form, mappe, animazioni, etc non è opportuno realizzare una versione AMP delle pagine in quanto:

• il markup Accelerated Mobile Page non supporta molti elementi necessari a pagine di questo tipo e per questo il codice non verrebbe validato;
• nella versione AMP il sito perderebbe il valore aggiunto e la finalità del contenuto, dato da tali elementi alla pagina, pur rendendo più veloce il caricamento della stessa all'utenza mobile.

Comprendere se realizzare una versione AMP dei contenuti analizzando gli accessi

Analizzando gli accessi al nostro sito potremo capire:

• quant'è la percentuale di utenza mobile;
• il comportamento di questa utenza (tempo sulla pagina, rimbalzo e azioni che effettua);
• su che tipologia di contenuti atterra quando proviene da motore di ricerca;

Dopo aver esaminato i dati potremo così capire se (a patto di aver ottimizzato tutti gli altri fattori come la versione mobile, la SEO on-site, etc):

• i nostri utenti provengono da mobile: ad esempio un sito molto tecnico, dedicato ai programmatori potrebbe avere accessi molto bassi da device mobile, in quanto chi atterra sulle pagine è in cerca di codice da utilizzare mentre lavora e per questo proviene per lo più da computer desktop;
• quali contenuti vengono visionati: se nel nostro sito abbiamo contenuti informativi, che si possono tranquillamente rendere AMP, ma gli accessi da motore di ricerca li abbiamo solamente su pagine che in versione Accelerated Mobile diventano inusabili, inutili e magari nemmeno validate per colpa di elementi interattivi non AMPizzabili, non è conveniente effettuare una versione AMP.

E' possibile effettuare queste semplici analisi con Google Analytics collegato alla Search Console.

Torna al sommario

Come realizzare una versione AMP di un sito Wordpress

Dopo aver deciso di sviluppare una versione AMP per il nostro sito, realizzato mediante Wordpress, è opportuno scegliere quale plugin utilizzare.

Ve ne sono diversi e su questo sito vi ho parlato in passato di quello di Page Frog (Facebook Instant Articles & Google AMP Pages) e del software realizzato dalla Automaticc (AMP), ma nella directory di Wordpress dei plugin ve ne sono ad oggi molti altri.

Di mio ho scelto di installare quest'ultimo per una serie di motivi:

• Automattic vuol dire praticamente Wordpress, che in sintesi è garanzia nella realizzazione di software per WP;
• la comunità di sviluppo di questo plugin vede diverse figure lavorare su questo software;
• mi sembra siano stati segnalati meno bug rispetto agli altri plugin;
• lo utilizzano più persone e ha più installazioni attive;
• è molto leggero e fa solamente quello per cui è nato: realizzare una versione AMP dei nostri contenuti;
• gli aggiornamenti mi sembrano più frequenti rispetto alle altre plugin;

Poi per aggiungere il codice di AMP analytics (il codice di tracciamento classico NON funziona) e stilizzare un pochino l'aspetto delle nostre future e scarne pagine AMP ho installato un altro plugin, realizzato dal team di Joost de Valk: Glue for Yoast SEO & AMP.

Testare AMP su una versione locale del sito

Realizzare una versione AMP del nostro sito è una importante modifica, in quanto genereremo un grosso numero di pagine duplicate. Prima di sottoporle alla scansione da parte del motore di ricerca è opportuno controllare che si visualizzino correttamente e che siano realizzate con codice valido. Per questo conviene effettuare una copia del nostro sito e installarla su un server locale o di test.

Dopo aver effettuato tutte le prove e le dovute analisi possiamo pensare di realizzare le modifiche all'area di produzione e al sito online.

Installare le plugin per AMP

L'installazione delle due plugin è quella classica di Wordpress, unico appunto è di fare attenzione all'ordine in cui vengono attivate e sopratutto alle dipendenze di Glue for Yoast SEO & AMP. Questa plugin infatti utilizza i metadati SEO configurati mediante Yoast e senza non può funzionare.

Quindi, in questo caso che andiamo a analizzare, è opportuno prevedere che:

• sia già stato installato e configurato Yoast SEO;
• venga installata e attivata la plugin AMP dell'Automattic;
• venga installate e attivato Glue for Yoast SEO & AMP;

Dopo aver seguito questa procedura avremo una versione AMP di tutti i nostri articoli, che potremo raggiungere aggiungendo il suffisso /amp/ ai nostri permalinks, nel caso li abbiamo configurati "parlanti", ossia con una struttura diversa da quella semplice. Se i nostri permalink sono alla configurazione di default di Wordpress (e in termini SEO questo non è un bene) possiamo raggiungere la versione AMP dei nostri articoli aggiungendo il suffisso ?amp=1 ai nostri URL.

Come potrete vedere la plugin dell'Automattic incomincia a funzionare non appena viene attivata, senza bisogno di ulteriori impostazioni. Se avete problemi la prima cosa da provare a fare è andare, dal pannello di controllo di Wordpress sotto a Impostazioni > Permalink e premere sul bottone Salva le modifiche, per rigenerare tutti i permalink.

Configurare l'aspetto della pagina AMP

Grazie all'estensione della plugin di Yoast per AMP possiamo effettuare alcune modifiche all'aspetto del nostro scarno layout per i contenuti visualizzati con codice AMPizzato.

Per far questo accediamo alla nuova voce di menù che è possibile trovare sotto a SEO > AMP e configuriamo alcuni aspetti delle pagine superveloci per i device mobile.

I tipi di post con supporto AMP

Grazie a questa estensione di Yoast possiamo attivare una versione AMP non soltanto degli articoli, ma anche di altri tipi di post Wordpress.

Nel mio caso ho lasciato selezionati solamente gli articoli, in quanto per le Pagine, i Media e (nel mio caso, trattandosi di un custom post type) le Visualizzazioni non volevo generare una versione AMP.

Configurare il Design

Come potete vedere dallo screenshot a seguire possiamo impostare un minimo l'aspetto grafico della versione AMP dei nostri contenuti.

Alla nostra pagina possiamo associare una icona, che comparirà in alto a sinistra, di dimensioni minime 32x32px. Se, come nel mio caso, avete già impostato una icona del vostro sito per i device Apple la potete riutilizzare in questo caso.

Di mio non ho poi messo una immagine di default, che comparirà in alto nella versione AMP di tutti i miei articoli, per non annoiare l'utenza che si potrebbe rivedere lo stesso file grafico in tutte le pagine, ma ho stilizzato i colori dei contenuti e dei link utilizzando lo schema colori usato in passato per coordinare l'aspetto dei browser dell'utenza mobile a questo sito.

Aggiornamento della plugin AMP 0.4

Attenzione! A partire dalla versione 0.4 della plugin AMP dell'Automattic è possibile configurare i colori della barra dell'header direttamente con questo software. Queste impostazioni sovrascrivono le informazioni fornite da Glue di Yoast, per cui fate attenzione configurare i colori. Per editare i colori della barra in alto del vostro sito in versione AMP, una volta loggati come amministratori nel vostro Wordpress, dirigetevi su Aspetto > AMP, dove potrete impostare i colori corretti.

Ho poi aggiunto i metag per uniformare la barra dell'URL del browser nel box Extra code, dove è possibile aggiungere del codice suppletivo tra i tag <head> della versione AMP. Grazie a questo sistema confido che in futuro l'utenza, quando arriverà dal motore di ricerca Google con browser Chrome su device mobile, vedrà le mie pagine AMP più o meno come a seguire.

Inserire AMP Analytics

In ultimo arriva un aspetto importante per il nostro sito: continuare a tracciare gli accessi quando l'utenza visualizza la versione AMP del nostro sito.

Per questo è opportuno sapere che:

• nelle nostre pagine AMP non verrà mostrato nessun codice di tracciamento, in quanto è come se avessero un tema grafico totalmente diverso da quello impostato;
• il normale codice di Google Analytics non funziona e ne serve uno AMP Analytics;

Quindi Yoast per risolvere questo problema ha previsto un tab, nelle sue impostazioni, in cui impostare il codice AMP Analytics, a cui dovremo aggiungere il nostro ID di monitoraggio.

Per cui entriamo in Google Analytics, selezioniamo la proprietà relativa al nostro sito e dirigiamoci su Amministrazione > Proprietà > Informazioni sul monitoraggio > Codice di monitoraggio recuperiamo il nostro ID e, nel codice a seguire, sostituiamolo a XX-XXXXXXXX-X.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "XX-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

Copiamo e incolliamo poi il nuovo codice di tracciamento AMP Analytics nella text box prevista da Yoast e salviamo le modifiche.

Il codice funzionerà, acquisendo le visite quando provengono sulla pagina, ma devo dire che rispetto a quello classico ho notato un problema: pur se ho escluso alcuni IP statici da Analytics, per non "sporcare le visite", questo codice le prende lo stesso.

Analizzare gli errori delle pagine e correggerli

Dopo aver configurato le plugin, prima di effettuare la configurazione sul sito online, è opportuno comprendere quali e quanti errori generano le nostre pagine AMPizzate in modo tale da poterli correggere.

Torna al sommario

Come funzionano le plugin AMP su Wordpress

Per risolvere i problemi è prima necessario capire nel dettaglio il funzionamento delle diverse plugin AMP, in quanto il sistema con cui realizzano una versione AMPizzata fra loro è lo stesso: realizzare un nuovo layout secondo le specifiche del codice superveloce per device mobile e con solo markup AMP.

In pratica nella versione AMP le plugin recuperano le informazioni relative a:

• Titolo del post;
• Autore;
• Data;
• Categoria;
• Tag;
• Contenuto;
• Metatag;

Queste informazioni vengono poi utilizzate nel layout con codice di markup AMP valido.

Per cui se andiamo a sporcare uno dei campi sopra elencati, con codice che non è possibile validare, avremo errori nell'analisi della nostra nuova pagina AMP. In particolare e nella maggioranza dei casi è il contenuto ad essere "sporco", per colpa delle plugin che iniettano shortcode o markup HTML/Javascript non codificabile in una versione Accelerated Mobile Page e non, come pensa qualcuno, per colpa del Tema grafico in uso.

Che cos'è il "contenuto"

Quando su Wordpress realizziamo un nuovo articolo o pagina, all'interno dell'editor visuale, il CMS immagazzina le informazioni nel db associandole ad un campo relativo al contenuto.

Quando vogliamo far comparire quel contenuto è possibile utilizzare un oggetto del Codex di WP definito the_content();.

L'analisi del mio contenuto

Ad esempio nel mio caso ho codice HTML particolare dovuto, in alcuni articoli, al Visual Composer e in tutti per kk star ratings e Better Click To Tweet.

Analizzando i singoli casi, con il tool online per l'analisi del markup AMP, mi sono reso conto che:

• la quasi totalità del codice (e relativi shortcode) del Visual Composer viene pulito dalla plugin dell'Automattic, tranne alcuni markup HTML non convertibili in AMP (ad esempio i grafici generati dinamicamente);
• il codice definito per le review di kk star rating è invalidabile;
• il markup di Better Click To Tweet viene validato e visualizzato, anche se devo dire poco usabile;

Per questo ho deciso di:

• non fare nulla per i grafici realizzati con Visual Composer, gli articoli che li hanno necessitano di quel contenuto altrimenti perdono il loro senso, per cui è giusto che nella versione AMP non si possano visualizzare;
• pulire il contenuto dal markup di kk star ratings;

Come ho effettuato la pulizia del codice di kk star ratings

Per far visualizzare le review di kk star ratings al di fuori del contenuto, ossia non all'interno di quel che viene mostrato quando richiamiamo l'oggetto the_content(); nelle nostre pagine, è necessario spegnere l'azione del plugin delle review per tutto il sito e farlo comparire nel nostro layout, in un punto a nostra scelta.

Ho quindi aperto il file che fa visualizzare i miei articoli (tendenzialmente è sempre il file single.php, anche se nel mio caso è un altro) e subito dopo la chiamata all'oggetto the_content(); ho inserito il seguente codice:

<?php if(function_exists("kk_star_ratings")) : echo kk_star_ratings($pid); endif; ?>

Questa riga dice al CMS: se la plugin kk star ratings è stata attivata (nel mio caso per solo i post) allora mostra le recensioni per questo contenuto definito dal suo id ($pid).

Così facendo le review si vedranno solamente quando viene visualizzato il sito nella versione classica, mentre in quella AMP non compariranno, in quanto come spiegato poco prima invalidabili come codice.

Effettuare le modifiche da sito locale a sito di produzione

Per concludere questa operazione ho poi effettuato le modifiche al sito online nel seguente ordine:

• effettuato l'upload online del nuovo file per la visualizzazione degli articoli nel tema child;
• caricato le plugin AMP dell'Automattic e Glue for Yoast SEO & AMP;
• attivato entrambe le plugin;
• configurato la plugin Glue for Yoast SEO & AMP;

Torna al sommario

Analizzare l'indicizzazione delle pagine AMP con Google Search Console

Man mano che gli spider del motore di ricerca Google scansionano le versioni AMP del mio sito possiamo vedere i risultati nel pannello di Google Search Console.

In GSC dopo aver selezionato la proprietà relativa a questo sito, sotto a Aspetto nella ricerca > Accelerated Mobile Page, possiamo vedere nel corso dei giorni quante pagine vengono indicizzate.

Gli spider non indicizzano tutto il sito in una volta sola, ma pian piano effettuano un crawling delle versioni AMP: nel mio caso ho caricato le modifiche il 19 settembre e il pannello mi indica che:

• il 19/09 sono state indicizzate 5 pagine;
• il 20/09 ne ha indicizzate 35, con errori 1 (pagina con grafico che non correggo);
• il 21/09 173 pagine sono state analizzate e validate, 3 con errori (tutte con grafico);
• il 22/09 erano 188, 4 con errore (3 con markup relativo ai grafici da non correggere e 1 con errore dovuto a codice sporco a causa di tag copiati inavvertitamente e corretti subito);
• il 23/09 erano 193, sempre con 4 errori;
• il 24/09 siamo a 217 e gli errori sono ritornati a 3 (sempre le pagine con i grafici);

Per le altre pagine rimango in attesa (immagino che dovrebbe indicizzarne un totale di 313, il numero degli articoli presenti su questo sito) in quanto gli spider impiegano del tempo ad effettuare una analisi dell'intero sito, ma del resto da analisi effettuata quotidianamente, ad oggi nessuna delle mie pagine sulla SERP mobile punta alla versione AMP. Lo stesso si può dire di altri siti che hanno versione Accelerated Mobile Page da più tempo di questo e che continuano ad aver in SERP snippet che puntano alla versione classica.

Differenze nei tempi di caricamento

Ho poi effettuato una analisi di comparazione per esaminare i differenti tempi di caricamento, per uno stesso contenuto, nelle differenti versioni.

Come potete vedere da questa immagine i tempi di caricamento sono nettamenti diversi:

• se la pagina classica carica in 6,5 secondi quella AMP ne impiega la metà, 2,8 secondi;
• il peso della pagina da 1,66 MB è sceso a 307 Kb: il 18% della pagina originale;

Naturalmente, per chi fosse interessato, è possibile vedere come questa pagina si visualizza nella sua versione AMP.