Realizzazione Siti e Portali Web – Wordpress CODING – Mobile APP – Consulenze SEO – Web design – Ecommerce     Login / Register

Come utilizzare le AMP in WordPress

E’ ormai abbastanza evidente che Google intenda premiare nelle SERP pagine che risultano veloci al caricamento, soprattutto se la navigazione avviene da dispositivi mobile. Il parametro “speed” è divenuto via via più importante nell’ottimizzazione lato SEO di un sito web e rappresenta uno dei fattori cruciali per portare traffico ad ogni sito WEB.

Per questo, proprio Google ha introdotto il progetto AMP ( Accelerated Mobile Pages) , già attivo da ottobre 2015.

Il concetto alla base del progetto è quello di fornire agli utenti “mobile” una migliore User Experience approdando, dalle SERP, a pagine molto veloci, ripulite dal peso dei grandi file javascript di cui vi è un largo uso ( e talvolta abuso ) nella maggior parte dei moderni siti internet.
Ecco quindi una mini-guida per un corretto utilizzo di base delle AMP su WordPress, con la nota che la sezione riguardante il monitoraggio e la validazione sono applicabili a siti sviluppati in qualsiasi tecnologia, anche indipendente da WP

Come implementare AMP su WordPress?

Come modificare il template delle AMP in wordpress?

WP Custom Post Types e AMP

Validazione delle Accelerated Mobile Pages

Monitorare le pagine  AMP in Google Analytics


Come implementare AMP su un sito WordPress?

Per prima cosa consigliamo di utilizzare un plugin gratuito, sviluppato fra gli altri da Automattic ( l’azienda che detiene il marchio WordPress di proprietà di Matt Muellenweg ):
https://it.wordpress.org/plugins/amp/.

Questo plugin fornisce una buona base per iniziare l’approccio con le AMP ma è ancora incompleto in quanto ad oggi ( marzo 2017) non gestisce i tipi di post “page” e gli archivi e genera molto spesso alcuni errori nella validazione del codice. Inoltre fornisce un template molto “basic” per i post e un link verso il sito wordpress.org nel footer.

La caratteristica fondamentale del plugin è quella di creare, tramite rewrite rules, la “traduzione” dei vostri post in una risorsa AMP valida, posponendo allo slug dei vostri articoli la parte “/amp/” che è il tipico URL che goolge andrà a cercare per servire una pagina “accelerated”. Quindi tutti i vostri post saranno raggiungibili all’url:
www.tuosito.com/slug_articolo/amp/” che potete verificare digitando direttamente nel browser.

Le poche opzioni di gestione del plugin si trovano sotto la voce di menu “aspetto” ->AMP

 

e consentono di modificare i colori dell’header e lo schema cromatico, null’altro di particolarmente interessante.

Ciò che però il plugin mette a disposizione è un template “pluggabile” ovvero sovrascrivibile all’interno della cartella del vostro tema in uso.

Infatti la struttura dei files del plugin include la directory “templates” in cui sono contenuti i files utilizzati per il display delle pagine. Creando una cartella denominata “amp” nella directory del tema in uso e copiando al suo interno i files che volete modificare potete personalizzare il layout della pagina AMP che verrà visualizzata agli utenti del sito.

Come modificare il template delle AMP in wordpress

Vediamo ad esempio come sostituire il footer originale ( plugins/amp/templates/footer.php ) eliminando il link a wordpress e costruendo un mini-menu di navigazione che consenta di visitare altre pagine del sito.

il codice originale:

si può sostituire nel file “cartella_tema/amp/footer.php” con:

Nel nostro esempio creiamo un menu che punta alla homepage del sito  (abbiamo WPML installato e quindi ci interessa distinguere fra le lingue) e alla pagina contatti, ovviamente ciascuno può costruire il proprio menu a piacimento, la caratteristica di base nei template è che non deve essere utilzzato codice JS e “inline styles” pena la non-validazione delle vostre pagine AMP negli strumenti di verifica che vedremo in seguito.

