AMP – Pagine Web Mobile Accelerate GOOGLE – Come creare pagine AMP WordPress

AMP-google-accelerated-mobile-pages
AMP-google-accelerated-mobile-pages

AMP è il progetto di GOOGLE che mira a creare siti web con pagine mobile che carichino istantaneamente.

Smartphone e tablet hanno rivoluzionato il nostro modo di accedere alle informazioni. Oggi la gente consuma una enorme quantità di notizie sui propri telefoni.

Il bisogno di chi sfrutta una connessione Mobile per navigare, è quello di caricare le pagine del sito web aziendale che sta navigando istantaneamente.

E’ proprio questa la domanda a cui Google vuole rispondere con il progetto AMP.

Gli editori (ma anche le aziende) di tutto il mondo utilizzano il web mobile e siti mobile per raggiungere i lettori.

Tale esperienza può spesso lasciare molto a desiderare. Ogni volta che una pagina web richiede troppo tempo per caricare, si perde un lettore e l’opportunità di guadagnare denaro attraverso la pubblicità o abbonamenti.

Questo progetto di Google pur essendo stato rilasciato ad Ottobre 2015, oggi assume un importanza globale per i siti web o i blog aziendali.

Questo nuovo standard è infatti entrato recentemente tra i fattori che influenzano il posizionamento Google di un sito web e si trova anche sulla suite di strumenti Webmaster di Google (detta search console).

In questo articolo scopriamo :

Cosa è la Tecnologia AMP (Accelerated Mobile Pages)?

AMP è un modo per costruire pagine web per contenuti statici che rendono veloce. AMP in azione consiste di tre diverse parti:

  • AMP HTML
  • AMP JS
  • Google AMP Cache.

AMP HTML è HTML con alcune restrizioni per prestazioni affidabili e alcune estensioni per la costruzione di contenuti multimediali troppo complessi per l’HTML di base.Il Progetto Google AMP cache può essere utilizzato per creare le pagine cache HTML in struttura AMP.

 

Come AMP accelera le prestazioni delle pagine Web?

Non permette il caricamento di Javascript di terze parti, per non ritardare il caricamento delle pagine.
Le pagine AMP hanno propri elementi (anche Javascript). Essi sono disegnati per mantenere elevate le performance di caricamento.

Le risorse esterne come le immagini o le pubblicità devono avere un comando che definisca la loro dimensione in HTML. In questo modo la pagina AMP può definire il loro spazio, prima di scaricarle.

Le pagine AMP(Accelerated Mobile Pages) non permettono a meccanismi esterni di impedire il caricamento della pagina. le AMP (Accelerated Mobile Pages) supportano cose come le Lightbox, integrazioni instagram o twitter.

AMP non permettono il caricamento di Stili esterni alla pagina, tutte le indicazioni di stile dei testi dovranno essere contenute nella pagina stessa. Inoltre le indicazioni di stile non devono impegnare la pagina per più di 50 Kilobytes. Questo richiederà a chi disegna le pagine uno sforzo di maggiore ordine nel disporre questo lato della pagina.

Le AMP(Accelerated Mobile Pages) non permettono alcun tipo di animazione, solo transizioni, per far si che non sia richiesto un ricalcolo del layout di pagina.

Le AMP (Accelerated Mobile Pages) creano una gerarchia di download. Le risorse più grosse e lente vengono posticipate rispetto a quelle più veloci e leggere(come il testo). Altre non vengono addirittura caricate se ritenute non importanti.

 

 

 

Disegnate per caricare istantaneamente

Questa tipologia di pagine è disegnata per caricare istantaneamente. Le nuove API Preconnect, sono pesantemente utilizzate per comunicare più velocemente possibile le richieste HTTP.
In questo modo una pagina può essere renderizzata, prima che un utente faccia esplicita richiesta di navigarla.

La tecnologia AMP è ormai chiaramente un requisito tecnico indispensabile per un sito Mobile. Deve essere implementata sul proprio sito web, se si vuole orbitare nelle prime posizioni della classifica Mobile di Google.

Attenzione però, non stiamo dicendo che implementando la tecnologia AMP sarete automaticamente primi su Google. Ci sono tanti elementi che posizionano al meglio un sito web, ma certamente se avete un sito ben posizionato, attivare la tecnologia AMP sarà di grande aiuto a migliorare ancora.

Come Implementare le Pagine AMP Google su WordPress

