Struttura delle intestazioni SEO

Come funziona questo controllo

Scanaris conta i tag <h1> nell'HTML della tua pagina. Il risultato corretto è esattamente uno. Se non ce n'è nessuno, apre un rilievo di gravità media: né Google né uno screen reader sanno qual è l'argomento principale. Se ce ne sono due o più, ne apre uno di gravità bassa con il conteggio: più titoli principali diluiscono di cosa parla la pagina. Si guarda solo l'HTML servito, senza eseguire JavaScript, e solo la pagina scansionata.

Perché è importante

L'<h1> è il titolo della pagina, la prima cosa che uno screen reader annuncia e uno dei segnali più chiari che Google ha per capire l'argomento. Una pagina senza h1 è come un articolo senza titolo: il motore di ricerca deve dedurlo dal resto. Più h1 non sono un errore HTML, ma disperdono quel segnale: se la tua pagina prodotto ha il nome del prodotto, lo slogan e "Recensioni" tutti come h1, nessuno dei tre è l'argomento. Ed è la base del resto della gerarchia: gli h2 dividono il contenuto in sezioni, gli h3 suddividono, ed è così che naviga chi usa tastiera o screen reader e così gli assistenti IA spezzano il tuo testo per citarlo.

Perché succede

Il caso più comune di zero h1 è il design: il testo grande dell'hero è un div con classi di dimensione, o un p, perché chi l'ha impaginato ha pensato all'aspetto e non alla struttura. Nelle single-page app, l'h1 lo disegna JavaScript e non è nell'HTML iniziale. Il caso di più h1 di solito viene dai componenti: ogni card, ogni sezione o ogni widget porta il proprio h1, oppure il logo è avvolto in uno "per il SEO", che è un consiglio del 2008.

Come risolvere

• Un h1 per pagina con l'argomento principale, visibile e vicino all'inizio del contenuto. Nella home, cosa fai; in un articolo, il suo titolo; in un prodotto, il suo nome.
• Il logo non è un h1. È un link alla home con il nome del brand come testo o come alt.
• Il resto in h2 e h3, senza saltare livelli: un h3 va dentro una sezione con h2. Se un tag ti interessa solo per la dimensione, usa una classe CSS, non un livello di intestazione.
• Nei componenti, accetta il livello come prop (<Heading :level="2">) invece di fissarlo dentro, così la stessa card è h2 in una pagina e h3 in un'altra.
• Nelle SPA, renderizza lato server almeno la struttura della pagina o usa il prerendering; altrimenti Google vede una pagina vuota prima di eseguire il tuo JavaScript.

Verifica che sia risolto

curl -s https://tuodominio.it | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Deve uscire una sola riga che inizia con h1:, seguita dalla gerarchia di h2 e h3 in ordine logico. Se non esce nulla, il contenuto lo disegna JavaScript e nemmeno Google lo vede al primo passaggio.

Domande frequenti

HTML5 permette un h1 per sezione. Perché viene segnalato?

La specifica lo permetteva con l'algoritmo di "outline" per sezioni, ma nessun browser né screen reader l'ha mai implementato, e la specifica l'ha ritirato nel 2022. In pratica, un h1 per pagina resta la raccomandazione di Google e delle linee guida di accessibilità.

Il mio h1 è nascosto con CSS per tenere pulito il design.

Un h1 nascosto con display: none non lo leggono né Google né gli screen reader. Se ti serve che non si veda ma si legga, usa una classe di testo nascosto visivamente (sr-only); ma chiediti se il titolo principale della pagina debba davvero essere nascosto.

Vengono esaminati gli altri livelli?

Questo controllo conta solo gli h1. Le intestazioni vuote le rileva accessibilità, e il titolo della scheda, che non è la stessa cosa dell'h1 anche se di solito si somigliano, lo esamina metadati SEO.