debug html

Debug HTML con Screaming Frog – SEO Tech Academy

Molti parlano di contenuti, link e performance, ma quanti controllano cosa succede nell’<head> delle pagine?

Eppure è lì che si gioca una parte fondamentale della SEO tecnica. Meta tag, hreflang, canonical, tutto parte da lì.

Ma attenzione: se l’html è malformato o non valido rischiamo che Google ignori i segnali cruciali. Ciò implica hreflang non letti, canonical saltati, performance controverse.

In questo appuntamento con la SEO Tech Academy vediamo perché è fondamentale debuggare l’html nell’<head> e come farlo in modo semplice ed efficace con Screaming Frog.

Se non vuoi perderti i prossimi video, iscriviti al canale YouTube oppure alla newsletter dedicata per riceverli direttamente nella tua casella di posta, ogni lunedì alle ore 12!

Perché il debug <head> è importante?

Utilizzare HTML valido per i metadati di una pagina assicura che i Motori di Ricerca, come Google, siano in grado di utilizzarlo per indicizzare le singole pagine.

I Motori di Ricerca cercheranno di comprendere il markup anche quando ci sono errori, ma alcuni elementi all’interno dell’intestazione possono causare criticità nella gestione delle informazioni da parte dello Spider.

Se vengono utilizzati elementi HTML non validi all’interno dell’intestazione (“<head>”), Google considera che l’intestazione debba essere chiusa e avvierà il body nella sua analisi.

Ciò significa che eventuali metadati che appaiono dopo l’elemento HTML non valido – ad esempio il tag canonical che dovrebbe trovarsi nell’<head>potrebbero essere ignorati da Google.

esempio errore html

Per chi fa SEO, monitorare questa sezione è quindi una forma di prevenzione. È un modo per evitare che errori strutturali silenziosi si traducano in perdite di ranking, problemi di crawling o warning difficili da decifrare nella Search Console. Un debug fatto bene significa risparmiare tempo, budget e grattacapi dopo.

Debug HTML con Screaming Frog

In linea generale va considerato che se elementi <body> precedono direttamente l’elemento <head> potrebbero influenzare tutti i metadati nell’intestazione.

Ad esempio, un tag <div> fuori posto che precede l’apertura dell’elemento <html> farà sì che Google apra e chiuda automaticamente un elemento <head> vuoto, il che significa che tutti i metadati saranno nel <body> e potenzialmente potrebbero essere ignorati.

Qui sotto puoi vedere, secondo le indicazioni di Google, cosa dovrebbe essere inserito nell’intestazione (in VERDE) e cosa no (in ROSSO).

Grazie a Screaming Frog è possibile individuare e correggere errori HTML in <head>.

Ecco come fare:

1. Avvia una scansione del sito

Inserisci l’URL del sito da analizzare e lancia la scansione in modalità standard.

2. Identifica le criticità

Una volta terminato il crawl, Screaming Frog ti fornirà una panoramica degli errori rilevati. Controlla la Tab “Validation e, aiutandoti con i FILTRI identifica eventuali criticità.

Un altro modo per avere una panoramica di ciò che è stato scoperto dal crawler è consultare la Sidebar Overview per comprendere quanti URL presentano problemi in modo aggregato.

sidebar overview

3. Analizza i filtri

3.1 Invalid HTML Elements in Head: pagine con elementi HTML non validi all’interno dell’intestazione

Quando viene utilizzato un elemento non valido nell’intestazione, Google presume la fine dell’elemento <head> e ignora eventuali elementi che compaiono dopo l’elemento non valido. Ciò significa che gli elementi critici dell’intestazione che compaiono dopo l’elemento non valido non saranno visti.

3.2 “<body>” Element Preceding “<html>”: Urls che hanno un elemento body che precede l’apertura dell’elemento html

I browser e Googlebot presumono automaticamente l’inizio del corpo e generano un elemento head vuoto prima di esso. Ciò significa che l’elemento head previsto e i suoi metadati saranno visti nel corpo e ignorati.

3.3 “<head>” Not first in “<html>” Element: l’elemento <head> dovrebbe essere il primo elemento nel codice <html>

I browser e Googlebot generano automaticamente un elemento <head> se non lo trova come primo elemento.

3.4 Missing “<head>” Tag: pagine che mancano di un elemento <head> nell’HTML

3.5 Multiple “<head>” Tags: pagine con più elementi <head> nell’HTML

3.6 Missing “<body>” Tag

3.7 Multiple “<body>” Tags

3.8 HTML Document Over 15MB

Debug: quali soluzioni?

Una volta intercettati gli errori HTML nel <head>, la fase più delicata è risolverli senza compromettere la struttura complessiva della pagina.

RAW HTML

Uno degli strumenti è la visualizzazione del codice sorgente in formato “RAW HTML”. Questo mostra esattamente ciò che viene ricevuto dal crawler prima che il browser intervenga con il rendering: puro codice, nudo e crudo.

Analizzarlo ti consente di verificare:

    • Se il <head> contiene tag validi e ordinati.

    • Se ci sono duplicazioni dovute al server.

    • Se i meta tag fondamentali sono presenti già nel caricamento iniziale.

Per il debug sarà sufficiente cliccare con il tasto destro del mouse e scegliere “View Page Source” su Chrome per vedere l’HTML prima dell’elaborazione di JavaScript e controllare il contenuto nel tag <head>.

Questo controllo potrebbe però essere molto laborioso soprattutto se <head> presenta molto codice.

Ovviamente questo debug sarà parziale perché molti elementi potrebbero essere inseriti con JavaScript.

Rendered HTML

Un approccio più efficiente è quello di considerare l’HTML dopo il rendering JavaScript, utilizzando “inspect element” su Chrome.

Es. un “tag canonical” che segue un “svg” inserito nel <head> tramite JS potrebbe far chiudere il tag a Google e considerare il canonical direttamente nel <body>

In breve: se vuoi davvero chiudere il cerchio del debug HTML, non puoi fermarti a ciò che “c’è nel codice”. Devi controllare cosa resta dopo che tutto ha girato. È qui che si capisce davvero se la tua pagina parla in modo chiaro a Google

Ti è piaciuta questa guida? Se non vuoi perderti i prossimi contenuti, iscriviti al canale YouTube oppure compila il form qui sotto per riceverli direttamente nella tua casella di posta!

La tua iscrizione non può essere convalidata.
La tua iscrizione è avvenuta correttamente.

ISCRIVITI ALLA SEO TECH ACADEMY

Ricevi i nostri video gratuiti, ogni lunedì alle 12 direttamente nella tua casella di posta!

Inviando il form dichiari di aver letto e compreso la Privacy Policy.

Cerca
In questo articolo...