Con la notizia che Google lancerà le sue pagine mobile accelerate (AMP) per tutti i risultati organici, anche al di là delle ‘Top Stories’, l’ansia per coloro che hanno un sito E-commerce o un sito Mobile appena fatto, ha iniziato a salire.

Non preoccuparti!
Ci sono cinque ragioni solide per cui non è necessario prendere dal panico …

  • Hai tempo fino alla fine dell’anno.
  • Google AMP “non è tecnicamente” un segnale di posizionamento(lo è ufficiosamente)
  • E’ * abbastanza * facile implementare le AMP su WordPress.
  • Il cinico che c’è in te starà probabilmente pensando che Google butterà a mare l’intero progetto dopo un anno in ogni caso (vedi: Authorship)
  • Ci sono cose probabilmente più importanti di cui preoccuparsi
  • Oggi ci concentreremo sui primi tre punti, perché in ultima analisi implementare le AMP AMP significa fornire una esperienza più veloce, e più user friendly ai visitatori della ricerca mobile per il nostro sito web ed è, come ho detto, * abbastanza * facile da implementare. Quindi, si può anche dare una chance al lavoro di AMP.

Eh Sì, devi proprio fornire un esperienza mobile friendly il più veloce, e più facile possibile all’interno delle tue Pagine WEB . Anche se non accelerate(AMP). Quello si che è un segnale di posizionamento.

Eeeh Sì, sicuramente sarebbe bello che Google promuovesse “istruzioni su come fornire migliori pagine agli utenti“, piuttosto che continuare a ripetere che i webmaster devono implementare, essenzialmente una “soluzione rapida”.

Ma al momento Google ci ha dato un segnale forte sul Mobile e promuove la soluzione AMP ed ecco qui le istruzioni per implementarle su un sito WordPress.

1) Tutto ciò che serve è

Scaricare un paio di plug-in. Avere accesso alla Search Console di Google. Potrebbe anche essere necessario l’accesso alla piattaforma di hosting se le cose non avverranno senza intoppi.

2) Scarica il plug-in Automattic AMP

In un primo momento abbiamo testato un plug-in da PageFrog. Esso prometteva di fornire contenuti AMP e articoli Facebook istantaneamente in un unico strumento maneggevole.

Buttato via tutto!

Quindi, scarica Automattic plug-in, come raccomandato da Yoast.

Dopo aver attivato il plugin, esso aggiunge un meta tag standard nella Head delle tue pagine web. Questo per aiutare Google a riconoscere che una versione di quella pagina AMP è attivata.

È possibile fare da sé, con l’aggiunta del suffisso /amp/ al termine di qualsiasi URL del sito.

3) Scarica il plug-in Yoast Glue

Yoast, ha sviluppato un proprio semplice plug-in, chiamato GLUE (colla) che aggiunge opzioni di stile al plug-in Automattic.

Dopo aver attivato GLUE, è possibile visualizzare le impostazioni in SEO> AMP> Design. Qui puoi impostare i colori e i caratteri per avvicinarti il più possibile alla tua pagina desktop originale.

Caricare il logo e aggiungi il tuo CSS personalizzato, eventualmente.

Ora dovrai capire se Google sta indicizzando le tue pagine Web.

4) Visita la Search Console di Google

Se disponi di un account nella Search Console Google, devi iscriverti ora o chiedere al tuo webmaster di farlo per te.

Una volta che sei dentro, seleziona il sito dalla bacheca. Quindi fai clic su Cerca Aspetto nella ricerca> Accelerated Mobile Pages.

Per fortuna Google fornisce un pratico strumento per controllare esattamente quello che potrebbe essere la causa di errori e dell’indicizzazione avvenuta delle pagine AMP.

5) Eseguire lo strumento validator AMP

Quando avrai creato le pagine AMP dovrai capire se Google sta indicizzando le pagine o se queste contengono errori di Sintassi.
Usa questo sistema per rilevare tali dati.

Come indicizzare le Pagine AMP

Ti stai chiedendo : Come Google troverà le pagine AMP?

Google trova le pagine indice AMP se altre pagine contengono link ad esse o un loro riferimento.

Se disponi di entrambe le versioni AMP e non AMP delle pagine, comprendi i seguenti link:

In qualsiasi pagina non-AMP, fai riferimento alla versione AMP della pagina per comunicarle a Google e altre piattaforme:
<link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />

Nella pagina AMP, aggiungi il seguente testo di riferimento alla sua versione “canonical” non AMP:
<link rel=”canonical” href=”https://www.example.com/url/to/amp-document.html” />

Fatto!