Come implementare pagine AMP su WordPress

AMP, acronimo di Accelerated Mobile Pages, è un progetto open source che consente ci creare pagine dal caricamento quasi istantaneo per dispositivi mobile come tablet e smartphone.

Pienamente supportato da Google, le pagine AMP sono una versione più snella delle pagine classiche, con un unico CSS interno, solo file Javascript asincroni ed un uso di particolari tag HTML. L’obiettivo è visualizzare la pagina nel numero minore di richieste al server possibile (roundtrip) ottimizzando quanto più possibile il percorso di rendering critico.

Le pagine vengono inoltre distribuite nelle AMP cache, dei server che come dei veri e propri CDN memorizzano una copia della pagina per consentire una risposta immediata senza interpellare il web server originale. Le più famose AMP cache sono Google AMP Cache e Cloudflare AMP Cache.

Lo standard AMP è supportato da tutti i browser più comuni ed è utilizzato da più di 25 milioni di siti web. In questa guida vedremo come implementare pagine AMP su un sito WordPress.

Installazione plugin AMP

Il primo passo per creare pagine AMP con WordPress è installare un apposito plugin. Nonostante quello famoso realizzato da Automattic, consiglio di installare il più completo e versatile AMP for WP – Accelerated Mobile Pages.

Ad installazione completata un menu dal nome AMP sarà disponibile sulla sinistra. Dalla sezione Settings sarà possibile configurare le opzioni più disparate. Nel caso di SpeedyWP è stato deciso di abilitare le pagine AMP solo per gli articoli del blog e di lasciare le già preformanti pagine interne come pagine classiche.

È possibile configurare Google Analytics, così come i dati strutturati, la gestione dei commenti con applicazioni come Disqus, comprimere il codice, gestire notifiche push, tradurre alcune frasi dalla lingua inglese e molto ma molto altro ancora. Ecco perché sono profondamente innamorato di questo super plugin!

Dal sotto-menu design sarà possibile personalizzare il template delle pagine AMP, aggiungendo regole CSS custom, più o meno bottoni social, inserire o rimuovere riferimenti a tag e categorie nonché utilizzare un vero e proprio page builder.

Sarà inoltre possibile estendere le funzionalità del plugin con add-on pro a basso costo per rendere ad esempio AMP le schede prodotto WooCommerce, pagine con il form Contact Form 7 e Gravity Form, inserire call to action e altro ancora.

Salvate le configurazioni sarà possibile visualizzare l’anteprima della pagina amp posponendo alla normale URL la desinenza /amp/. Ad esempio l’equivalente AMP della pagina https://www.speedywp.it/come-velocizzare-wordpress-con-memcached-e-batcache/ è  https://www.speedywp.it/implementare-pagine-amp-wordpress/amp/.

Verifica conformità pagina AMP

Realizzate le pagine AMP occorre verificarne la conformità secondo lo standard. Di per se il plugin non introduce errori ma potrebbe farlo il tema.

Ad esempio su SpeedyWP, che utilizza il tema best seller BeTheme, è stato doveroso inserire il seguente fix sul file functions.php a causa dell’introduzione di uno script non compatibile:

// Fix per plugin pagine AMP per tema BeTheme
if( ! function_exists( 'mfn_scripts_config' ) && (substr($_SERVER['REQUEST_URI'], -4, 4) == "amp/" || substr($_SERVER['REQUEST_URI'], -3, 3) == "amp" ) ) {
 function mfn_scripts_config() {}
}

Per effettuare la verifica di una pagina AMP consiglio di utilizzare AMP Validator, un’estensione gratuita per Google Chrome. Il funzionamento è banalissimo.

Basta visitare la pagina AMP e se l’icona diventa verde siamo di fronte ad una pagina valida che verrà inserita nelle AMP cache. In caso di errori l’icona diventerà di colore rosso e sarà possibile ispezionarli per poter correre ai ripari.

Alternativamente è possibile utilizzare il tool online https://validator.ampproject.org. Anche qui il funzionamento è banalissimo: basta fare un copia-incolla della URL della nostra pagina AMP, cliccare sul bottone VALIDATE e leggere l’esito.

Pagine AMP su Google

Via via che Googlebot scansionerà il vostro sito, troverà ed indicizzerà le pagine AMP, all’interno della Search Console, nello specifico su Aspetto nella ricerca > Accelerated Mobile Pages, inizierete a notare l’incremento di pagine indicizzate:

Nella SERP mobile, invece, una pagina AMP è contrassegnata dal simbolo del fulmine accanto alla URL:

Implementare pagine AMP su WordPress è un’operazione decisamente semplice e vantaggiosa per migliorare l’esperienza di navigazione da mobile. Alcune complessità possono verificarsi di fronte a pagine avente un core business più complesso e per le quali è magari richiesta una consulenza più specifica.

Se anche voi avete implementato AMP sui vostri siti WordPress condividete la vostra esperienza commentando questo post.