Titoli gerarchici <h1>-<h6>: regole d'uso e impatto SEO
Il documento outline, un solo h1 per pagina, la struttura ad albero
Sei livelli, da <h1> (il più importante) a <h6> (il meno importante). Sembra banale, ma i titoli sono l'unico modo in cui HTML comunica la gerarchia dei tuoi contenuti a chi legge, a chi naviga con uno screen reader, e ai motori di ricerca.
I tag heading sono l'indice di un libro. Il titolo del libro è il livello più alto; i titoli dei capitoli sono un gradino sotto; i paragrafi interni ancora sotto. Se qualcuno mischiasse i livelli un sotto-paragrafo scritto grande come il titolo del libro, l'indice diventerebbe inutile.
1. Il «documento outline»: una storia da conoscere
HTML5 aveva introdotto un outline algorithm: l'idea che, annidando più <h1> dentro <section> o <article> diversi, il browser potesse costruire da solo una struttura ad albero coerente, un po' come un sommario automatico.
Il problema è che nessun browser lo ha mai implementato. Nelle MDN questo algoritmo non lo troviamo, per questo oggi la raccomandazione è tornata semplice: un solo <h1> per pagina, e il resto della gerarchia costruita a mano con <h2>-<h6>, senza fare affidamento su un meccanismo automatico che i browser non supportano.
2. Un solo h1 per pagina: perché conviene
Qui serve chiarezza: lo standard HTML non vieta tecnicamente più <h1> nella stessa pagina (purché non annidati). Ma MDN è netto nella raccomandazione: preferisci sempre un solo h1 per pagina. Non è un divieto dello standard, è una buona pratica.
Il motivo principale è l'accessibilità: chi naviga con uno screen reader spesso salta da un titolo all'altro per orientarsi. Un solo <h1> gli dice subito, senza ambiguità, «questo è l'argomento della pagina».
3. La struttura ad albero: niente salti di livello
La regola pratica: scendi di un livello alla volta. Dopo un <h2> puoi aprire un <h3>, ma non saltare direttamente a <h4> «perché è più piccolo e ti piace di più». La numerazione riflette il livello nel contenuto, non la dimensione del testo a schermo, quella si regola con il CSS.
<h1>Scarabei</h1>
<h2>Morfologia esterna</h2>
<h3>Testa</h3>
<h4>Apparato boccale</h4>
<h3>Torace</h3>
<h2>Evoluzione</h2>
<h3>Paleozoico</h3>
<h3>Giurassico</h3>4. E il SEO? Meno di quanto si pensi
Qui si annida il mito più diffuso: «un solo h1 fa salire in classifica». Google Search Central ha chiarito pubblicamente, attraverso i propri canali ufficiali, che l'ordine gerarchico preciso dei titoli non è di per sé un fattore di ranking: Google riesce a interpretare correttamente anche pagine con titoli fuori ordine o con più <h1>.
Detto questo, i titoli restano utili al SEO in modo indiretto: una struttura chiara aiuta Google a capire di cosa parla la pagina, e soprattutto aiuta le persone a leggerla e ad orientarsi, il che è ciò che ogni motore di ricerca cerca di premiare.
In sintesi
| Regola | Perché | Fonte |
|---|---|---|
| Outline algorithm | Mai implementato dai browser: non contarci | MDN |
| Un solo h1 | Best practice per chiarezza e accessibilità, non un vincolo tecnico | MDN |
| Niente salti | La numerazione riflette il livello del contenuto, non la dimensione | MDN |
| Impatto SEO | Indiretto: aiuta a capire il contenuto, non è un ranking factor diretto | Google Search Central |
I titoli non sono decorazioni tipografiche: sono la mappa della tua pagina, lascia che sia il CSS a occuparsi di come appaiono.
Commenti (0)
Registrati per commentare, fare domande e proporre l'argomento della prossima pillola (oppure accedi se hai già un account).
Nessun commento. Sii il primo a scrivere qualcosa.