AMP – Accelerated Mobile Page: teoria e pratica su WordPress

15
5299
amp wordpress

Da ottobre del 2015 sul web si è incominciato a parlare di AMP, una tecnica per creare, via codice, dei siti web ottimizzati ai fini della velocità di caricamento delle pagine per i dispositivi mobile come smartphone e tablet, che in genere utilizzano delle connessioni diverse dalla ADSL e che spesso offrono limitazioni al download di dati ad alta velocità.

Questa iniziativa, di carattere open source, vede coinvolte molte grandi aziende, fra cui Google, Twitter, WordPress.com, Pinterest, LinkedIn e Adobe Analytics, per lo sviluppo di codice necessario a generare contenuti ottimizzati per il caricamento e la successiva visualizzazione sui dispositivi mobile, soprattutto dopo i dati di accesso alla rete, che in questi ultimi anni hanno visto aumentare le statistiche di accesso ad internet mediante device come gli smartphone.

Questo articolo vi fornirà qualche specifica sulla tecnica AMP, ma per i completi riferimenti vi consiglio di approfondire l’argomento sul sito ufficiale. Ulteriore dato da considerare è che ad oggi questa tecnologia è in via di sviluppo e per questo non è conveniente utilizzarla su un sito di produzione fino a che non sarà pienamente testata e stabile.

Prima di decidere se sviluppare o meno questa tecnologia su un vostro sito, leggete le mie considerazioni sull’argomento in fondo a questo articolo.

Cerchi un caso pratico da analizzare?

Per informazioni dettagliate su come sviluppare una versione AMP di un sito WordPress consulta il nostro caso studio.

Cos’è AMP

AMP, di cui trovate maggiori informazioni sul sito dedicato, è una modalità di sviluppo delle pagine web per il download di contenuti ad altissima velocità.

Per raggiungere questo scopo è necessario lavorare su tre fronti:

  • Implementare HTML AMP.
  • Utilizzare AMP JS.
  • In maniera facoltativa utilizzare un servizio per il download di contenuti ottimizzato mediante AMP CDN.

AMP HTML

L’AMP HTML è una estensione del linguaggio HTML con delle proprietà dedicate AMP. In pratica è necessario, in una pagina AMP, sostituire alcuni tag HTML con i corrispondenti tag AMP HTML. Non tutti i browser supportano questi tag, ma grazie agli aggiornamenti automatici delle app dei dispositivi mobile non si corre il rischio di servire pagine non visualizzabili.

Cos'è la tecnologia AMP, Accelerated Mobile Page, come svilupparla e quali sono i vantaggi? Condividi il Tweet

Per comprendere come si utilizzano i tag AMP HTML vi è una guida dedicata su GitHub.

AMP JS

Le librerie di AMP JS offrono la possibilità di utilizzare del codice javascript ottimizzato per migliorare le prestazioni, gestire meglio il carico di download degli script e il supporto per i tag AMP HTML. Tutte le risorse, ad esempio, sono caricate esternamente e in maniera asincrona, in modo tale da non bloccare la visualizzazione dei contenuti nel processo di rendering della pagina.

Sempre su GitHub è possibile scaricare o visualizzare il codice Javascript AMP JS.

Come fa AMP a velocizzare le perfomance di un sito web

Andiamo a vedere alcune delle soluzioni che utilizza il codice AMP per migliorare la visualizzazione di una pagina HTML, per la lista completa delle funzionalità vi rimando all’articolo dedicato.

Vengono eseguiti solo script JS asincroni

Javascript offre delle soluzioni per rendere più elegante e funzionali le pagine di un sito web, mediante animazioni e effetti, oltre al rendering dinamico dei contenuti. Questo però richiede il caricamento e l’esecuzione di funzioni che rallentano la velocità con cui la pagina viene visualizzata. Il codice JS asincrono evita questi problemi, eseguendo i processi che rallentano la visualizzazione dei contenuti solo dopo che questi sono stati mostrati agli utenti. Nel caso di una pagina costruita secondo la logica AMP è possibile utilizzare del codice Javascript di terze parti, non ottimizzato per la velocità, ma solo se questo viene caricato in un iframe, non impedendo così il rendering della pagina.

Carica solo le risorse necessarie

