Le intestazioni danno al contenuto della tua pagina una struttura chiara e logica. Non sono solo elementi visivi per far apparire il testo più grande. Gli screen reader le usano per consentire agli utenti di navigare tra le sezioni, e i motori di ricerca le usano per comprendere la gerarchia dei temi del tuo contenuto. Una struttura delle intestazioni difettosa confonde sia gli esseri umani che le macchine, quindi farla bene paga in termini di accessibilità, SEO e leggibilità generale.
Come appare una corretta gerarchia delle intestazioni
Pensa alle tue intestazioni come a uno schema o un indice. Ogni livello rappresenta una profondità di nidificazione, e non dovresti mai saltare un livello mentre scendi. Ecco come appare una struttura corretta:
H1: Titolo della pagina (solo uno per pagina)
H2: Prima sezione principale
H3: Sottosezione della prima sezione principale
H3: Un'altra sottosezione
H4: Dettaglio all'interno della sottosezione
H2: Seconda sezione principale
H3: Sottosezione della seconda sezione principale
H2: Terza sezione principaleNota come ogni livello di intestazione sia nidificato all'interno del livello sopra di esso. Non salteresti da H2 direttamente a H4, proprio come non creeresti una sub-sottosezione senza prima avere una sottosezione. Tornare indietro è ok: dopo un H4 puoi tornare a un H2 per una nuova sezione principale.
Errori comuni delle intestazioni in WordPress
La maggior parte dei problemi di gerarchia delle intestazioni in WordPress deriva da alcuni schemi ricorrenti:
- Il tema usa tag errati per il titolo della pagina: Alcuni temi emettono il titolo dell'articolo o della pagina come H2 invece di H1, oppure usano il nome del sito come H1 su ogni pagina. Ciò significa che il titolo del tuo contenuto effettivo viene declassato, e molte pagine potrebbero non avere affatto un H1 corretto.
- Più tag H1 su una pagina: Questo accade in genere quando il tema emette il titolo del sito come H1 nell'header, e il titolo della pagina è anch'esso un H1. Ogni pagina dovrebbe avere esattamente un H1. Sulle pagine interne, il nome del sito dovrebbe essere un
<p>,<span>o<div>stilizzato, non un H1. - Saltare livelli di intestazione: Saltare da H2 a H4 o da H1 a H3 accade quando gli autori scelgono i livelli di intestazione in base a come appaiono visivamente piuttosto che al loro significato logico. Se l'H3 appare bello come dimensione, scelgono H3, anche se non c'è un H2 sopra di esso.
- Usare le intestazioni per lo styling visivo: Gli autori a volte usano un H2 o H3 solo perché vogliono testo grande e in grassetto per una call-to-action o un titolo di widget nella sidebar. Queste non sono intestazioni di contenuto effettive e dovrebbero invece essere stilizzate con classi CSS.
- Intestazioni di page builder e widget: I page builder come Elementor e le aree dei widget spesso inseriscono intestazioni a livelli inaspettati. Un widget della sidebar potrebbe usare un H3 mentre l'area del contenuto non ha un H2, creando un livello saltato nella gerarchia complessiva della pagina.
Come controllare la tua gerarchia delle intestazioni
Prima di correggere qualsiasi cosa, devi vedere com'è la tua attuale struttura delle intestazioni. Ecco diversi modi per farlo:
- InspectWP: Esegui una scansione e guarda la sezione contenuto. InspectWP mostra l'intera gerarchia delle intestazioni della tua pagina, rendendo facile individuare tag H1 mancanti, H1 duplicati, livelli saltati e altri problemi.
- Estensione browser HeadingsMap: Disponibile per Chrome e Firefox, questa estensione mostra una struttura ad albero di tutte le intestazioni sulla pagina corrente. Segnala errori strutturali come livelli saltati con icone di avviso.
- Strumento di accessibilità WAVE: L'estensione browser WAVE (wave.webaim.org) valuta la tua pagina per problemi di accessibilità, inclusi i problemi di struttura delle intestazioni. Pone icone direttamente sulla pagina dove vengono trovati i problemi.
- Ispezione manuale: Fai clic con il pulsante destro del mouse sulla pagina, seleziona "Visualizza sorgente pagina" (Ctrl+U) e cerca
<h1,<h2,<h3, e così via. Questo ti mostra i tag di intestazione grezzi nell'HTML.
Correggere le intestazioni nell'editor a blocchi Gutenberg
Se stai utilizzando l'editor a blocchi di WordPress (Gutenberg), correggere i livelli di intestazione è semplice:
- Fai clic su qualsiasi blocco Heading nel tuo contenuto.
- Nella barra degli strumenti del blocco in alto, vedrai il livello di intestazione corrente (ad esempio "H3"). Fai clic su di esso per aprire un menu a discesa.
- Seleziona il livello di intestazione appropriato dal menu a discesa. Ricorda che le sezioni del tuo contenuto dovrebbero iniziare con H2 (poiché H1 è riservato al titolo della pagina) e le sottosezioni dovrebbero usare H3.
- L'editor a blocchi include ora una funzione "Outline del documento". Fai clic sull'icona delle informazioni (cerchio con "i") nella barra degli strumenti superiore per vedere la struttura delle intestazioni dell'intero articolo. Ti avvisa di livelli saltati.
Se stai usando il Classic Editor, passa alla scheda "Text" per vedere l'HTML grezzo e modificare manualmente i tag di intestazione.
Correggere le intestazioni nei template del tema
Se i tuoi problemi di intestazione provengono dal tema piuttosto che dal contenuto, dovrai modificare i file del tema. Usa sempre un child theme in modo che le tue modifiche sopravvivano agli aggiornamenti del tema.
Le correzioni comuni includono il cambiamento del tag del titolo del sito sulle pagine interne:
// In header.php del tuo child theme
<?php if (is_front_page()) : ?>
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>E assicurarsi che il titolo dell'articolo usi H1 sui template di singolo articolo/pagina:
// In single.php o content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>Sulle pagine di archivio (categoria, tag, archivi per data), il titolo dell'archivio dovrebbe in genere essere l'H1, e i titoli dei singoli articoli all'interno del loop dovrebbero essere H2.
Stilizzare le intestazioni senza rompere la gerarchia
Se vuoi che il testo appaia visivamente come un'intestazione ma non è un'intestazione strutturale (ad esempio un banner promozionale o un titolo di widget), usa una classe CSS invece di un tag di intestazione:
.heading-style {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}Applica questa classe a un elemento <p> o <div>. Viceversa, se vuoi che un'intestazione reale appaia più piccola o diversa dal default, stilizzala con CSS invece di scegliere un livello di intestazione inferiore per l'aspetto.
Impatto dell'accessibilità della gerarchia delle intestazioni (WCAG 1.3.1)
Il Success Criterion 1.3.1 delle Web Content Accessibility Guidelines (WCAG) richiede che le informazioni, la struttura e le relazioni trasmesse attraverso la presentazione siano determinabili a livello programmatico. Le intestazioni sono uno dei modi principali in cui gli utenti di screen reader navigano nelle pagine web. Secondo l'indagine sugli utenti di WebAIM tra gli utenti di screen reader, oltre il 67% degli utenti di screen reader usa le intestazioni come metodo principale per trovare contenuti su una pagina. Quando salti livelli di intestazione o usi le intestazioni per lo styling visivo, gli utenti di screen reader non possono navigare in modo affidabile nei tuoi contenuti. Correggere la tua gerarchia delle intestazioni è uno dei miglioramenti di accessibilità più semplici e di maggiore impatto che puoi fare.
Impatto SEO di una buona struttura delle intestazioni
Google ha confermato di usare le intestazioni per comprendere il contenuto e la struttura di una pagina. Sebbene le intestazioni da sole non facciano o distruggano il tuo ranking, forniscono importanti segnali di contesto. Un H2 con "Guida all'installazione" dice a Google che la prossima sezione tratterà l'installazione. Anche le intestazioni nidificate correttamente aiutano Google a generare featured snippet e sitelink. Saltare livelli o usare le intestazioni in modo incoerente invia segnali contrastanti sulla struttura del tuo contenuto e può impedire ai motori di ricerca di interpretare accuratamente gli argomenti della tua pagina.
Verifica la tua gerarchia delle intestazioni con InspectWP
Dopo aver apportato correzioni, esegui una nuova scansione InspectWP. La sezione contenuto mostra ogni intestazione sulla tua pagina in ordine, insieme al suo livello. Dovresti vedere un singolo H1, seguito da H2 per le sezioni principali, H3 per le sottosezioni e nessun livello saltato. Se vedi problemi rimanenti, torna all'editor o al template del tema e modifica di conseguenza.