Come Debuggare Html Invalido nell’Head?

Scopri come debuggare l'HTML Invalido nell'Head?

Invalid HTML

Questo tutorial spiega come utilizzare Screaming Frog SEO Spider per identificare elementi HTML non validi nell’intestazione, visualizzare quali metadati potrebbero essere influenzati negativamente e come risolvere il problema che sta causando l’errore.

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.
Anche se i Motori di Ricerca cercheranno di comprendere il markup anche quando ci sono errori, 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 considererà 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 potrebbero essere ignorati da Google.

Elementi HTML Validi

L’HEAD dovrebbe solamente contenere i seguenti elementi Html:

  • title
  • meta
  • link
  • script
  • style
  • base
  • noscript
  • template

Altri elementi potrebbero causare delle criticità di scansione e indicizzazione:

  • iframe
  • img
  • svg
  • div
  • noscript che contiene un “img”.

In linea generale va anche 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.

Secondo le indicazioni di Google se, nonostante queste indicazioni, ci sia la necessità di inserire elementi “invalidi” nell’Head, gli stessi dovranno essere inseriti dopo gli elementi che devono essere considerati dallo Spider.

Identificare “Invalid HTML”

Trovare elementi HTML non validi nell’intestazione, o precedenti ad essa, su larga scala in un sito web è difficile, ed è qui che Screaming Frog può aiutare a fare il grosso del lavoro.

Il Seo Spider segnalerà eventuali pagine con elementi <html> non validi che potrebbero essere problematici e qualsiasi meta tag come ad esempio titoli, canonicals o meta robots che sono al di fuori dell’intestazione.

Crawl del sito web

La prima fase è molto semplice e ti basterà inserire il dominio o sottodominio da analizzare senza dover configurare nulla nel Seo spider tranne la modalità di scansione “Rendering JS” per analizzare eventuali elementi inseriti dopo l’elaborazione del JS.

scansione di un dominio con screaming frog

Analisi Scheda “Validation”

Durante la scansione potrai già vedere i dati in “Real time” o aspettare la fine della scansione per un quadro completo degli URL che presentano questo scenario.
La Tab di riferimento si chiama “Validation” e comprende diversi filtri:

  • 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.
  • “<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.
  • “<head>” Not first in “<html>” Element: l’elemento <head> dovrebbe essere il primo elemento nell codice <html>. I browser e Googlebot genereranno automaticamente un elemento <head> se non lo trova come primo elemento.
  • Missing “<head>” Tag: pagine che mancano di un elemento <head> nell’HTML.
  • Multiple “<head>” Tags: pagine con più elementi <head> nell’HTML.
  • Missing “<body>” Tag.
  • Multiple “<body>” Tags.
  • HTML Document Over 15MB.
La scheda Validation per analisi elementi invalidanti nell'Html head

Come abbiamo appena descritto l’analisi granulare la potrai trovare nella Tab dedicata, mentre per una macro visione ti sarà possibile monitorare i dati nella sidebar laterale che sarà etichettata con Alta Priorità nella tab “Issue”.

Analisi della Issue Tab per analisi degli elementi non validi inseriti nell'head html

Debug <head>

Una volta scoperti tutti gli URL interessati da questa criticità sarà possibile analizzarli in modo scrupoloso in tre modi:

  • Raw HTML: analisi dell’Head nell’HTML grezzo attraverso tasto destro del mouse e scelta dell’opzione “Visualizza sorgente” della pagina. In questo caso l’analisi risulterà parziale perché ci potrebbero essere degli elementi che vengono inseriti con elaborazione dei javascript.
  • Rendered HTML: analisi della pagina dopo la renderizzazione dei JS.
    In questo caso sarà sufficiente utilizzare “Ispeziona elemento” di Chrome e consultare la tab “Elements”.
  • Search Console: puoi anche verificare la presenza di elementi non validi nell’Head controllando gli url attraverso la funzione “URL Inspector” della Search Console.

A conferma di quanto sia importante l’argomento appena trattato per la SEO, vediamo un esempio qui sotto.

L’HTML renderizzato sul lato destro sembra corretto, ma il “Canonical dichiarato dall’utente” viene ignorato a causa del tag <noscript> che contiene un’immagine sopra di esso, chiudendo l’intestazione.

Canonical ignorato da google per elementi html non validi nell'head
Guide Correlate