Indicando le dimensioni degli elementi nel codice HTML, AMP in funzione della risoluzione del monitor utilizzato per visualizzare il layout costruito secondo queste specifiche, scaricherà solo gli elementi (immagini, iframe e annunci ad esempio) ottimizzati per la pagina.

E’ permesso solo l’uso di CSS in linea

Per evitare che il caricamento degli stili degli elementi influisca sulla velocità di visualizzazione della pagina AMP permette l’uso solamente di CSS in linea e che la somma delle istruzioni CSS non pesi più di 50 kilobite.

Ottimizza l’uso del prefetching

Come nel responsive web design AMP analizza quali elementi verranno scaricati e ne effettua il download inserendoli in una coda a differente priorità. Quindi le immagini e gli annunci sponsorizzati verranno caricati solamente se l’utente li visualizzerà, in seguito o sul momento.

Come implementare AMP su WordPress

Ad oggi vi sono due soluzioni per implementare AMP su un sito wordpress.

  • Creare un layout ottimizzato secondo le specifiche fornite dalla Accelerated Mobile Page e servirlo ai dispositivi con user-agent appartenenti alla categoria dei dispositivi mobile. fornendolo in pasto al motore di ricerca mediante un link in un metatag, su un url differente (ad esempio aggiungendo /amp/ in coda all’URL).
  • Utilizzare la plugin dedicata per la tecnologia AMP.

Andiamo ad esaminare l’uso della plugin, mentre per la creazione personalizzata di layout ottimizzati AMP consiglio di utilizzare il materiale rilasciato sul sito ufficiale.

La plugin AMP per WordPress

Questa plugin per WordPress, sviluppata dalla Automattic in collaborazione ad alcuni programmatori esterni alla società di WordPress.org la si può scaricare dalla directory dei plugin di WP ed è di semplice installazione e configurazione, in quanto non è necessario fare quasi nulla per renderla operativa.

Analizziamo un plugin per #Wordpress per implementare la tecnologia #AMP Condividi il Tweet

Una volta attivata infatti non si dovrà fare altro che rigenerare i permalink del nostro sito WordPress e potremo trovare una versione AMP dei nostri contenuti aggiungendo /amp/ al permalink della pagina da visualizzare.

Se non abbiamo configurato i permalink del nostro WordPress potremo trovare la versione AMP delle nostre pagine aggiungendo ?amp=1 all’url del contenuto da visualizzzare.

Vuoi maggiori informazioni sulla plugin AMP?

Scopri i risultati di una prova pratica della versione 0.3.3 su un sito online.

Come si rigenerano i permalink di WordPress

rigenerare permalink wordpress

Per rigenerare i permalink la procedura è assai facile. Dal pannello di amministrazione di WordPress , che potete trovare sulla sinistra una volta che avete fatto accesso come administrator, selezionate Impostazioni >> Permalink. Dalla pagina che si aprirà premete sul bottone Salva le modifiche in basso. Il CMS rigenererà così tutti gli url dei contenuti fino a quel momento caricati e utilizzerà le nuove impostazioni per quelli futuri.

Per maggiori informazioni sulla configurazione ottimale dei permalink vi rimando al capitolo relativo agli URL in un mio precedente articolo relativo alla configurazione di Yoast SEO.

Analizziamo una pagina AMP generata mediante questa plugin

Esaminiamo nello specifico un contenuto wordpress generato mediante la plugin AMP per WP. Nel mio caso ho effettuato un test su una copia in locale di questo sito web.

versione normale vs AMP

Come da specifiche la versione AMP di un articolo vede stravolto il layout della pagina:

  • Header, footer e sidebar spariscono.
  • Il menù di navigazione scompare.
  • Spariscono gli elementi accessori dell’articolo: bottoni di condivisione sociale, articoli correlati, box autore, tag associati.
  • L’impaginazione del contenuto diventa minimale, tutto il codice CSS per generare le call to action e i diversi box della pagina si riduce al midollo.

La pagina così facendo si carica in un lampo, in quanto su server locale che richiede autenticazione per l’accesso non posso monitorare il tempo di caricamento del contenuto, ma visivamente si nota una netta differenza.

Analizzando il codice noto con piacere che la plugin aggiunge un metatag canonical, nella pagina con l’articolo in versione AMP, che punta al contenuto originale, evitando così possibili penalizzazioni SEO a causa di Google Panda per contenuto duplicato e aggiunge ad ogni articolo, nella versione originale, il metatag <link rel=”amphtml”> con relativo attributo che punta alla versione AMP del nostro contenuto.

