Struttura delle intestazioni H1–H6: guida completa SEO

L'HTML fornisce sei livelli di intestazione — da <h1> a <h6>. La maggior parte degli autori sa che l'H1 conta per la SEO. Ma pochi capiscono il ruolo di H2, H3 e dei livelli più profondi, come interagiscono con i crawler e perché una gerarchia rotta danneggia sia la SEO sia gli utenti.

Per un crawler di Google, i tag di intestazione sono l'indice di un documento. Il robot li usa per determinare l'argomento della pagina, identificare i sottoargomenti e decidere quanto il documento sia pertinente a una data query. Un livello mancante, un H1 in più o un'intestazione usata solo per stile visivo distruggono questa mappa.

zoom_in

Cosa sono i tag di intestazione H1–H6

H1–H6 sono elementi HTML semantici che segnano intestazioni a sei livelli di importanza. H1 è il titolo principale della pagina; H6 è la sottointestazione più annidata. Ogni livello invia al crawler un segnale: «il contenuto dentro questa sezione parla di questo argomento».

A differenza della formattazione visiva (<b>, <big>, classi CSS), i tag di intestazione portano un significato. I browser renderizzano H1 come testo grande e in grassetto di default, ma la dimensione è solo un effetto collaterale. Puoi rendere H6 visivamente più grande di H1 via CSS, ma questo non cambia la semantica — per i motori di ricerca e gli screen reader, H1 resta l'intestazione principale.

Gerarchia: H1, H2, H3 e oltre

Una gerarchia corretta funziona come l'indice di un libro: un titolo del libro (H1), diversi capitoli (H2), sottosezioni dentro i capitoli (H3) e sotto ancora paragrafi di dettaglio (H4+). Rompere questa struttura è come strappare i capitoli di un libro e mescolare le pagine.

zoom_in

<!-- Correct hierarchy -->
<h1>Guide to Welders' Protective Clothing</h1>

  <h2>Types of protective clothing</h2>
    <h3>Fire-resistant suits</h3>
    <h3>Protective masks</h3>

  <h2>Regulatory standards</h2>
    <h3>EN ISO 11612</h3>
    <h3>ANSI/ISEA standards</h3>

  <h2>How to choose</h2>

<!-- Wrong hierarchy (skipped levels) -->
<h1>Guide to protective clothing</h1>
  <h3>Fire-resistant suits</h3>  <!-- H2 skipped! -->
    <h5>Standards</h5>           <!-- H4 skipped! -->

Quando servono H4–H6

H4, H5 e H6 si usano raramente — solo in grandi documenti tecnici che richiedono un quarto livello di annidamento o più. Esempi: contratti legali, documentazione API, protocolli medici. Per articoli di blog e landing page, tre livelli (H1–H3) coprono tutto ciò che serve.

Come le intestazioni incidono sulla SEO

Ogni tag di intestazione è un segnale di pertinenza. Più alto è il livello, più forte il segnale: H1 pesa più di H2, H2 pesa più di H3. Ma tutti partecipano alla valutazione di quanto un documento corrisponde a una query di ricerca.

Google usa le intestazioni per generare i featured snippet. Quando un utente fa una domanda, l'algoritmo cerca pagine in cui un H2 o H3 corrisponde da vicino alla query e il blocco di contenuto successivo dà una risposta diretta. H2 ben formulati sono candidati gratuiti alla position zero.

Le intestazioni alimentano anche i link interni: un anchor text che corrisponde all'H2 della pagina di destinazione rafforza la pertinenza. E le sitemap: alcune CMS aggiungono automaticamente attributi id alle intestazioni, creando URL àncora referenziabili direttamente nelle sitemap XML per le sezioni profonde delle pagine.

Accessibilità e screen reader

Gli screen reader — software di assistenza per utenti con disabilità visive — usano i tag di intestazione come principale meccanismo di navigazione in una pagina. L'utente preme H per saltare fra le intestazioni, ascoltando l'indice della pagina. Una gerarchia rotta rende la navigazione inutile.

Secondo WCAG 2.1 (criterio 1.3.1 «Info and Relationships»), le intestazioni devono essere implementate con tag HTML semantici, non con gli stili. Un pulsante con font-size: 24px; font-weight: bold non è un'intestazione per uno screen reader. <h2> lo è. La differenza è enorme.

Regole per l'uso delle intestazioni

