Etichette dei titoli (H1-H6) e gerarchia

Cosa sono i tag di titolo?

I tag di intestazione da H1 a H6 sono tag HTML che definiscono la gerarchia dei contenuti e la struttura delle sezioni di una pagina. H1 rappresenta l'intestazione di primo livello, H2 le sezioni principali, H3 le sottosezioni e così via. Sebbene questi tag appaiano visivamente più grandi o in grassetto nel browser, il loro scopo principale non è visivo, ma strutturale: proprio come l’indice di un libro, costituiscono lo scheletro logico della pagina.

Questa gerarchia non è solo un ordine leggibile dall’occhio umano, ma anche una struttura ad albero che i browser e le tecnologie assistive (come gli screen reader) “comprendono” a livello programmatico. Un utente di uno screen reader di solito naviga nella pagina passando da un titolo all’altro; pertanto, se la gerarchia viene compromessa, anche la navigazione ne risente.

I livelli dei titoli rendono inoltre il contenuto di una pagina di lunga durata facilmente scansionabile: l’utente trova la sezione che sta cercando dando un’occhiata ai titoli, anziché leggere la pagina riga per riga. Ciò può influire positivamente sia sull’esperienza utente che sul tempo trascorso sulla pagina.

Perché è importante?

Una corretta gerarchia dei titoli facilita ai motori di ricerca la comprensione della coerenza tematica della pagina e dei suoi argomenti secondari, oltre a consentire la navigazione agli utenti che utilizzano lettori di schermo. Google deduce dalla struttura dei titoli quale sezione di una pagina lunga tratti quale argomento secondario; ciò può aiutare, in particolare nei risultati arricchiti come i “featured snippet”, a selezionare il passaggio corretto.

Una gerarchia disordinata o incompleta porta a una struttura dei contenuti poco chiara e a problemi di accessibilità. Ad esempio, passare direttamente da un H2 a un H4 può confondere l’utente di uno screen reader, che potrebbe chiedersi: «Manca un livello intermedio qui, o la sezione è terminata?».

In casi estremi, nelle applicazioni a pagina singola (single page application) o nei sistemi di template multicomponente, i diversi componenti possono visualizzare i propri H1 in modo indipendente; ciò può portare, inconsapevolmente, alla presenza di più H1 nella pagina. In questo tipo di architetture tecniche è importante gestire i livelli di intestazione da un punto centrale.

Come risolvere il problema?

• Nella pagina deve esserci un solo H1; questo è solitamente il titolo principale della pagina e deve riassumere chiaramente l’argomento trattato.
• Utilizzate i titoli in ordine: H1 → H2 → H3, senza saltare livelli.
• Utilizzate i titoli per definire la struttura del contenuto, non per motivi visivi; se desiderate un testo grande o in grassetto, utilizzate i CSS, non scegliete un livello di titolo errato.
• Ogni H2/H3 deve essere un vero e proprio titolo di sezione, non testo decorativo o slogan.
• Utilizzate le parole chiave nei titoli in modo naturale; non riempite forzatamente ogni titolo con parole chiave.
• Nelle pagine lunghe, scrivete i titoli in modo coerente e prevedibile, in modo da creare un indice (table of contents); questo aiuta sia l’utente che i motori di ricerca.
• Se utilizzate un tema o una libreria di componenti, documentate in una guida di stile centralizzata quale livello di titolo viene utilizzato dai diversi componenti (header, hero, scheda, footer).
• Quando modificate il layout della pagina, controllate periodicamente con gli strumenti di sviluppo del browser (albero DOM) se la gerarchia dei titoli è stata compromessa.
• Nei blog o nei siti di notizie, create un flusso di lavoro per la gestione dei contenuti che mantenga il titolo dell’articolo (H1) separato dal titolo editoriale e dal titolo SEO; non collegateli tra loro.
• Nei siti con più autori, i diversi redattori possono avere abitudini diverse; pertanto, mettere per iscritto le regole della gerarchia dei titoli in una guida di stile aumenta la coerenza.

Esempio

<h1>Guida SEO</h1>
<h2>SEO tecnico</h2>
<h3>Velocità del sito</h3>
<h2>SEO dei contenuti</h2>
<h3>Ricerca delle parole chiave</h3>

Esempio errato: <h1>Benvenuto</h1> e poi direttamente <h4>I nostri prodotti</h4> — i livelli H2 e H3 sono stati saltati, la gerarchia è stata compromessa.

Errori comuni

• Utilizzare più di un H1 nella pagina (ad es. sia nell’area del logo che nel contenuto).
• Non utilizzare affatto l'H1.
• Utilizzare i tag di titolo solo per ottenere caratteri grandi/in grassetto, trascurando la gerarchia.
• Saltare un livello passando direttamente da H2 a H4.
• Quando nel rapporto di Seoraporu.co compare un avviso relativo a "più di un H1" o "H1 mancante", è necessario correggere il problema a livello di template/tema, poiché si tratta in genere di un problema ricorrente in tutte le pagine.