Insomma per renderla più semplice possiamo dire che:

  • l’articolo con layout “normale” avrà un metatag a puntare alla versione AMP;
  • la versione AMP del nostro contenuto avrà un metatag canonical a puntare all’articolo “normale”;

Quello che assolutamente non mi piace è il fatto che sparisca il menù di navigazione, lasciando all’utenza la possibilità di navigare solo mediante i link all’interno dell’articolo, nella versione AMP l’usabilità del sito web in generale è completamente compromessa.

Naturalmente però questa plugin è ancora agli inizi ed è necessario aspettare i successivi sviluppi per installarla su un sito di produzione.

Analizzare gli errori nel codice AMP grazie a Google Search Console

google search console AMP

L’ex strumento per i webmaster, ora Google Search Console, offre uno strumento per l’analisi delle pagine AMP che spiega gli errori nel codice e dove intervenire per effettuare le dovute correzioni.

Per utilizzare questo tool è necessario loggarsi allo strumento di analisi dei siti web, offerto dal motore di ricerca, e dopo aver selezionato il sito che si vuole monitorare, dal menù laterale premere su Aspetto della ricerca >> Accelerated Mobile Page.

Nel caso il nostro sito abbia delle pagine codificate secondo la tecnica AMP, Google Search Console ci dirà se sono corrette e quindi indicizzabili dal motore di ricerca o se hanno errori.

UPDATE (20 settembre 2016): I metodi per analizzare gli errori di una pagina AMP sono tre e per questo ho realizzato un articolo apposito per spiegarli.

Perché e quando usare AMP

Come abbiamo visto AMP inserisce un “turbo” alla visualizzazione delle pagine sui dispositivi mobile e questo fattore, sicuramente, potrebbe in futuro migliorare il ranking sui motori di ricerca dei contenuti così serviti. La fruizione dei contenuti sui device mobili diviene di facile lettura, visti gli stili CSS semplici e lineari con cui il testo viene impaginato, ma a discapito degli strumenti atti ad abbassare la frequenza di rimbalzo, inducendo i visitatori a navigare altre pagine.

I problemi arrivano per i siti che lavorano sulla grafica o i portali aziendali, che si trovano ad avere un layout stravolto, con molti degli elementi necessari a far convertire l’utenza, nascosti.

In più ricorda, su una pagina AMP NON è possibile far visualizzare i form, quindi non potrai acquisire lead mediante una pagina web in questo formato.

Ottimizzare i metatag forniti da Yoast SEO

yoast amp glue

Se hai installato e configurato Yoast SEO sul tuo sito web, Joost de Valk ci fa sapere che per servire correttamente i metatag presenti nel tuo sito è necessario aggiungere un plugin aggiuntivo, Glue for Yoast SEO & AMP, che puoi scaricare nella directory di WordPress. Il founder di Yoast ci fa sapere che presto questa funzionalità verrà inserita all’interno del plugin, ma per ora è necessario installare questo aggiornamento per ottenere nei metadati:

  • il nome della tua azienda (configurabili in Yoast nell’apposita sezione);
  • il logo della tua azienda;
  • il metatag canonical in base a quello che fornisci nel Meta Box di Yoast che potrebbe essere diverso da quello configurato automaticamente dal plugin AMP;
  • la featured image o, se l’hai configurata, la Facebook image impostata sempre nel Meta Box, nella parte relativa ai social;
  • la metadescription del tuo post, configurata nel Meta Box, che altrimenti non verrebbe visualizzata.

In più, mediante questa plugin, è possibile personalizzare un minimo l’aspetto grafico della versione AMP del nostro sito, coordinandola con i colori aziendali.

Joost de Valk ha aggiornato questa plugin, integrando delle funzionalità per migliorare l’aspetto delle pagine AMP generate con la plugin dell’Automattic e aggiungere interessanti funzionalità (come ad esempio implementare il codice di tracciamento di Analytics). Per maggiori informazioni ti consiglio di leggere un mio articolo su Yoast e AMP, in cui spiego nel dettaglio questa plugin per WordPress.

Considerazioni

