I tag di intestazione HTML, da <h1> a <h6>, definiscono i titoli e i sottotitoli del tuo contenuto. Creano una struttura gerarchica del documento che indica a browser, motori di ricerca e tecnologie assistive come è organizzata la tua pagina. Pensali come ai titoli di capitoli e sezioni di un libro: l'H1 è il titolo del libro, gli H2 sono i titoli dei capitoli, gli H3 sono sezioni all'interno dei capitoli e così via.
Comprendere la gerarchia delle intestazioni
Ogni livello di intestazione rappresenta una diversa profondità nella struttura della pagina:
<h1>: L'intestazione principale della pagina. Descrive di cosa tratta l'intera pagina. La best practice è utilizzare esattamente un H1 per pagina. Per un articolo di blog, è in genere il titolo dell'articolo. Per una homepage, potrebbe essere la principale value proposition.<h2>: Titoli di sezione principali. Suddividono il tuo contenuto nelle sezioni primarie. In un articolo lungo, ogni H2 introduce un nuovo argomento o punto principale.<h3>: Sottosezioni all'interno di una sezione H2. Se la tua sezione H2 tratta di "Header di sicurezza" e vuoi suddividerla in parti, ogni parte avrà un H3.<h4>fino a<h6>: Livelli di nidificazione più profondi. La maggior parte dei contenuti raramente ha bisogno di andare oltre l'H4. L'uso di H5 o H6 di solito indica che il contenuto trarrebbe vantaggio da una ristrutturazione in pagine o sezioni separate.
Perché la gerarchia delle intestazioni è importante per la SEO
I motori di ricerca utilizzano le intestazioni per comprendere l'argomento e la struttura del tuo contenuto. Google ha confermato che le intestazioni aiutano i crawler a capire di cosa tratta ciascuna sezione di una pagina. Sebbene le intestazioni da sole non siano un enorme fattore di ranking, contribuiscono alla SEO on-page complessiva in diversi modi:
- Segnali di argomento: Le parole chiave nelle intestazioni hanno più peso rispetto alle parole chiave nel testo del corpo. Un H2 con "Come proteggere il tuo login WordPress" dice a Google che quella sezione riguarda specificamente la sicurezza del login.
- Featured snippet: Google estrae spesso contenuto da sezioni con intestazioni chiare per i risultati featured snippet. Una pagina ben strutturata con intestazioni descrittive ha maggiori probabilità di apparire in queste posizioni di rilievo.
- Comprensione della struttura della pagina: Una gerarchia logica delle intestazioni aiuta Google a comprendere la relazione tra le sezioni. Se il tuo H2 è "Ottimizzazione delle prestazioni" e i tuoi H3 sono "Compressione delle immagini" e "Caching", Google capisce che si tratta di sottoargomenti delle prestazioni.
- Passage ranking: Google può classificare singoli passaggi di una pagina. Intestazioni chiare aiutano Google a identificare dove finisce un passaggio e ne inizia un altro.
Accessibilità e navigazione con screen reader
Per gli utenti che si affidano agli screen reader (come JAWS, NVDA o VoiceOver), le intestazioni sono uno dei principali ausili di navigazione. Gli utenti di screen reader spesso premono una scorciatoia (di solito "H") per saltare da intestazione a intestazione, attraversando la struttura della pagina nello stesso modo in cui un utente vedente la scansiona visivamente. Se le tue intestazioni mancano, sono fuori ordine o vengono utilizzate per lo styling visivo invece che per la struttura, gli utenti di screen reader perdono la capacità di navigare in modo efficiente. Le Web Content Accessibility Guidelines (WCAG) affrontano specificamente la struttura delle intestazioni. Il Success Criterion 1.3.1 richiede che le informazioni e le relazioni trasmesse attraverso la presentazione siano determinabili a livello programmatico. In pratica, ciò significa che i tuoi livelli di intestazione devono riflettere l'effettiva gerarchia del contenuto, non solo apparire belli.
Errori comuni nelle intestazioni in WordPress
I siti WordPress sono particolarmente inclini a problemi di intestazione perché la struttura delle intestazioni è suddivisa tra il tema e l'editor di contenuti:
- Più tag H1: Questo è il problema più comune. Alcuni temi emettono il titolo del sito come H1 nell'header e racchiudono anche il titolo della pagina/articolo con un H1. Ciò conferisce alla pagina due intestazioni principali in competizione. Sebbene Google abbia affermato che più H1 sono "OK" in termini di assenza di penalità, un singolo H1 che indichi chiaramente l'argomento della pagina rimane comunque l'approccio più pulito.
- Saltare i livelli di intestazione: Saltare da H2 direttamente a H4, omettendo completamente H3. Ciò interrompe la struttura logica. Gli screen reader annunciano i livelli delle intestazioni, quindi un utente che sente "Intestazione livello 2" seguita da "Intestazione livello 4" si chiederà cosa sia successo al livello 3.
- Utilizzare le intestazioni per lo styling: Scegliere un H3 invece di un H2 perché la dimensione del font di H3 appare migliore nel tema. Questo è un uso improprio delle intestazioni. L'approccio corretto è utilizzare il livello di intestazione appropriato per la struttura e quindi personalizzare il CSS per ottenere l'aspetto visivo desiderato.
- Nessun H1: Alcuni temi o layout di page builder omettono accidentalmente del tutto l'H1, o l'H1 è impostato come titolo del sito nell'header mentre il contenuto effettivo della pagina inizia con H2. Ogni pagina dovrebbe avere esattamente un H1 che descrive l'argomento principale.
- Intestazioni nei widget e nelle barre laterali: I widget di WordPress spesso emettono intestazioni H2 o H3 per i titoli dei widget. Queste intestazioni non fanno parte della gerarchia del contenuto principale e possono confondere la struttura del documento. Alcuni temi risolvono questo problema con attributi
aria-, ma molti no. - Tag di intestazione vuoti: A volte i temi o i page builder lasciano tag di intestazione vuoti nel markup (un
<h2>senza testo). Questi sono invisibili agli utenti vedenti ma confondono gli screen reader.
Come WordPress gestisce le intestazioni
In una tipica configurazione WordPress, la struttura delle intestazioni funziona così: il tema genera l'H1, di solito dal titolo dell'articolo o della pagina. Il contenuto che scrivi nell'editor dovrebbe iniziare con intestazioni H2 per le sezioni principali e H3 e inferiori per le sottosezioni. Non dovresti quasi mai digitare un H1 nell'editor di contenuti, perché il tema ne emette già uno. Se utilizzi un page builder o una landing page personalizzata in cui il tema non emette un H1, devi aggiungerne uno tu stesso. Prima di pubblicare una pagina, vale la pena verificare se il tema emette automaticamente un H1, in modo da evitare duplicati.
Intestazioni nell'editor a blocchi Gutenberg
Con Gutenberg è facile inserire e gestire le intestazioni. Il blocco Heading ti consente di selezionare il livello (da H2 a H6 e H1 se necessario) tramite un menu a discesa. Gutenberg include anche una funzione "Outline del documento" nella barra laterale dell'editor che ti mostra l'intera struttura delle intestazioni del tuo articolo a colpo d'occhio. Se salti un livello di intestazione, la vista dell'outline lo segnala con un avviso. Questo è uno strumento integrato utile che molti utenti WordPress trascurano. Fai l'abitudine di controllare l'outline del documento prima di fare clic su Pubblica.
Strumenti per controllare e visualizzare la struttura delle intestazioni
Oltre all'outline integrato di Gutenberg, ci sono diversi modi per verificare la struttura delle intestazioni:
- Estensioni del browser: L'estensione "HeadingsMap" (disponibile per Chrome e Firefox) mostra la gerarchia delle intestazioni di qualsiasi pagina come un albero comprimibile. Lo strumento di accessibilità "WAVE" segnala anche i problemi di intestazione.
- Plugin SEO: Yoast SEO e Rank Math controllano entrambi la struttura delle intestazioni come parte della loro analisi del contenuto. Ti avvisano se mancano H1 o se l'uso delle intestazioni non è ottimale.
- Validatori online: Il W3C Markup Validation Service controlla il tuo HTML per problemi strutturali, inclusi problemi di ordine delle intestazioni.
- InspectWP: InspectWP scansiona la tua pagina ed elenca ogni intestazione in ordine, in modo da poter vedere l'intera gerarchia a colpo d'occhio.
Best practice per le intestazioni in WordPress
- Un H1 per pagina: Lascia che il tema gestisca l'H1 dal titolo dell'articolo/pagina. Non aggiungerne altri nel contenuto.
- Inizia il contenuto da H2: La tua prima intestazione nell'editor dovrebbe essere H2, non H1.
- Non saltare i livelli: Vai da H2 a H3 a H4. Non saltare mai da H2 a H4.
- Usa le intestazioni per la struttura, non per lo styling: Se vuoi testo più piccolo o più grande, usa classi CSS invece di cambiare il livello di intestazione.
- Mantieni le intestazioni descrittive: "Sicurezza" è meno utile di "Best practice per la sicurezza di WordPress" sia per i lettori che per i motori di ricerca.
- Controlla l'outline del documento: Usa l'outline integrato di Gutenberg o un'estensione del browser prima di pubblicare.
Cosa controlla InspectWP
InspectWP analizza la struttura delle intestazioni della tua pagina WordPress ed elenca ogni intestazione in ordine, da H1 a H6. Rileva tag H1 mancanti, più tag H1, livelli di intestazione saltati e intestazioni vuote. Questo ti dà un quadro chiaro dell'outline del documento della tua pagina e ti aiuta a risolvere problemi strutturali che influenzano sia la SEO che l'accessibilità.