[vc_row][vc_column][vc_column_text]Come vi ho raccontato in un precedente articolo dedicato alle Accelerated Mobile Page il team di Automattic, con alcuni collaboratori, ha sviluppato una plugin per Wordpress per incominciare a sfruttare la tecnologia AMP e velocizzare i siti costruiti con questo CMS per i dispositivi mobili come smartphone e tablet.
Di mio ho provato a installare questo software su un sito di test, che ho online, a cui non aggiungo contenuti da parecchio tempo, ma che mantengo aggiornato nel core di Wordpress e nelle plugin configurate sopra, rendendomi conto di come questa plugin debba ancora essere sviluppata completamente.
Le caratteristiche tecniche del sito web di test
L'installazione di Wordpress che utilizzo per testare la plugin AMP è aggiornata alla versione 4.4.1 di Wordpress e monta un tema premium.
Alcune plugin configurate su questo sito web di test, di cui ho analizzato il comportamento in combinazione con la software per le Accelerated Mobile Page, sono Yoast SEO (alla versione 3.0.7) e Italy Cookie Choices (alla versione 2.4.4), con un risultato, devo dire, inaspettato.
La plugin AMP nel dettaglio
Il 18 febbraio è stata rilasciata la versione 0.3 di questa plugin per Wordpress, aggiungendo delle funzionalità e correggendo il codice per le gallerie di immagini proprietarie di WP, in modo da renderlo valido.
La seconda release di questa plugin, la versione 0.2, è stata rilasciata il 28 gennaio, correggendo parecchi buchi e errori generati nel codice di markup della pagina, evidenziati grazie al nuovo tool integrato nella Google Search Console.
In particolare se nella versione 0.1 mancava il dato strutturato relativo all'autore, nella versione 0.2 il bug è stato corretto.
Ma vediamo alcune caratteristiche della plugin AMP nello specifico.
Come già detto nel precedente articolo, una volta installata e attivata questa plugin per Wordpress e dopo aver rigenerato i permalink, genera una copia AMP dei post, a cui accedere con un URL specifico, a seconda di come abbiamo configurato i permalink del nostro sito:
- se sono alla versione di default (errore SEO rimediabile facilmente) inserisce ?amp=1 al termine dell'URL;
- se sono personalizzati aggiunge /amp/ in coda al permalink;
Le pagine NON vengono influenzate da questa modifica e non avranno una loro versione AMP a meno di non installare Glue for Yoast SEO & AMP, che permette di realizzare una versione AMP anche delle pagine.
Tutte gli articoli duplicati, in versione Accelerated Mobile Page, non rischieranno di penalizzare a livello di SEO il nostro sito, per colpa di contenuti duplicati e relativo intervento di Google Panda, grazie al metatag canonical configurato a puntare sull'articolo originale.
Per far rilevare la versione AMP dei nostri articoli la plugin aggiunge, nel tag <head> la stringa di codice HTML necessaria a creare un riferimento alla copia in versione Accelerated Mobile Page:
<link rel="amphtml" href="https://www.esempio.tlp/url/amp/" />
Nella configurazione, sia per non generare errori nel pannello dedicato di Google Search Console (e inficiare così l'indicizzazione delle pagine /amp/) che per migliorare l'aspetto già scarno della versione amp di un articolo, conviene impostare una icona che verrà utilizzata nell'header della versione Accelerated Mobile Page dei nostri articoli (con l'aggiunta di Glue for Yoast SEO & AMP potremo personalizzare ulteriormente l'aspetto grafico della versione AMP).
Per far questo facciamo attenzione ad aggiungere una immagine quadrata, rappresentativa del nostro sito web (ad es. il logo), con dimensione di almeno 512 px, nella sezione dedicata alla personalizzazione del nostro Wordpress. Il percorso per compiere questa modifica è il seguente:
- dal menù di amministrazione premiamo su Aspetto >> Personalizza;
- nel nuovo menù che compare sulla sinistra premiamo su Identità del sito e aggiungiamo una Icona del sito premendo sul bottone Seleziona una immagine;
La plugin rimuove tutti i vari fogli di stili e i diversi javascript utilizzati nel sito e fa visualizzare il contenuto in un “tema diverso”, studiato secondo le direttive AMP:
- codice javascript asincrono;
- i file js esterni risiedono sulla CDN dell'amproject;
- gli stili CSS sono in linea;
- il codice HTML con cui vengono serviti gli elementi è AMPHTML;
Le immagini e i video inglobati direttamente sull'articolo, mediante il bottone “Aggiungi Media” dell'editor visuale, saranno visibili, ma fate attenzione se utilizzate delle plugin particolari per mostrare video o slideshow di immagini: rischierete di far comparire solo gli shortcode relativi in quanto le plugin verranno spente.[/vc_column_text][vc_message color="warning" message_box_color="warning" icon_fontawesome="fa fa-exclamation-triangle"]Se utilizzate un Visual Editor aggiuntivo. o delle plugin per inserire degli shortcode, fate attenzione perchè i vostri articoli, nella versione AMP mostreranno il testo nudo e crudo, in quanto gli shortcode non verranno interpretati perchè ad oggi forniscono codice non validabile dal linguaggio di markup AMP.
Con la versione 0.3 di questa plugin questo problema viene corretto e la versione AMP non mostrerà più gli shortcode, ma pulirà il codice mostrando solo il contenuto.[/vc_message][vc_cta h2="Vuoi migliorare la grafica della versione AMP?" add_button="bottom" btn_title="Scopri Glue for Yoast SEO & AMP" btn_style="flat" btn_color="blue" btn_align="center" btn_link="url:https%3A%2F%2Fwww.posizionamento-seo.com%2Ftecnica%2Fcontent-management-system%2Fwordpress%2Fyoast-e-amp%2F||" btn_button_block="true"]Il team di Yoast ha sviluppato una plugin per personalizzare la grafica e inserire il codice di Analytics.[/vc_cta][vc_column_text]I link all'interno del contenuto dell'articolo non verranno influenzati e punteranno alla versione “classica” del sito, possibilmente ottimizzata per i dispositivi mobile, per cui l'utente se li utilizzerà per continuare la sua navigazione sul sito web si vedrà servita una pagina normale, dal tempo di caricamento sicuramente maggiore.
Nella versione 0.3 è stato aggiunto il supporto per embeddare i post e i video da Facebook, utilizzando i tag dedicati amp-facebook.
AMP e Google Analytics
Un problema ben grave, che ho notato nel mio caso in cui ho inserito il codice di Google Analytics nel tema grafico, è che nella versione AMP non viene di conseguenza servito, per cui mi perdo l'analisi degli accessi da tutti quei visitatori che visualizzano la versione "velocizzata del sito".
AMP-Analytics
In realtà, perdere il codice di Google Analytics a causa di un cambio di layout dovuto all'intervento delle plugin AMP nel servire una pagina codificata per essere visualizzata velocemente dai dispositivi mobile, è solo un bene in quanto il codice Javascript di GA classico non è ottimizzato per le pagine servite secondo la logica delle Accelerated Mobile Page. Per questo è stato sviluppato nuovo codice, di cui abbiamo notizia in un post del 28 febbraio.
Il codice, per poter funzionare, viene implementato direttamente sulla pagina, incorporandolo tra i tag <amp-analytics> e potete trovare maggiori informazioni sul sito dedicato.
[bctt tweet="A seguito di analisi della plugin #AMP su un sito online, alcune riflessioni sulla nuova versione 0.3"]
Implementare Google Analytics con la plugin AMP di Wordpress
Su GitHub viene fornito una funzione in PHP da aggiungere ad un file presente nella plugin AMP per Wordpress, per aggiungere il codice necessario a far eseguire il codice di Google Analytics, compatibile con le Accelerated Mobile Page.
Copiate e incollate il seguente script alla fine del file amp-post-template-actions.php, che trovate all'interno della directory www.dominio.tlp/wp-content/plugins/amp/ (vi consiglio di scaricare il file via FTP e tenerne una copia della versione originale, nel caso di errori che potrebbero invalidare la visualizzazione del sito):[/vc_column_text][vc_raw_js]JTNDc2NyaXB0JTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZnaXN0LmdpdGh1Yi5jb20lMkZwc2hhcGlybyUyRmE4N2I2YWZmY2I0NGVhNTFmN2FkLmpzJTIyJTNFJTNDJTJGc2NyaXB0JTNF[/vc_raw_js][vc_column_text]Ricordatevi, naturalmente, di sostituire il valore della variabile "account", settato in questo script a UA-XXXXX-Y, con l'id identificativo del vostro account di GA, che potete trovare, una volta loggati al vostro account Google Analytics nella sezione Amministrazione >> Proprietà >> Informazioni sul monitoraggio >> Codice di monitoraggio.
Attenzione! Ogni volta che aggiornerete la plugin sarà necessario aggiungere nuovamente questo codice al file.[/vc_column_text][vc_message]Aggiungendo la plugin Glue for Yoast SEO & AMP diviene più facile aggiungere il codice di tracciamento delle visite di AMP Analytics, grazie ad una funzionalità integrata.[/vc_message][vc_column_text]
Il comportamento delle altre plugin in una pagina AMP
Informazione importante da considerare se attiviamo una versione AMP dei nostri articoli è che tendenzialmente questa plugin spegne tutte le altre, tranne qualche rara eccezione particolare come nel caso di plugin con codice sporco e le plugin che funzionano lato server (cache, analisi dei link, etc).
Nel mio caso ho notato che:
- la plugin AMP “spegne in parte” Yoast SEO, ossia lascia il tag title, ma toglie tutti gli altri metatag (a meno di non inserire Glue for Yoast SEO & AMP, in quel caso vengono;
- viene spenta la plugin Italy Cookie Choose e viene eliminato il menù contenente l'informativa estesa sui Cookie, rendendo così “illegale” per la legge italiana la versione accelerata per i dispositivi mobile;
- una plugin che lavora con un codice non troppo pulito (simple share buttons adder) inserisce lo stesso i link agli account sociali, ma le icone prive della giusta formattazione css rendono il layout di pagina inguardabile;
Considerazioni sulla versione AMP del sito web
Vediamo insieme alcune riflessioni su questa plugin, relative a strategie SEO e di webmarketing in generale.
Usabilità degli articoli nella versione Accelerated Mobile Page
Incentrando l'attenzione a mostrare rapidamente il contenuto di un articolo l'usabilità della pagina raggiunge un grado elevato, con testo di facile lettura: viene mantenuta la formattazione del testo con grassetti, corsivi e i tag dedicati ai titoli. Il testo è scuro su fondo chiaro e non vi sono elementi di distrazione.
Miglior posizionamento della versione AMP
I presupposti di questa tecnologia sono di servire dei contenuti più velocemente ed infatti come possiamo vedere il contenuto nella visualizzazione classica viene servito con un tempo di 3,64s per una dimensione complessiva di 465,9 kb.
La versione AMP al contrario ha un tempo di caricamento di 1,76s (meno della metà della versione classica) e la pagina pesa 678,4 kb (di più rispetto alla versione classica a causa del codice inline).
Immagino quindi che i contenuti dedicati ai dispositivi mobile verranno posizionati meglio nella SERP dedicata ai device come gli smartphone.
Come cambia l'attività di webmarketing
Aumentare i visitatori al nostro sito, servendogli delle pagine ottimizzate per i dispositivi mobile, non è sufficiente, in quanto il fine ultimo spesso è generare conversioni e non soltanto mostrare contenuti. In questo caso sarà opportuno studiare dei banner interni, che coadiuvati dall'azione dei link testuali, potrebbero indirizzare gli utenti alle pagine classiche comprensive di messaggi promozionali, call to action e form per l'interazione. L'utenza in questo caso dovrà però effettuare una navigazione più lunga per arrivare alla tanto agognata conversione, atterrando prima su una pagina ad alta velocità, per poi spostarsi nella versione classica del sito.
Per visualizzare un esempio di pagina AMP prova la versione Accelerated Mobile Page di questo articolo.[/vc_column_text][/vc_column][/vc_row]
pino
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL.
Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale.
Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.