La tecnologia AMP è sicuramente da tenere in considerazione per chi sviluppa siti web e per chi li vuole ottimizzare per la SEO, ma è necessario trovare il giusto compromesso tra tempi di risposta delle pagine e impaginazione atta a far convertire la possibile utenza. Ulteriore fattore che va considerato è che nelle pagine AMP non è possibile inserire dei form, limitando enormemente l’interazione con l’utenza. Per cui facciamo attenzione e seguiamo quel che dice il saggio zen 3.0:

Se si carica lentamente non avrai conversione.
Se si carica velocemente ma non piace non avrai conversione.
La conversione sta nel mezzo.

aritstotele caricamento pagina

Fine febbraio 2016: Un aggiornamento sulle mie considerazioni di un mese fa.

La tecnologia Amp si è dimostrata molto utile per utti i siti di news, iscritti al servizio di Google News, ma per tutti gli altri non vi sono ancora utilità pratiche, in quanto non offre un incremento nel posizionamento organico delle versioni dei contenuti “ampizzati”.

Attenzione quindi! Come ho detto in un commento ad un mio articolo su una plugin per WordPress per generare una versione AMP del contenuto, prima di sviluppare questa tecnologia è opportuno aspettare del tempo e vedere se davvero avrà fini pratici per la SEO o se al contrario non porterà vantaggi.

Agosto/Settembre 2016: le pagine AMP entrano in SERP

Google ci fa sapere ad agosto che incomincerà a mostrare sulla SERP le pagine AMP per tutti i siti, contrassegnandole da una icona particolare nello snippet, e non solamente per quelli dedicati alle news. Questo però non influenzerà il posizionamento, ma potrebbe migliorare il CTR sugli snippet in SERP, dopo che l’utenza che utilizza i device mobile comprenderà che i siti di questo tipo sono più veloci da caricare.

AMP – Accelerated Mobile Page: teoria e pratica su WordPress
5 (100%) su 6 voti

VIALa plugin AMP per Wordpress
FonteIl progetto AMP
CONDIVIDI
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL. Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale. Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

