Google AMP

Come attivare la versione AMP di una pagina web? Scopriamolo insieme. Ma prima domandiamoci: perché è essenziale far uso di Google AMP ? AMP, che sta per Accelerate Mobile Page, è la novità di Google che ti consente di rendere più leggere le pagine del tuo sito web su dispositivi mobili. Vuoi evitare che i tuoi lettori scappino dal tuo sito perché i tempi di caricamento sono molto lenti? Allora questa lettura fa per te.

Google AMP e l’era dei mobile

Blog, statistiche, ed esperti digital, quotidianamente ci dicono che il telefono sta diventando il primo dispositivo utilizzato per la navigazione Internet. Proprio Google, ben consapevole di tutto ciò, ha fatto un annuncio importantissimo dove parla di mobile first indexing: “useremo la versione mobile della pagina per l’indicizzazione e il ranking, per aiutare maggiormente i nostri utenti – soprattutto mobili – a trovare ciò che stanno cercando”.

Quanto detto fin ora è utile per comprendere a pieno l’importanza che riveste al giorno d’oggi  Google AMP. Ed è proprio per questo motivo che andremo a vedere come attivare la versione AMP di una pagina web. Inizieremo mostrando come si crea una pagina AMP utilizzando il codice HTML. Parleremo anche di come costruirla attraverso alcuni CMS, e infine vedremo il metodo da noi consigliato, ovvero la costruzione di pagine AMP utilizzando WordPress.

AMP, come installarlo su HTML e sui principali CMS

Ci sono diversi modi per creare un sito web, e di conseguenza diversi saranno i modi in cui è possibile creare una pagina AMP.

• HTML: per la costruzione manuale di una pagina HTML non occorre necessariamente conoscere bene il linguaggio di programmazione, anche se è fondamentale sapere almeno le basi. Il processo può essere un po’ lungo, ma per chi sa programmare avrà il vantaggio di personalizzare al meglio la propria pagina AMP. Per rendere tutto più semplice puoi visitare il sito di AMP, e seguendo le istruzioni, potrai copiare e incollare i codici HTML nel tuo sito web e creare una pagina HTML.
• Joomla: per attivare AMP su una pagina Joomla è necessario installare un plugin chiamato JAMP, un ottimo plugin, ma è a pagamento.
• Shopify e Magento: la soluzione AMP è anche disponibile anche per CMS dediti alla costruzione di E-Commerce. Anche in tal caso i plugin non sono gratuiti ma a pagamento. Il  plugin AMP per Shopify prevede un piano base gratuito ma è molto limitante. Mentre il plugin AMP per Magento, non prevede un piano base gratuito ma solo a pagamento.

Attivare la versione AMP su una pagina web WordPress

Installare AMP

La prima cosa da fare per attivare la versione AMP di una pagina web è ovviamente l’installazione. Per farlo consigliamo l’installazione dei seguenti due plugin:

• Plugin WordPress AMP ;
• Plugin AMP for WP – Accelerated Mobile Pages.

Per questa operazione è necessario compiere i seguenti passaggi su WordPress:
Plugin >> scrivere AMP nella barra di ricerca >> installa ora >> una volta installato il plugin il comando “installa ora” diventerà il pulsante “attiva” >> cliccare sul comando “attiva”
Nell’immagine sono stati messi in evidenzia i loghi dei due plugin da installare, sarà semplice per te individuare quelli giusti!

Attivare AMP

Personalizzare AMP

Una volta installati entrambi i plugin è necessario attivarli.  Si lo so, abbiamo già detto prima come attivarli, ma c’è anche un altro metodo, e nella sezione che ti mostrerò sarà anche possibile disattivare il plugin.
Per farlo ci basta recarci in plugin >> plugin installati >> cliccare su attiva su AMP for WP-Accelerated Mobile Pages >> e attivare anche il plugin AMP

Vediamo ora le diverse sezioni delle impostazioni che possiamo settare con AMP. Le sezioni di nostro interesse sono principalmente due e sono: Setting e Design. Cliccando su questi comandi si aprirà un menù con una serie di impostazioni che possiamo modificare.

Cliccando su comando Setting troveremo:

• General: dove possiamo inserire il logo che comparirà sulla versione AMP;
• Advertisement: dove è possibile attivare la pubblicazione di banner pubblicitari. Vi sarà data la possibilità di scegliere in quali posizioni della vostra versione mobile dovranno apparire i banner pubblicitari;
• SEO: per questa funzione è necessario installare SEO by yoast, in tal caso potrai modificare alcuni parametri come tag e metatag su AMP;
• Analytics: in questa sezione puoi attivare Google analytics sulla tua versione AMP per monitorare il traffico della pagina;
• Notice bar & GDPR: dove possiamo inserire il messaggio di utilizzo dei cookies.

Nella sezione Design invece possiamo modificare l’aspetto della nostra pagina AMP. Cliccando possiamo definire:

• Il tema della pagina: scegliendo tra i diversi tempi preimpostati offerti direttamente dal plugin;
• Global: è possibile scegliere il colore del titolo e dei link che inseriremo nella pagina;
• Header: per modificare il layout del Header e del menu;
• Social: ci consente di attivare il bottone di condivisione sui canali social scelti da noi.

Creare un contenuto per la versione AMP

Una volta installata la nostra applicazione, e  definite le impostazioni che meglio si adattano alle tue esigenze è arrivato il momento di vedere come funziona AMP.
Il primo metodo è quello di copiare tutto il contenuto e formato della pagina della versione Desktop. In tal caso è molto semplice. Nell’esempio riportato nella figura ho creato una pagina dove parlo della psicologia dei colori nel marketing. Una volta scritto tutto il contenuto, non avrò creato automaticamente una pagina AMP, quindi cliccando su “pubblica” avrò lo stesso formato sia per desktop che per mobile. Per creare una versione mobile AMP è necessario scorrere in basso nella sezione “pagina”, fin quando non troviamo il nostro plugin, dopodiché basta cliccare su “copy the content” e tutto ciò che abbiamo creato finora per la versione mobile verrà copiato sulla versione AMP.

Il secondo metodo è quello di creare un layout di pagina da visualizzare nella versione AMP. Il monitor di un cellulare è più piccolo di un desktop, quindi l’utente può ritenere necessario andare a cambiare il layout di default impostao da WordPress nella versione mobile. La versione AMP sarà dunque un layout personalizzato.
Per far ciò occorre cliccare su “start the AMP page builder”, dopodiché utilizzando la tecnologia drag and drop sarà possibile definire il layout che si desidera. Nel semplice esempio riportato di sotto, abbiamo costruito una pagina con un layout da tre elementi: Heading, Text e Image
Dopodiché cliccando sull’icona dell’ingranaggio è possibile creare e modificare il contenuto di quell’elemento. Ad esempio:

• Nell’heading ci verrà chiesto di scrivere il titolo;
• Nel text dovremo scrivere il body della nostra pagina e formattarlo con colori, font, etc;
• Immage, ci verrà chiesto di caricare una immagine e definirne le dimensioni.

Infine non dimenticarti si spuntare la casella “use Builder” per fare in modo che quel contenuto con quel layout e formato venga utilizzato come versione AMP. Stessa cosa vale se intendi utilizzare la prima modalità descritta, in tal caso ti basterà mettere la spunta su “use this content as AMP content”.
Adesso una volta creata la tua versione AMP non ti resta altro che pubblicare la pagina e lanciarla sul web. Infine quando pubblichi una pagina AMP quest’ultima avrà un URL identico alla versione Desktop con in aggiunta i caratteri “/AMP”

Conclusioni

Come attivare la versione AMP di una pagina web? Dopo questa interessante lettura finalmente sai dare una risposta alla tua domanda. E finalmente hai scoperto:

• Che cosa è Google AMP;
• La versione AMP di una pagina web è una versione molto leggera che riduce notevolmente i tempi di caricamento;
• Come installarlo manualmente utilizzando una pagina HTML e su alcuni CMS, specialmente su WordPress;
• Per attivare la versione AMP è necessario provvedere all’installazione e attivazione su WordPress, i passaggi sono pochi e semplici;
• È possibile creare una pagina AMP i due modalità diverse, la prima è quella di copiare contenuto formato e layout della versione desktop, mentre il secondo è quello di creare un layout personalizzato.