Cinque regole che coprono il 95% delle situazioni reali.

Errori comuni nella struttura delle intestazioni

Questi errori compaiono negli audit della maggior parte dei siti — dai piccoli blog alle piattaforme enterprise.

• Più H1 sulla pagina. Il più delle volte causato dai builder visivi che avvolgono in H1 qualsiasi blocco grande. Trovalo con Screaming Frog → H1 → Multiple. Correggi: tieni un H1, sostituisci gli altri con H2 o <div> stilizzato.
• Intestazioni usate per lo stile, non per la semantica. Un designer ha scelto H4 perché «ha la dimensione giusta», saltando H2 e H3. Il crawler vede H1 → H4 → H1 → H4 — caos invece di struttura.
• H1 mancante. Dopo un redesign o una migrazione CMS l'H1 sparisce dal template. Una pagina senza H1 perde il suo principale segnale di pertinenza on-page.
• H1 = nome del sito su ogni pagina. Un template CMS inserisce il nome dell'azienda nell'H1 ovunque. Ogni pagina ha lo stesso H1 — duplicati su tutto il sito, pertinenza zero.
• Livelli saltati nell'annidamento. H1 → H3 (manca H2), H2 → H4 (manca H3). Lo screen reader segnala un errore; il crawler perde il contesto della sottosezione.
• Uso di <p> o <div> al posto dei tag di intestazione. Il testo sembra un'intestazione a vista ma è invisibile come intestazione per i motori di ricerca e gli screen reader. Comune nei template legacy.
• Intestazioni troppo lunghe. Un H2 con tre frasi non è un'intestazione — è un paragrafo. Un'intestazione si legge in un solo movimento d'occhio: 4–12 parole è ottimale.

<!-- BAD: typical template with errors -->
<div class="title">Workwear catalogue</div>    <!-- not H1! -->
<h1>Acme Workwear Ltd</h1>                     <!-- H1 = company name -->
<h1>Winter workwear</h1>                       <!-- second H1 -->
<h3>Fire-resistant suits</h3>                  <!-- H2 skipped -->

<!-- GOOD: correct structure -->
<h1>Winter welders' workwear catalogue</h1>
  <h2>Fire-resistant suits</h2>
    <h3>Suits to EN ISO 11612</h3>
    <h3>Suits to ANSI Z49.1</h3>
  <h2>Protective masks and shields</h2>

Strumenti per l'audit della struttura

// Quick heading hierarchy check in the browser console
const headings = $$('h1,h2,h3,h4,h5,h6');
const report = headings.map(h => ({
  tag: h.tagName,
  text: h.textContent.trim().slice(0, 60)
}));
console.table(report);

// How many H1s are on the page?
const h1Count = $$('h1').length;
console.log(`H1 count: ${h1Count}`, h1Count === 1 ? '✓' : '✗ ERROR');

Checklist della struttura delle intestazioni

H1

• Esattamente un H1 su ogni pagina del sito
• L'H1 contiene la query target principale della pagina
• L'H1 è allineato nel significato col title tag (la formulazione può differire)
• L'H1 è unico su tutto il sito — non duplicato dal template
• L'H1 non è vuoto, non contiene solo un'immagine e non è nascosto via CSS

H2

• H2 segue H1 senza saltare livelli
• Ogni H2 descrive una sezione principale distinta della pagina
• Gli H2 contengono query secondarie e termini LSI (naturalmente, senza stuffing)
• La formulazione degli H2 può servire da àncora per un featured snippet
• Nessun H2 esiste per puro effetto visivo — solo dove inizia una nuova sezione tematica

H3–H6

• H3 si annida dentro H2, H4 dentro H3 (nessun salto di livello verso il basso)
• H4–H6 si usano solo quando l'annidamento profondo è davvero necessario
• Nessun tag H3–H6 usato al posto di H2 solo per la sua dimensione visiva
• La struttura complessiva si legge come un indice logico quando la scansioni

Accessibilità

• Ordine delle intestazioni verificato con HeadingsMap o l'estensione WAVE
• Tutte le intestazioni implementate come tag HTML semantici, non div stilizzati
• Nessuna intestazione nascosta (display: none, visibility: hidden)
• Ogni intestazione porta contenuto significativo — niente intestazioni vuote o segnaposto

FAQ

Risposte alle domande più comuni sulla struttura delle intestazioni che emergono negli audit e nei workshop con i team di contenuti.