Articolo datato
Questo articolo non è più aggiornato da almeno 4 mesi perciò verifica le informazioni che vi sono contenute in quanto potrebbero essere obsolete.
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.
Sommario
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 Share on X
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:
- Con il browser Chrome apriamo l'URL della pagina AMP da analizzare e aggiungiamoci la stringa
#development=1. - 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. - 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.
Mentre nel caso di errori nella pagina la finestra potrebbe avere il seguente aspetto:
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);
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.
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.
Come 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.
Nella 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);
- i dettagli dell'errore;
- l'URL AMP della pagina non valida;
- l'URL canonico, per vedere il documento originale;
- l'ultimo rilevamento effettuato dallo spider;