In questo articolo, vi voglio parlare di AMP e di come integrarlo nei vostri siti WordPress. Cos’è? AMP è l’acronimo di “Accelerated Mobile Pages” (Acceleratore di pagine mobile) ed è un progetto open-source lanciato di Google a fine 2015, con lo scopo di fornire contenuti ottimizzati per i dispositivi mobili. Se volete approfondire il progetto a livello di programmazione, trovate la repository su Github a questo link.
L’obbiettivo di Google infatti è quello di creare una versione “meno pesante” delle pagine presenti del Web: devono infatti essere ottimizzate per essere più leggere e caricare solamente gli elementi principali della pagina. Questo si traduce in minor peso dei contenuti e di conseguenza, tempi di caricamento notevolmente minori (quasi fulminei). Un altro scopo delle pagine AMP è quello di fornire un contenuto completamente compatibile su ogni supporto e browser utilizzato.
Nasce quindi per facilitare la lettura di articoli web tramite mobile (è infatti un diretto concorrente degli “Instant Articles” di Facebook) e si basa su 3 componenti principali:
- AMP HTML: Un formato HTML con dei limiti per garantire affidabilità, performance e con formattazione più ricca per i contenuti.
- AMP JS: Libreria Javascript per renderizzare più velocemente le pagine HTML nel browser.
- AMP Cache: Una cache che Google mette a disposizione per distribuire più velocemente i vostri contenuti AMP. Le pagine AMP indicizzate da Google vengono infatti prelevate e salvate sui loro server. Se infatti provate a cercare un articolo in AMP tramite mobile, noterete che è ospitata da google.com stessa.
A conti fatti con AMP avremo contenuti più veloci da fruire, a discapito di una grafica più “scarna” e totalmente incentrata sul contenuto principale. Se questo può risultare uno svantaggio, a livello mobile è un bel “boost” alle pagine del vostro sito.
Se avete un sito statico, o sviluppato con CMS proprietari, l’unica cosa da fare per integrare questo sistema è studiarsi la documentazione fornita da Google, e che trovate a questo link. Nel caso possediate un sito in WordPress, le cose cambiano e tutto diventa più semplice. Vediamo come.
Come integrare AMP su WordPress
Gli sviluppatori di WordPress (Automattic) hanno creato un plugin (gratuito) per abilitare questa funzionalità sui nostri siti WordPress, in maniera semplice e veloce. Il plugin si chiama AMP for WordPress e lo trovate a questo link.
Una volta installato ed attivato, il plugin si occuperà da solo di creare le versioni AMP dei nostri contenuti. Per visualizzare per ogni singolo articolo questa versione ottimizzata, dovete aggiungere “amp/” alla fine dell’URL.
Se ad esempio volete vedere la versione AMP di questo articolo, il cui link è https://venetoformazione.it/blog/amp-come-integrarlo-wordpress/, aggiungendo “amp/” avrete questo link: https://venetoformazione.it/blog/amp-come-integrarlo-wordpress/amp/
Come potete notare la versione AMP è molto più povera graficamente rispetto all’originale. È normale ed è una scelta voluta da Google per far sì che la pagina sia più veloce, pesi meno e permetta all’utente di focalizzare l’attenzione sugli elementi principali.
E non dovete preoccuparvi per la duplicazione dei contenuti, in quanto Google non considera le pagine AMP come duplicazioni ma come ottimizzazioni mobile. Quindi nessuna penalizzazione sulla SERP. Anzi, a detta di molti, questa integrazione dovrebbe avvantaggiare i vostri articoli a livello d’indicizzazione (il condizionale è d’obbligo perché non c’è attualmente alcuna conferma da parte di Google)
N.B.: Una volta attivato il plugin, ricordatevi di aggiornare i permalink per poter vedere le pagine AMP (Impostazioni –> Permalink –> Salva le modifiche)
Caratteristiche e limiti
Il plugin genera solamente il contenuto ma non lo mostra automaticamente agli utenti mobile. Quindi se, ad esempio, entrate nel sito di Veneto Formazione con il vostro smartphone, non vedrete in automatico i contenuti AMP. Questi saranno forniti automaticamente dalla SERP di Google quando effettuerete una ricerca.
Uno dei limiti del plugin è che non genera (per ora) i contenuti AMP per l’home page e per gli archivi del post. Genera invece le versioni AMP di pagine, articoli e CPT (custom post type). Di base è attiva solo la gestione degli articoli, ma andando in area amministrativa su “AMP –> General” potrete abilitare il supporto anche a tutte le altre tipologie di post. Ricordate comunque che questa tecnologia nasce principalmente per blog, news ed articoli. Risulta meno utile per altre tipologie di contenuti.
Come personalizzare le pagine AMP
Premetto, questa sezione è per chi ha conoscenza di personalizzazione dei temi WordPress e sa mettere mano al codice PHP. Quindi se questo NON è il vostro caso, potete saltare pure questa parte.
In linea di massima possiamo far uso della grafica fornita dal plugin stesso, ricordando ancora una volta, che la versione AMP è giusto che sia scarna e incentrata solamente sulla fruizione semplice e veloce dei contenuti principali della pagina (quindi niente testata e footer complessi, via sidebar ed elementi di contorno).
Se vogliamo, possiamo però metter mano ai template di AMP, per apportare qualche modifica alla grafica delle pagine. Per farlo, usiamo una tecnica che per chi ha avuto modo di lavorare con Woocommerce (plugin per creare e-commerce in WordPress) conoscerà bene: la sovrascrittura dei template.
I file per gestire il template li trovate su “wp-content/plugins/amp/templates”. Ma vi sconsiglio fortemente di modificare direttamente questi file. Altrimenti, al primo aggiornamento del plugin potreste veder perse le modifiche fatte.
La soluzione migliore è infatti quella di copiare unicamente i file del template, che intendete modificare e di inserirli, nella cartella del vostro tema, all’interno della sotto-cartella “amp/”. Così facendo, le vostre modifiche saranno indipendenti da futuri aggiornamenti. Qui sotto un esempio di questa procedura:
I nomi dei file all’interno della cartella “templates” sono espliciti e servono a guidarvi nel capire su che aree opera ognuno. Ma facendo un veloce riassunto:
- single.php, page.php: Gestiscono la struttura rispettivamente del singolo articolo e della pagina, richiamando a loro volta i vari pezzi di cui è composta.
- style.php: Qui troviamo lo stile e le regole CSS della pagina AMP. Interessante notare come il file sia “php” per poter usare le variabili all’interno delle regole CSS.
- html-start.php, html-end.php: Troviamo i tag di apertura e chiusura della pagina HTML
- header.php, header-bar.php: Gestiscono la testata della pagina
- footer.php: Si occupa del piè pagina
- featured-image.php: Gestisce l’immagine in evidenza del post.
- meta-author.php, meta-comments-link.php, meta-taxonomy.php, meta-time.php: Frammenti della pagina in cui sono gestiti gli autori, i commenti, le tassonomie e la data di post.
Per quanto riguarda la gestione di template differenti per i vostri Custom Post Type, esiste una procedura via codice, ma attualmente la trovo macchinosa. Gli stessi sviluppatori hanno fatto sapere che in futuro cercheranno di integrare un sistema più semplice. Se volete maggiori info in merito vi rimando direttamente a questo link.
Per concludere, il mio consiglio è di abilitare questo plugin sul vostro sito WordPress se avete news/articoli da gestire. Risulta molto comodo infatti per la fruizione di contenuti di questo tipo. Per visualizzare pagine o elementi particolari (prodotti, protfolio, ecc.) un po’ meno. E voi, conoscevate già AMP? lo userete?
Ancora nessun commento