Accelerated Mobile Pages per Drupal 7

Ritratto di Vanni

In autunno 2015 è stato lanciato un nuovo progetto: Accelerated Mobile Pages Project (con il supporto di Google), con l'intento di rendere le pagine web per dispositivi mobili il più leggere e veloci possibile. Non mi dilungo su cosa sia AMP perchè oltre ad un sito ufficiale in rete si trovano centinaia di pagine che ne parlano, quindi mi limito a dire che le pagine web AMP si basano, come tutte le altre, sull'uso di HTML, CSS e Javascript ma per crearle si deve sottostare a determinate "regole" e tags che permettono un abbattimento sostanziale del loro "peso" e quindi uno scaricamento della pagina molto più veloce. Ovviamente non tutti i siti/pagine vanno bene per avere una versione AMP (per diversi motivi), ma in linea di massima tutte le pagine che contengono principalmente testo e non hanno molti widget si prestano ad essere convertite; per questo motivo le principali testate giornalistiche mondiali hanno una versione AMP del loro sito. Inoltre, sembra che nei risultati di ricerca, Google abbia un "occhio di riguardo" per questo tipo di pagine (nella Google Search Console c'è un'apposita sezione dedicata e se ne parla anche nelle sue linee guida), infatti, essendo la velocità un fattore di ranking, è sempre bene prestarci attenzione in ottica SEO.

Giusto per farvi capire: ecco un esempio di una pagina normale e della sua versione AMP. Come si può notare, la versione AMP ha meno pubblicità e meno widget questo per renderla il più "leggera" possibile.

E per i possessori di un sito Drupal? Niente paura, Drupal mette a disposizione un modulo e un tema ideati per creare una versione AMP delle pagine del nostro sito, il tutto senza dover fare troppa fatica, anche se un po' di sforzo sarà necessario.

Creare una versione AMP delle pagine di un sito Drupal 7

Innanzitutto ci si deve procuare:

Come di consueto i moduli vanno inseriti in sites/all/modules, mentre il tema (al cui interno è presente un sottotema) và inserito in sites/all/themes.

Come installare AMP in Drupal 7

  • attivare tema e sottotema AMP e successivamente abilitare il modulo Composer (aspettare ad abilitare il modulo AMP)
  • dopo l'abilitazione di composer troveremo questo avviso avviso di avvenuta installazione del modulo composer
  • se ora andiamo in sites/default/files/composer troveremo un file "composer.json" in cui verranno elencate le librerie necessarie ai nostri moduli, noi non dovremo fare niente, faranno tutto i moduli in automatico
  • abilitare ora il modulo AMP, l'abilitazione di questo modulo provocherà una modifica del file "composer.json" perchè verranno inserite l'elenco delle librerie necessarie
  • andare nella pagina di configurazione del modulo composer, e controllare se l'elenco delle librerie è presente elenco delle librerie necessarie ma non ancora installate
  •  per installare le librerie si deve lanciare il comando "composer install", lo possiamo fare tramite shell di drush o tramite la shell del nostro sistema operativo: portarsi nella cartella di composer e poi lanciare il comando
  • comando inserito nella shell di drush per installare le librerie
  • se andiamo in sites/all troveremo una nuova cartella denominate "vendor" con all'interno le librerie richieste e se torniamo nella pagina di configurazione di composer, troveremo questo elenco delle librerie installate da composer 
  • andare nella pagina dei "content type" e scegliere quale tipo di contenuto deve avere una versione AMP, cliccare su "gestisci la visualizzazione", aprire le "impostazioni personalizzate", mettere una spunta su AMP e salvare
  • pagina di configurazione visualizzazione dei content type
  • cliccare sul tab "AMP" in alto a destra e poi selezionare per ogni campo il formato necessario
  • configurazione dei campi per la visualizzazione AMP
  • andare nella pagina di configurazione del modulo AMP
  • qui possiamo vedere l'elenco dei nostri content type, e a quali verrà creata la versione AMP
  • con quale tema verrà visualizzata la pagina AMP
  • altre configurazioni per Google Analytics e la pubblicità
  • infine altre configurazioni un po' più complicate da impostare (leggere relative guide)
  • pagina di configurazione del modulo AMP - prima parte
  • pagina configurazione del modulo AMP - seconda parte

Come configurare la visualizzazione di una pagina AMP

Attraverso il modulo AMP riusciamo ad avere una copia di una normale pagina del nostro sito web in versione AMP. Di default questa nuova pagina non viene visualizzata col nostro normale tema, questo perchè solitamente i nostri temi sono ricchi di regioni con all'interno parecchi blocchi di testo e widget, e siccome l'intento di questa versione della pagina è "pesare" il meno possibile si deve cercare di scremare tutto il non stretto necessario. Per configurare al meglio queste nuove pagine, andare in admin/structure/block, scegliere il tab "example subtheme" (che un sottotema del tema AMP) e cominciare a spostare i vari blocchi tra le regioni del tema e disattivare quelli non necessari; di default questo tema possiede solo 3 regioni: intestazione, main e piè di pagina.

Ovviamente è bene modificare un po' la grafica per renderlo più simile al tema che utilizziamo nel resto del sito, se però questo nuovo tema ci và proprio stretto possiamo crearne uno nuovo, l'importante è che sia un sottotema del tema AMP (leggere attentamente il file README.md all'interno della cartella del subtheme), ricordarsi poi di selezionare il nuovo tema nella pagina di configurazione del modulo.

Come visualizzare un apagina AMP

Una volta che abbiamo finito tutte le configurazioni necessarie possiamo vedere il frutto dei nostri sforzi, questo è il mio:

visualizzazione in versione AMP di una pagina

Diciamo che non mi sono molto impegnato a livello grafico! Ma tanto era solo un'esperimento.

Comunque per vedere la versione AMP delle pagine del nostro sito web, aprire una pagina creata con uno dei content type che avevamo scelto, e sulla barra degli indirizzi del browser, alla fine dell'Url aggiungere "?amp" senza virgolette (es: www.nome_del_sito/blog/viva-la-cioccolata?amp).

Inoltre possiamo fare il debug/validazione della pagina aggiungendo alla fine dell'Url "#development=1" (es: www.nome_del_sito/blog/viva-la-cioccolata?amp#development=1) e poi aprire la console cliccando F12. Ricordo inoltre che la Google Search Console ha una sezione dedicata a queste pagine dove vengono riportati tutti gli errori.

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
2 + 10 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.