Le AMP o Accelerates Mobiles Pages sono delle pagine realizzate con un linguaggio offerto da Google che ricorda l’HTML.

Lo scopo del progetto AMP è quello di utilizzare solo strumenti veloci e facilmente digeribili dal browser, e conseguentemente minimizzare il percorso critico di rendering.

Requisiti delle AMP

Di norma il processo di creazione di pagine AMP viene correlato alle pagine standard del sito, in modo da creare un doppio da offrire a servizi come Google News o Google Discover.

I requisiti per rendere attivabile una AMP riguardano i componenti della pagina, che dovranno essere:

• Immagini: consigliata un’immagine di copertina di 1200px di larghezza e un’altezza proporzionata, in modo tale che la superficie non superi gli 800.000px, a causa della compatibilità con i formati di Google News.
• CSS interno: per la precisione lo standard dello stile del CSS è interno al linguaggio delle AMP
• Javascript asincrono: non è permesso il normale caricamento di questo linguaggio di programmazione.

Le pagine HTML guadagneranno un link alla versione AMP del tipo , che permetterà a Googlebot di rintracciare la seconda versione della pagina e indicizzarla.

Come si può leggere dall’URL generata, si tratta dell’URL tradizionale con l’aggiunta di /amp/ alla fine.

AMP e WordPress

WordPress è un CMS che genera le pagine grazie ad un complesso sistema in PHP. Di base non è compatibile con le AMP, ma può diventarlo grazie a diversi plugin, il primo tra i quali è quello ufficiale.

In poche parole, tutti i plugin di conversione della pagina si occupano di inserire determinati elementi del testo catturati a partire da determinati appigli (hook) al codice e utilizzarli nel formato AMP.

Mi occuperò di illustrarvi un tool differente da quello ufficiale, a causa del bisogno di quest’ultimo di avere uno sviluppatore che segua il progetto al fine di personalizzare la semplice struttura base.

Il plugin AMP for WP

Per quanto riguarda AMP for WP invece, il problema di implementazione di strumenti terzi non sussiste (ma non per questo dovremo considerare questo plugin perfetto) e la dashboard presente al suo interno è molto facile da utilizzare.

AMP for WP è inizialmente gratuito ed è compatibile con i principali builder, ma nella versione a pagamento. In ogni caso, se le necessità di creazione delle pagine non richiede particolari accortezze, sarà possibile operare anche con la versione gratuita.

Pannello Setup

Il plugin è composto da 5 pannelli interni (4 visibile dalla voce di menu principale e uno visibile solo dal menu laterale), ognuno dei quali di occupa comprende altri sub menu interni:

• Setup: si tratta del pannello doe verrà scelto il tipo di implementazione del sito.
• Settings: multi pannello dedicato alle informazioni che compongono la struttura delle AMP (PWA, GDPR, dati strutturati ect.)
• Design: pannello dedicato al tema grafico.
• Extensions: estensioni (a pagamento) da implementare al plugin base.
• Import / Export: come dice il nome stesso si tratta di un pannello per salvare ed utilizzare altrove le impostazioni base.

Scendendo più nel dettaglio nel pannello Setup troveremo all’interno le voci più semplici ma al contempo essenziali per la gestione delle pagine.

Si tratta infatti di dover scegliere quale “tipo” di sito convertire (si tratta relativa alla forma della pagina) e quali tipi di pagine convertire.

WordPress contiene infatti archivi, post e pagine che pur essendo identiche da un punto di vista di scansione per Google non lo sono per la nostra organizzazione dei contenuti, e potremmo voler scegliere che alcune sezioni non vengano tradotte nel nuovo formato, perché contenenti del codice più complesso di quello accettato dal formato, oppure per pura scelta strategica.

Il pannello ci aiuta anche a generare le informazioni necessarie per la presentazione della testata all’esterno del sito, e la gestione di privacy, banner pubblicitari e analisi dei dati (tramite il codice identificativo di Google Analytics)

Settings

