Accelerated Mobile Pages (AMP)

Sito-web-sicuro
Sito web sicuro
febbraio 5, 2017
Hosting
Server Linux per WordPress, quale?
febbraio 24, 2017
Mostra tutto

Accelerated Mobile Pages (AMP)

Accelerated-Mobile-Pages

Hai solo tre secondi per visualizzare qualche cosa sul cellulare prima di mollare e andare da un’altra parte. Con un margine di tempo così basso la velocità del tuo sito web sui dispositivi mobili è di fondamentale importanza. Ecco dove entra in gioco Accelerated Mobile Pages (AMP).

Accelerated Mobile Pages (AMP) è un progetto nato per migliorare la velocità di caricamento delle pagine web sui dispositivi mobili e in grado di lavorare su sistemi diversi. A differenza per esempio d Facebook Instant Articles che è dedicato ad un unico ambiente (i Facebook Instant Articles funzionano solo su Facebook), come l’applicazione di Apple News che è disponibile solo per i dispositivi Apple. Tutto quello che si ripropongono questi progetti, AMP promette di farlo su più piattaforme. Già ora articoli in formato AMP sono utilizzati dalla Google search, LinkedIn, Twitter e Pinterest.


Usa AMP se pubblichi articoli sul blog

I contenuti in formato AMP hanno una migliore visibilità nei risultati di ricerca di Google e si caricano circa 4 volte più velocemente. Con l’altissima concorrenza sui contenuti, se pubblichi regolarmente articoli sul tuo blog, hai la necessità di configurare WordPress per generare articoli AMP.


Accelerated Mobile Pages: dove si vedono?

Chiariamo una cosa: gli articoli AMP non sono ancora la soluzione vera e propria fino a quando i browser mobili non aggiungeranno il supporto nativo per questo formato. I tuoi contenuti saranno quindi e comunque ancora dei file standard. Ma allora come potranno i tuoi utenti visualizzare i contenuti nella versione AMP? Solo ed esclusivamente quando accedono da una piattaforma che ne supporta il formato. Ecco qualche esempio:

  • Se qualcuno condivide uno dei tuoi articoli su Twitter. Quando un utente utilizzando l’applicazione Twitter apre il collegamento riceverà l’articolo AMP. Lo stesso vale per i contenuti accessibili tramite le applicazioni di Linkedin e Pinterest.
  • Quando qualcuno usa un browser da un dispositivo mobile per effettuare una ricerca su Google. Per una notizia di tendenza, una selezione di articoli AMP sarà visualizzata nella sezione ”Top Stories” dei risultati della ricerca. Se il tuo articolo farà parte di quella sezione, verrà visualizzata la versione formattata AMP.
  • Ogni volta che una nuova piattaforma aggiunge il supporto per i contenuti AMP. Il contenuto sarà offerto agli utenti di quella piattaforma in formato AMP.

Accelerated Mobile Pages: come fare?

Gli articoli AMP sono costruiti con una speciale libreria HTML di elementi personalizzati. AMP limita gli elementi HTML, CSS e le funzioni JavaScript per accelerare i contenuti su dispositivi mobili. Alcune delle restrizioni AMP comprendono queste caratteristiche:

  1. Tutti gli script devono caricare in modo asincrono. Le caratteristiche interattive devono essere aggiunte utilizzando l’HTML personalizzato di amp o un sandbox in un iframe. In questo modo la pagina web si caricherà senza dover aspettare che gli script vengano elaborati.
  2. Tutte le risorse esterne, come immagini, annunci, tweet incorporati e le immagini Instagram, vengono caricati come oggetti HTML e devono avere dimensioni precise in modo tale che la dimensione possa essere impostata prima che la risorsa venga scaricata.
  3. Gli stili CSS devono essere dichiarati in un foglio di stile in linea legato ad una dimensione massima di 50 kb.
  4. I download di font web (che sono spesso molto pesanti), vengono attivati prima di tutte le altre risorse, poiché gli script vengono caricati in modo asincrono
  5. Le animazioni non possono influenzare il layout di pagina.
  6. Il download delle risorse ha una priorità in base alla posizione: i contenuti above the fold sono caricati prima.

Queste linee guida sono applicate da uno strumento di validazione integrato in AMP. Le pagine che non riescono ad essere convalidate non possono essere indicizzate da Google o utilizzate nelle applicazioni che supportano il formato.


Riformattare un documento AMP

Se hai a che fare con un semplice sito web composto da un file HTML, un file CSS o due, e un paio di script, puoi riformattare la pagina in un unico documento AMP. Tuttavia, nella maggior parte dei casi, non ha senso riformattare ogni pagina del tuo sito. Meglio utilizzare un plugin per generare un secondo stripped-down di una versione AMP di ogni articolo che pubblichi. Ti domanderai: “Questo creerà contenuti duplicati!” Hai assolutamente ragione. Ecco perché è importante collegare correttamente la versione AMP della pagina alla versione standard con link di collegamento. La versione standard della tua pagina web è legata alla versione AMP con un link che assomiglia a questo:

<link rel=”amphtml” href=”http://www.esempio.com/amp_articolo_url”>. I collegamenti tra la versione AMP e la versione standard che utilizzano un elemento simile: <link rel=”canonical” href=”http://www.esempio.com/articolo_completo_url”>

Se ti senti un po’ travolto dal pensiero di dover imparare i codici HTML per AMP e creare documenti appositamente formattati, ho una buona notizia! C’è un plugin per questo. In realtà, ci sono alcuni plugin diversi già nella directory dei plugin di WordPress, dove puoi verificare digitando AMP.

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) Project

Installa e attiva il plugin AMP per articoli in formato AMP. Saranno generati automaticamente come: http://esempio.com/permalink-articolo/amp/. Attualmente, questo plugin genera solo articoli AMP per articoli. Quindi, non puoi visualizzare pagine come contenuto AMP.

CustomAMP

Custom AMP

Il plugin custom AMP consente di personalizzare l’articolo AMP generato dal plugin precedente. Dopo aver installato il plugin AMP, installa questo plugin per aggiungere un pannello AMP personalizzato nell’interfaccia di WordPress.
All’interno del pannello puoi aggiungere un logo di un sito web o una foto di presentazione, scegliere se visualizzare o meno i commenti, integrare l’articolo con WooCommerce. Visualizzare gli articoli correlati, aggiungere un menu di navigazione, aggiungere il codice di monitoraggio di Google Analytics. Aggiungere un CSS personalizzato, e aggiungere ulteriore html al piede dell’articolo AMP.

Assicurati sempre di convalidare le pagine AMP generate dal tuo sito web al fine di garantire che le modifiche apportate non creino pagine per non superano la convalida.

Pagefrog

Facebook Instant ArticlesGoogle AMP Pages di PageFrog

Il plugin PageFrog lavora assieme al plugin AMP per consentire uno stile personalizzato di articoli AMP. PageFrog può anche essere integrato con il plugin Facebook Instant Articles per controllare simultaneamente la comparsa di messaggi su entrambe le piattaforme mobili ottimizzate. Il plugin PageFrog è più completo rispetto al plugin custom AMP. Comprende l’integrazione con le piattaforme multiple di analisi. Si collega direttamente a Facebook Ads e Google AdSense, e aggiunge automaticamente una foto di presentazione.


Convalida le pagine AMP

La fase finale del processo di installazione di Accelerated Mobile Pages (AMP) è quello di convalidare le pagine. Le pagine che non superano la convalida non possono essere indicizzate e visualizzati da Google o utilizzate da altre piattaforme supportate. Fortunatamente, il test per la convalida è semplice, anche se la correzione degli errori di validazione può esserlo molto meno. Ecco come eseguire il test per la validazione AMP:

  • Apri un browser web per accedere alla versione AMP di uno dei tuoi articoli.
  • Apri la console JavaScript. In Chrome è possibile aprendo il menu contestuale (tasto destro del mouse nella finestra del browser su un PC o tenendo premuto Ctrl e fare clic su un Mac), selezionando Ispeziona e facendo clic sulla scheda Console. In modo analogo si aprirà la console con altri browser.
  • Aggiungi #development=1 alla fine dell’URL AMP, in modo che l’URL sia: http://www.esempio.com/url_articolo_amp#development=1. Premi Invio per caricare la pagina ed eseguire ila validazione AMP. Guarda la console per i messaggi.

Convalida

Il messaggio che vedrai è la convalida con successo di AMP. Se la pagina non riesce a convalidare il link, è necessario rivedere i messaggi nella console per determinare cosa ha causato il fallimento. Prendere le contromisure necessarie per affrontare il problema identificato.


Conclusioni

Con le piattaforme come Google, Twitter, Pinterest, Linkedin, il formato di AMP è già un fattore importante per l’ottimizzazione mobile se pubblichi post del blog o articoli di notizie con regolarità. Inizia a configurare il tuo sito web per generare articoli Accelerated Mobile Pages (AMP) che siano convalidati con successo. Per fortuna, ci sono già alcuni plugin in WordPress  che rendono il processo abbastanza semplice.



NON ESISTONO DOMANDE STUPIDE O INUTILI

Le domande hanno solo bisogno
della risposta giusta.

Marcello Moresco
Marcello Moresco
Marcello Moresco è un Art Director - SEO Specialist che negli anni si è specializzato nella realizzazione di progetti web 2.0 e 3.0. Gestisce il gruppo Facebook: Wordpress facile e si occupa di grafica, SEO e ottimizzazione della Page Speed per i propri clienti. CEO e project manager di Gestione WP gestisce il sito, il blog e tutti i servizi assieme agli altri professionisti della squadra. Gestione WP assistenza WordPress e realizzazione siti web è anche su Facebook: Assistenza WordPress.