Si può procedere allo stesso modo per modificare il file header.php e style.php in modo da gestire il layout a vostro piacimento.
Fin qua abbiamo esaminato alcune tecniche per la modifica dei template dei “post” ovvero gli oggetti originali tipici delle installazione di base wordpress che sono gli unici supportati di default dal plugin, tuttavia è possibile implementare anche altri tipi di post

Custom post types e AMP in WordPress

Per implementare le AMP su tipi di post diversi dal “post” di default, il plugin mette a disposizione un hook ( amp_init ) sul quale si possono chiamare alcune funzioni, in particolare add_post_type_support() e la costante AMP_QUERY_VAR che contiene le informazioni necesarie al plugin. Quindi usando questo codice nel file “functions.php” del vostro tema:

Nel codice di esempio abbiamo aggiunto il supporto per AMP in diversi tipi di post e, se necessario, possiamo andare a modificare il loro template per adattarlo alle esigenze
Possiamo copiare il file “single.php” dalla cartella “templates” del plugin alla cartella “amp” del tema in uso e apportare modifiche condizionali al tipo di post:

mostrando ad esempio dei post_meta come nell’esempio o qualsiasi altra informazione.

Validazione delle AMP per wordpress

Per verificare l’adeguatezza del codice e consentire quindi il corretto display dei contenuti AMP nelle SERP, google mette a disposizione un tool ( https://search.google.com/search-console/amp )  che vi fornirà una validazione  dell’url inserito ( “www.tuosito.com/slug_articolo/amp/” )  segnalando eventuali anomalie (in rosso) o la validità della pagina AMP ( in verde)

Una visione complessiva della situazione AMP del vostro sito si trova nella search console ( https://www.google.com/webmasters/tools ), non è necessario sottoporre sitemap perchè google cercherà, sulla base delle pagine in archivio, una corrispondente AMP per servirla ai visitatori in alternativa al contenuto normale.

 

Monitorare le pagine  AMP in Google Analytics

Nell’ultima parte di questo articolo vediamo forse la sua parte più interessante ovvero come effettuare il monitoraggio delle pagine AMP tramite google analytics.

Va detto subito che l’argomento è molto vasto e vista la quantità di documentazione e risorse disponibili in rete, è facile intuire quanto questa architettura diverrà un fondamentale per il tracking  della navigazione su dispositivi mobili. I fondamentali sono descritti in questa guida ( https://developers.google.com/analytics/devguides/collection/amp-analytics/ ) e proviamo a riassumere alcune funzionalità di base, lasciando a ciascuno il compito di approfondire il vasto universo delle AMP.

Vi sono due metodi per monitorare le performances delle AMP tramite google analytics:

  • creare un nuova property dotata di un tracking code autonomo
  • aggiungere il tracking ad una property esistente

Il primo è il metodo raccomandato perchè di fatto il tracciamento del comportamento degli utenti sulle AMP si fonda su un’analisi di interazioni tipiche dei devices small screen: scrolling, click, interazioni con pulsanti etc) e l’attivazione di una property dedicata mette a disposizione tutte le features evolute.

Per un uso “normale” può andare bene anche l’utilizzo di un tracking code di una property esistente, in entrambi i casi le operazioni da fare sono:

  1. aggiungere uno script per il tracking nel file single.php:

     
  2. Prelevare l’ID della property e sempre nel file single.php, appena dopo l’apertura del tag <body>:
    Questo codice rappresenta la funzionalità base di tracking della pageviews; vi sono molti altri eventi che si possno tracciare fra cui anche le interazioni social. Per un elenco completo degli eventi che si possono tracciare e delle interessanti demo esplicative visitate questo link:

    https://ampbyexample.com/components/amp-analytics/

 

 

Related posts

Leave a Comment

Lascia un commento

Your email address will not be published.




Top