Mini guida per scrivere correttamente il tuo primo post in AMP

,

Qualche settimana fa, a termine del primo workshop su AMP in Italia, ti avevo raccontato le mie impressioni. La voracità con cui oggi i “dati” vengono mangiati dai dispositivi mobili ha dell’incredibile. Il tuo sito, viene visitato prima da smarthphone poi, forse, da deskstop. Se il tuo sito è lento, con molta probabilità viene abbandonato immediatamente.

Ecco cosa scrive a proposito di AMP, Oscar Perez di Condé Nast, uno dei più grandi gruppi editoriali:

Abbiamo adottato AMP su Vanity Fair poco più di un anno fa. Dopo il lancio, i risultati del traffico e della ricerca sono stati molto positivi: il “click through rate” attraverso la ricerca di Google è passato dal 5,9% (normale) al 10,3% (AMP) e la posizione media di ricerca è passata da 5,9 (normale) a 1,7 (AMP). Oggi, AMP rappresenta il 79% del traffico di ricerca mobile e il 36% delle nostre visite totali. 

I dati ribadiscono l’efficacia di questa tecnologia, e come non possa essere più trascurata dagli editori e dai blogger.

AMP di base è molto semplice e si fonda su tre elementi principali:

  • AMP HTML;
  • AMP JS;
  • AMP CACHE;

tutti e tre concorrono per rendere le pagine AMP estremamente veloci. Citando testualmente ampproject.org:

AMP HTML è un HTML con alcune restrizioni. Le librerie AMP JS assicurano il rendering veloce delle pagine AMP HTML. La CDN AMP (opzionale) distribuisce le pagine AMP HTML

Si hai capito bene, AMP porta una restrizione a favore della velocità. Viene messo un limite all’uso (e all’abuso!) di css e javascript che vanno ad appesantire notevolmente le pagine web, spesso non portando nessun beneficio reale per la fruizione da mobile.

Ti mostro nel dettaglio una semplice pagina AMP, e te ne descrivo i componenti:

[php]
<!doctype html>


Hello, AMPs

 

TITOLO DEL POST

testo del mio bel post su AMP

[/php]

Questa è una pagina semplicissima, ma di sicuro, avrai notato qualche differenza rispetto ad una pagina html tradizionale.

Innanzi tutto noterai che qui:

<html amp lang="it">

è presente la dicitura “AMP”, che può essere sostituita dal più stiloso fulmine

<html  lang="it">

e indica che all’interno di questo top tag, si troverà del contenuto AMP. Successivamente viene caricata la libreria AMP JS, https://cdn.ampproject.org/v0.js in modo ovviamente asincrono. Dopo il tag title, forse il pezzettino di codice più significativo di tutti

<link rel="canonical" href="http://url_del_domio/non_AMP.html">

Indica l’url della pagina HTML non AMP. A sua volta tale pagina html conterrà lo stesso link alla pagina AMP. In pratica questa semplice riga di codice rende la tua pagina AMP individuabile e identificabile come tale da Google che (se priva di errori) sarà in grado di visualizzarla tra i risultati nelle sue ricerche on mobile, e memorizzarla all’interno della cache.

A seguire la dichiarazione di visualizzazione “viewport” e successivamente viene definito l’AMP Boilerplate Code: prendi questi tag “così, come sono” senza porti troppe domande e incollali nel tuo codice.  La loro presenza è necessaria, per far riconoscere come valido il file AMP.

Ecco, che dopo una serie di codici decisamenti poco interessanti, viene dichiarato il primo tag proprio di AMP.  Quella che segue è la dichiarazione di un foglio di sitle.

    <style amp-custom>
        h1 {
          color: red;
        }
    </style>

I css devono essere tutti in-page e devono avere un peso complessivo massimo di 50k.

Nel nostro esempio, il tag <body> contiene un semplice <h1>, ma sappi che AMP può disporre di molti tag, classificati come:

  • built-in: componenti inclusi nella libreria standard, come “amp-img”;
  • extended: estensioni della libreria base, come ad esempio “amp-youtube” per mostrare video di un canale;
  • experimental: componenti ancora in fase sperimentale;

Tutta la documentazione per imparare a utilizzare AMP nel dettaglio la puoi trovare qui: www.ampproject.org

Se vuoi dei PROFESSIONISTI per “ampizzare” il tuo blog o il tuo magazine online:

CONTATTACI