Negli ultimi tempi, l’ottimizzazione di pagine da presentare all’interno dei dispositivi mobile sta facendo passi da gigante.

Il precursore in questo ambito è stato Facebook. Nell’aprile del 2015 ha introdotto all’interno della sua piattaforma USA gli Istant Article, pagine ottimizzate che si contraddistinguono per il caricamento immediato.

Google non è stato a guardare e, 6 mesi più tardi, ha pubblicato un progetto chiamato AMP Page.

AMP è l’acronimo di accelerated mobile page, un framework che ha come obiettivo quello di caricare istantaneamente contenuti pesanti come video e immagini che, sempre di più, sono presenti nelle pagine visualizzate dagli utenti mobile.

esempio amp

Il progetto si appoggia al formato HTML AMP, una versione di html ideata per garantire le migliori performance di caricamento delle pagine e che detta alcune semplici regole di limitazione dei contenuti interni alle pagine. I principali sono questi:

  • Tutti gli script vengono inclusi in modo asincrono e l’autore non può aggiungere codice javascript personalizzato; l’interattività (es: caroselli di immagini, menù in accordion) viene relegata ai tag che la libreria AMP js mette a disposizione. Le dimensioni dei contenuti personalizzati che si vogliono inserire nella pagina (immagini, video, iframe…) devono essere dichiarate, ad esempio in questo modo:<amp-img src=”path_immagine.jpg” width=466 height=355></amp-img>, cosicché il framework AMP possa determinare dimensione e posizione di ciascun elemento prima che questi vengano scaricati.

Qui  vediamo che l’AMP page viene costruita tramite l’aggiunta nel tag html del suffisso AMP e di markup obbligatori quali:

  • <meta charset=”utf-8″>
  • Rel=canonical”: l’attributo in questione si utilizzerà per specificare la pagina identica ma non ottimizzata contenuta nel normale sito; se questa non è presente il riferimento andrà alla pagina AMP
  • Meta viewport per specificare larghezza e zoom della pagina
  • <script async src=”https://cdn.ampproject.org/v0.js“></script>
  • Tutto ciò che è contenuto in <style amp-boilerplate>
  • <script type=”application/ld+json”>: il codice contenuto all’interno di questo tag invece non è obbligatorio, ma serve per i dati strutturati di Google e permette di far comparire le pagine in particolari posizioni con l’aggiunta di informazioni visibili direttamente nella Serp di Google

Per verificare se la pagina è valida si deve inserire #development=1 dopo il link della pagina, aprire la dev tool console di Google e verificare che tutto sia convalidato.

In conclusione, le pagine AMP possono rivelarsi molto utili per 3 motivi: permettono di caricare i contenuti sui dispositivi mobile in maniera istantanea, non dipendono dalla piattaforma di utilizzo come fanno gli Istant Article e sono posizionate meglio grazie a un carosello posto in cima alla Serp di Google.

Lorenzo