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.