Si tratta del pannello più complesso e difficile da utilizzare, non tanto per la comprensibilità (è ben fatto e le voci sono chiare e comprensibili), quanto per il know-how richiesto per poter operare efficacemente.

Per semplificare la spiegazione, farò un elenco dei sotto pannelli e delle loro funzioni principali:

• General: permette di inserire il logo e di scegliere quale pagina utilizzare come home e quali sezioni di WordPress rendere visibili (nel dettaglio).
• Advertisiment: sezione per selezionare i formati pubblicitari presenti sul sito.
• SEO: si occupa della compilazione dell’Open Graph e della compatibilità con i plugin che si occupano di ottimizzazione, come Yoast SEO.
• Elementor support: pannello per la compatibilità dei builder, tra cui Divi ed Elementor. Possiede anche un builder proprietario, che però richiede la versione PRO del plugin.
• PWA: installa un plugin gratuito, ottimo.
• Performance: minificazione del codice. Per evitare problemi di caricamento su Google contiene anche un bottone per la pulizia della cache.
• Analytics: permette di installare Tag Manager ma anche vari strumenti di analisi, come Facebook Pixel.
• Dati strutturati: si seleziona il tipo e l’eventuale logo da far comparire.
• Notice Bar e GDPR: creazione e implementazione dei popup per l’avviso della GDPR.
• Push Notification: richiedono One Signal per funzionare.
• Contact form: sistemi di integrazione di form per le AMP. A pagamento.
• Comments: visualizzare o meno in pagina i commenti.
• Instant Articles: compatibilità con gli Instant Articles di Facebook
• Tools: quali elementi nasconde e quali rendere visibili (sottoinsiemi di posts o archivi)
• Advance redirection: per rendere visibile o sovrapponibile una pagina generata con questo sistema alla tradizionale mobile.
• E-commerce: un sistema di compatibilità con gli e-commerce.
• Translation Panel: semplice pannello per tradurre manualmente le parole utilizzate dal plugin e visibile dal front end.

Design

Il problema principale del design è che si tratta di molte opzioni poco compatibili con i builder, e per renderli tale bisogna pagare (a partire da 89 dollari / anno).

Nonostante questo è presente un builder gratuito ma se avete utilizzato Divi o Elementor dimenticate che questo comprenda la struttura della vostra pagina.

Ad ogni modo è possibile ricreare una struttura più semplice e se non avete particolari bisogni (call to action o altro) potete tranquillamente utilizzare una delle tre strutture personalizzabili presenti nello strumento:

• Themes: i tre temi gratuiti e la vista di tutti quelli acquistabili con la versione PRO.
• Global: colori della testata e compatibilità con i Google Fonts.
• Header: utilissimo pannello, peccato che nella versione gratuita ci sia un solo tipo di menu da scegliente, parecchio ingombrante.
• Homepage: permette di aggiungere un estratto e altre informazioni valide per tutti coloro che non scelgono una home costituita da una pagina statica.
• Single: design dei post. Veramente bello e semplice da usare.
• Footer: anche qui si sente la mancanza di opzioni tra cui scegliere.
• Page: più che della pagina questo pannello si occupa della struttura che compone la pagina (featured image, breadcrumb).
• Social sharing: presenza di modalità di condivisione sui social.
• Date: formato delle date di pubblicazione e modifica dei post e delle pagine.
• Misc: nulla di importante, se non forse per la possibilità di indentazione delle categorie.

Extension e versione a pagamento

Extension è un pannello che racchiude tutti i tool compatibili sia con la versione PRO che con la versione gratuita, che possono essere comprati singolarmente o che si troveranno presenti nella PRO.

Sinceramente, lì dove il plugin ufficiale è estremamente semplice e richiede un’ottimizzazione lato codice, AMP for WP richiede di mettere mano al portafoglio ogni anno.

Se non siete dei programmatori e volete utilizzare un plugin davvero onnicomprensivo allora il consiglio è di leggere per bene questo articolo e poi acquistarlo.

In caso contrario, il plugin ufficiale è molto più semplice da utilizzare e anche più stabile.