Come analizzare gli errori sul tuo sito relativi al codice AMP

0
451
analizzare errori amp

Google spinge per far si che i webmaster sviluppino una versione AMP delle pagine dei loro siti web.

Negli ultimi mesi dal motore di ricerca sono usciti diversi articoli relativi a questa nuova tecnologia di cui ho parlato ampiamente in passato, per aiutare gli sviluppatori, sopratutto dopo che dal motore di ricerca ci hanno fatto sapere di come le pagine AMP non siano più solamente una peculiarità utile ai siti di news, ma che incominciano ad essere utili a tutti quei siti che vogliono mostrare una pagina ottimizzata, nei tempi di caricamento, sulla SERP dedicata ai device mobile.

In un suo ultimo post, sul blog ufficiale di Google per i webmaster, possiamo trovare un riepilogo di come testare gli errori, relativi al codice AMP, nelle diverse pagine che compongono un sito web. In questo articolo vediamo assieme come analizzare le nostre pagine, per comprendere se sono valide e corrette, dopo aver realizzato una versione AMP del nostro sito grazie agli strumenti forniti da Google e ad altri tool realizzati dai professionisti della rete.

In particolare per i consulenti SEO vediamo uno strumento online dedicato all’ottimizzazione per i motori di ricerca delle pagina AMP

Vediamo la procedura e tre tool gratuiti per analizzare e correggere gli errori di una pagina AMP Condividi il Tweet

Come analizzare gli errori AMP

Da mia esperienza posso dire che il processo con cui analizzare gli errori è il seguente:

  • Implementare AMP sul proprio sito;
  • Analizzare una pagina codificata secondo il formato delle Accelerated Mobile Page, con i metodi descritti a seguire, e nel caso correggere i problemi;
  • Aspettare che nella Google Search Console vengano indicizzate le pagine AMP e evidenziate, nel caso, quelle con errore;
  • Correggere le pagine con errore;

Propongo questo metodo in quanto ad oggi gli strumenti che vedremo per analizzare le pagine AMP validano un singolo URL e non effettuano un crawling di un intero sito. Per siti con poche pagine viene facile analizzarle tutte, ma con portali che hanno centinaia di URL il lavoro necessita di automatismi atti a risparmiare tempo e energie.

Utilizzare Chrome e la console per sviluppatori

Gli strumenti per gli sviluppatori del browser Chrome ci possono mostrare il codice e il punto dove genera errori e per questo non viene validato. Per effettuare l’analisi è necessario:

  1. Con il browser Chrome apriamo l’URL della pagina AMP da analizzare e aggiungiamoci la stringa #development=1.
  2. Aprire la console degli strumenti per gli sviluppatori o Developer Console. Per farlo possiamo usare due strade. La prima tasto destro del mouse e seleziona Ispeziona. Oppure utilizzare i tasti di scelta rapida CTRL + Maiusc + I.
  3. Nella finestra che si aprirà, tra i diversi tab proposti dalla Developer Console premiamo su Console.

La console per gli sviluppatori ci mostrerà, nel caso di codice AMP valido e corretto, nessun errore.

amp developer console correct

Mentre nel caso di errori nella pagina la finestra potrebbe avere il seguente aspetto:

amp developer console errors

L’estensione AMP per Browser

Se utilizzi come browser Chrome o Opera puoi utilizzare una estensione per identificare le pagine AMP e effettuare un debug dei possibili errori.

Visitando le pagine AMP del tuo sito potrai così, direttamente dalla barra dell’URL in funzione dell’icona che visualizzerai, comprendere se:

  • Ci sono degli errori nella pagina (icona AMP rossa);
  • Non ci sono errori nella pagina (icona AMP verde);
  • Che la pagina non è AMP, ma ha una versione Accelerated Mobile Page correlata, raggiungibile premendo sull’icona (icona AMP blu);

Direttamente da questa estensione è poi possibile analizzare gli errori nella pagina, relativi al codice AMP, in quanto viene indicato riga del codice errata e una breve descrizione di cosa non funziona.

L’estensione la puoi scaricare ai seguenti link:

Il tool online per l’analisi di codice AMP

Il primo strumento nato per effettuare una analisi del markup AMP di un sito per comprendere se è valido o se presenta errori è quello disponsibile in un sottodominio del sito ufficiale: validator.ampproject.org.

Per analizzare una pagina è possibile:

  • inserire l’URL di cui effettuare la validazione;
  • incollare il codice di markup, copia incollandolo dal sorgente della pagina da esaminare;

Dopo aver effettuato una delle precedenti azioni è sufficiente premere il bottone Validate, ottenenedo così una analisi con:

  • in caso di successo nessun errore (Validation Status: PASS);
  • se la pagina non è valida un listato di cosa correggere, con linea e colonna relativa al markup che genera errore (Validation Status: FAIL);

validator ampproject

Il tool online di Google Search Console

Un ulteriore strumento online, con una interfaccia in Material Design, è lo strumento interno a Google Search Console, raggiungibile al seguente link.

