Vai alla home page

AMP in WordPress con un plugin. Sì o no?

Accellerated Mobile Pages

AMP in WordPress conviene? Se hai un sito di news forse sì, altrimenti puoi farne a meno. Sta di fatto che 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. Ma presto ci sarà anche il 5G…

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.


AMP in WordPress con un plugin. Sì o no?

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. Sta di fatto che configurare AMP correttamente non è una passeggiata e di solito Google Search Console riporta un sacco di errori. È successo anche a noi e dopo diversi mesi in cui le nostre pagine AMP erano indicizzate, ma con un sacco di errori abbiamo deciso di eliminarle. Ci domandiamo se vale la pena prendere per verità tutto quello che scrive il Sig. Google. Non sempre infatti le soluzioni indicate dall’azienda di Mountain View sono le migliori.

AMP in WordPress con un plugin. Sì o no?

“Le nostre pagine indicizzate dopo il regex non danno più errori AMP.”


Per eliminare tutte le pagine AMP indicizzate, ci è venuto in aiuto un post pubblicato sul blog di Kinsta, uno dei nostri hosting provider selezionati. Si tratta, se ancora non lo conosci, di un hosting cloud assistito su piattaforma Google e in questo articolo c’è la nostra intervista in esclusiva allo staff di Kinsta: Server Cloud assistito. Questo è invece il post dove abbiamo trovato utili consigli per disattivare AMP con un regex e qualche istruzione in ht.access. Il risultato? Le nostre pagine (gli articoli del blog in realtà) sono indicizzate senza errori e la ricerca organica non ha subito grosse conseguenze: Disable Google AMP.


AMP in WordPress: dove si vedono?

Chiariamo una cosa: gli articoli AMP in WordPress non sono ancora la soluzione vera e propria fino a quando i browser mobili non aggiungeranno il supporto nativo per questo formato. Ma presto avremo anche connessioni 5g. 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 qualcuno usa un browser da un dispositivo mobile per effettuare una ricerca su Google
  • Ogni volta che una nuova piattaforma aggiunge il supporto per i contenuti AMP

AMP in WordPress: 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:

  1. Tutti gli script devono caricare in modo asincrono.
  2. Le risorse esterne, come immagini, annunci, tweet e le immagini Instagram, vengono caricati come oggetti HTML
  3. Gli stili CSS devono essere dichiarati in un foglio di stile in linea 
  4. I download di font web (che sono spesso molto pesanti), vengono attivati prima di tutte le altre risorse
  5. Le animazioni non possono influenzare il layout di pagina.
  6. Il download delle risorse ha una priorità in base alla posizione (above the fold)

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 travolto dal pensiero di dover imparare i codici HTML per AMP e creare documenti appositamente formattati, ho una buona notizia! Ci sono alcuni plugin nella directory dei plugin di WordPress, come quelli qui elencati.

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) Project

Installa e attiva il plugin AMP, appositamente sviluppato per trasformare i tuoi articoli in formato AMP. Saranno generati automaticamente con il seguente permalink: http://esempio.com/permalink-articolo/amp/. Attualmente, questo plugin genera solo il formato AMP per gli 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.

Pagefrog

Facebook Instant Articles e Google 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 e si collega direttamente a Facebook Ads e Google AdSense.


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 articoliApri 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 browserAggiungi #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.

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 della convalida stessa. Prendere le giuste contromisure necessarie per affrontare il problema identificato.


AMP in WordPress: conclusioni

Con le piattaforme come Google, Twitter, Pinterest, Linkedin, il formato di AMP in WordPress è 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 alcuni plugin in WordPress  che rendono il processo abbastanza semplice. Gestione WP è a disposizione per fornirti utili informazioni sulle pagine AMP e prevedere questa funzionalità in fase di progetto o di restyling del tuo sito web/blog. Stay tuned, Gestione WP.

Nascondi
Guida WordPress 2019