15 COMMENTI

  1. Ciao, domanda: ma si deve per forza cambiare il permalink? il cambio non fa perdere tutti i riferimenti ottenuti? Oppure google da il redirect automatico?

    • No Stefano, non è obbligatorio il cambio di permalink, ma consigliato per la SEO (per maggiori informazioni ho scritto un articolo dedicato), nel caso di siti con permalink non ottimizzati. Ricorda però che, se effettui il cambio di permalink di un sito esistente, è opportuno aggiungere delle regole al tuo file .htaccess per inoltrare correttamente le pagine senza generare errore 404. Le regole nel file .htaccess sono da definirsi caso per caso. Se però modifichi i permalink dalla condizione di default di WordPress l’inoltro automatico alle nuove URL dovrebbe farlo il CMS, se non ricordo male (conviene prima effettuare una prova, e su questa ultima mia affermazione non ho garanzia al 100%).

  2. Nel mio caso i bottoni social non spariscono ma si trasformano in un orribile elenco puntato testuale che occupa quasi tutta la pagina. Come posso fare a rimuoverli?

    • Ciao Milena,
      dipende da alcuni fattori.
      Come vengono generati i bottoni di condivisione sociale del tuo sito?
      Usi una plugin o sono proprietari del tema?
      Se sono generati dal tema la soluzione migliore è contattare gli sviluppatori del tuo aspetto grafico e chiedere loro come fare a disattivarli quando attivi la plugin, oppure sviluppare da te il codice per spegnere quella sezione quando viene eseguito il codice AMP.
      Se è una plugin il concetto è lo stesso, ma è necessario riferirsi a quel software e non ad una funzione del tema.
      Un altro metodo potrebbe essere quello di aggiungere, negli stili CSS del layout AMP una regola display:none; per il div o la classe che li contiene.

      Oppure provare a cambiare plugin per il codice AMP. Ho pubblicato un tutorial su un altro software per WordPress dedicato a tale scopo che ho scoperto essere più performante (https://www.posizionamento-seo.com/tecnica/content-management-system/wordpress/facebook-instant-articles-google-amp-pages-plugin-wordpress/).

      Mi permetto di consigliarti di effettuare le prove su un sito di test (online o offline), in modo da poter tornare sui tuoi passi e effettuare le modifiche sul sito di produzione solo quando sei sicura di non avere problemi. E aggiungo ancora qualche domanda: sei davvero sicura che hai bisogno di una versione AMP del tuo sito? Sei iscritta a Google News?

      • I bottoni di condivisione sono generati tramite il plugin Sharify, ho provato a sostituirlo ma il risultato non cambia.
        Come plugin per AMP utilizzo già quello da te segnalato. Ho anche provato a nasconderli tramite CSS, ma rimangono comunque visibili.

  3. In 5 minuti mi hai portato dalla totale ignoranza sull’argomento alla sua conoscenza e valutazione: grazie!

  4. Ciao, ho installato il plugin e rigenerato i permalink. Dalla pagina della search console di google, quando vado ad effettuare il test se AMP è implementato sul mio sito, ottengo test negativo, in pratica è come se il plugin non avesse fatto niente… hai idea di come mai succeda questo? ottimo articolo

    • Ciao Luca, grazie per i complimenti.

      Da quanto tempo hai effettuato l’implementazione della plugin AMP? Su Google Search Console devi dare tempo allo strumento per comprendere la presenza del tag <link rel="amphtml"> e seguire di conseguenza il link alla versione AMP, in quanto il processo non è immediato e varia in funzione del passaggio dello spider sul tuo sito.
      Analizzando il tuo sito noto che il plugin ha inserito il riferimento alla versione AMP dei tuoi post e aggiungendo all’url il suffisso /amp/

  5. In questo articolo c’è spiegato davvero tutto, ma io continuo ad ricevere errori dalla Google Search Console. Allora mi sono imbattuta in questo sito e ho inserito tutto nel file functions.php.

    Ora non so come verificare dalla search console se gli errori sono stati eliminati. Tra l’altro utilizzo lo stesso tema di posizionamento-seo.com ci sarà forse qualche incompatibilità? Ho anche installato, ad hoc, il plugin Glue con Yoast e configurato in tutte le parti. Ma gli errori persistono!

    • Ciao Jjm84,
      Grazie per la risorsa, ma il link è già presente nell’articolo 😀 e grazie per il tuo commento che ha un retrogusto di spam, ma se mi sbaglio perdonami!
      A prescindere dal sospetto provo a dedicarti lo stesso qualche minuto, ma per quanto riguarda le tue domande prima di poterti rispondere, sono necessarie maggiori informazioni tipo:

      • Che cosa hai inserito nel file functions.php, cosa intendi con “tutto”?
      • La Google Search Console ti spiega dove sussiste l’errore, toccherà poi a te correggerlo.
      • Come mai dici che non sai se gli errori sono verificati e corretti e poi dici che persistono? Dopo aver fatto accesso alla Google Search Console e selezionato la proprietà di cui verificare le pagine AMP dirigiti su Aspetto delle ricerca >> Accelerate Mobile Page e guarda il grafico e il report correlato. Se vi sono segnate 0 pagine AMP con errori vuol dire che li hai corretti, altrimento controllo il messaggio di errore che ti spiega dove intervenire per eliminare il problema. Per maggiori info ti allego uno screenshot di un sito a cui ho corretto gli errori. correzione errori amp search console
      • Non so se questo tema supporta AMP, in quanto non ho sviluppato questa tecnologia su questo sito, che ad oggi mi sembra prematura per il fine di questo portale. Il plugin dell’Automattic che citi funziona però a prescindere dal tema grafico, quindi non dovrebbe essere li l’errore.
  6. Su WordPress Siete Riusciti Ad Ampizzare La Home Page? …A Me E’ L’Unica Pagina Che Non Viene Trasformata… Capita Anche A Voi?

    • Ciao Suxever, dipende da come è impostato il tuo tema e la plugin dell’Automattic. Ad esempio nel mio caso non ho voluto sviluppare una versione AMP delle pagine, ma solo degli articoli per questioni di usabilità. Se vuoi fare diversamente utilizzando il software che ho descritto in questo post potresti utilizzare in aggiunta il plugin dedicato di Yoast (Glue for AMP). Ti dico subito però che:

      • Di mio non ho testato questa funzionalità
      • Per maggiori informazioni leggi un articolo su questoa argomento che scrissi tempo fa sui consiglio per le pagine AMP ad opera di Yoast

LASCIA UN COMMENTO