gsc amp validazione

L’uso di questo tool è simile a quello che abbiamo visto prima, ma i dati di analisi della pagina AMP sono forniti in maniera più visibile e in aggiunta, in basso a destra, vi è un bottone per la condivisione veloce dei risultati.

Quindi consiglio questo strumento se sei un consulente SEO che deve condividere le proprie analisi con lo sviluppatore incaricato di intervenire sul codice.

Uno strumento per analizzare le pagine AMP in chiave SEO

In particolare per tutti i SEO che stanno provando ad implementare AMP vi è un validatore online che permette velocemente di analizzare fino a 100 URL (che vanno inseriti uno per linea) con un occhio di riguardo per l’ottimizzazione per i motori di ricerca. A differenza degli altri strumenti in questo è possibile esportare i dati in un CSV, da formattare e inviare allo sviluppatore competente del progetto che stiamo analizzando.

Sempre questo tool permette poi di analizzare gli URL che gli diamo in pasto mediante lo user-agent di Google o quello relativo al browser che stiamo utilizzando.

amp analisi seoCome potete vedere dallo screenshot il tool ci permette di comparare due URL (ad esempio la pagina originale e quella in versione AMP) di avere subito a disposizione i dati relativi a:

  • l’URL analizzato;
  • lo status code che le pagine generano;
  • se è in formato AMP;
  • se è stato implementato correttamente il tag rel=”amphtml” per reindirizzare lo spider del motore di ricerca alla versione Accelerated Mobile Page del contenuto;
  • se nella pagina è stato implementato schema.org
  • il tag canonical se è presente, passando il mouse al di sopra dell’icona un tooltip ci dirà a dove punta;
  • se il tag canonical è stato implementato con URL corretto (anche qui al passaggio del mouse vedremo l’URL);
  • se la pagina è implementata correttamente;

Lo strumento lo trovare sul sito di technicalseo.com

Dopo aver realizzato la versione AMP: Google Search Console

A seguito dell’implementazione di AMP sul tuo sito web vedrai nella tua Google Search Console che le pagine AMP verranno indicizzate.

In più, man mano che il motore di ricerca le scansiona ti mostra quale di queste ha degli errori e quali.

Questo tool, che puoi trovare effettuando accesso in GSC, selezionando la proprietà relativa al tuo sito e dal menù di navigazione sulla sinistra Aspetto nella ricerca > Accelerated Mobile Page ti mostrerà un grafico, con in blu le pagine indicizzate e in rosso quelle che hanno errori.

amp google search consoleNella parte sottostante al grafico vedrai poi quali non sono corrette.

Nel corso del tempo questo strumento si è evoluto e, ad oggi 16 ottobre 2016, spiega nel dettaglio il problema rilevato per le diverse pagine non validate.

Prendendo il mio caso ad esempio ho 9 pagine con errori fra cui:

  • Utilizzo non valido di tag AMP (mi segna che manca o errato un tag AMP-anim richiesto)
  • Utilizzo di tag HTML non consentito o non valido (ossia che utilizzo del codice HTML che non ha un corrispettivo nella versione AMP, per cui il tool che utilizzo per generare la mia pagina AMP non lo interpreta e per questo la pagina non è interamente valida);
  • Foglio di stile CSS non valido (ad esempio nel mio caso vado a scoprire che negli stili inline della versione AMP non è permesso l’uso della clausola !important).

Attenzione ho paura che vi sia qualche problema nella validazione automatica effettuata da questo tool. Nel mio caso infatti sia l’errore relativo all’uso non valido di tag AMP che quello del foglio di stile dove secondo lui ho utilizzato la clausola CSS !important (che non a controllo non compare) in realtà dovrebbero essere validati ed infatti il tool di validazione online mi segna la pagina come corretta.

Il tool mostra, per ogni errore, una volta selezionato con il click una scheda in cui troverari:

  • link ai riferimenti e alla documentazione di AMP;
  • un bottone per eseguire l’analisi del documento (che funziona più o meno come il tool online sopra descritto);
  • dettagli dell’errore;
  • l’URL AMP della pagina non valida;
  • l’URL canonico, per vedere il documento originale;
  • l’ultimo rilevamento effettuato dallo spider;
Come analizzare gli errori sul tuo sito relativi al codice AMP
5 (100%) su 5 voti

FonteInformazioni dal blog per Webmaster di Google
CONDIVIDI
Nato con la passione per l'informatica da mamma Access e papà ASP nel 2002 rinnego repentinamente la mia paternità facendomi adottare da papà PHP e mamma SQL. Allevo HTML e correlati fiori in CSS mentre vedo i frutti del mio orticello SEO crescere grazie alla passione e alla dedizione della coltura biodinamica; perchè il biologico è fin troppo artificiale. Realizzo siti internet a tempo pieno, nei restanti momenti mi occupo di redigere articoli per questo sito e saltuariamente far esperimento nel mare che è internet.

LASCIA UN COMMENTO