Tag H1 di WordPress: risolti i problemi di gerarchia delle intestazioni

Pubblicato il | Di
14 minuti di lettura

Hai passato ore a creare la pagina WordPress perfetta. Il contenuto è solido. Le parole chiave vengono inserite. Il tuo plugin SEO mostra un segno di spunta verde.

Ma apri gli strumenti di sviluppo del tuo browser ed esamina la struttura delle intestazioni e vedrai qualcosa che può tranquillamente uccidere il tuo traffico organico: una gerarchia delle intestazioni interrotta. Due H1. Il titolo di un sito racchiuso tra `<h1>`. Le sezioni saltano da H2 direttamente a H4. O peggio, niente H1.

Questo non è un errore da principiante. It’s a structural problem baked into how WordPress, themes, page builders, and the Gutenberg editor interact — and most site owners never know it’s happening.

Questa guida esiste per risolverlo. Che tu sia il proprietario di un sito WordPress che gestisce i tuoi contenuti o un'agenzia che costruisce siti per decine di clienti, lascerai qui sapendo esattamente come farlo verificare, diagnosticare e risolvere in modo permanente il problema dell'ordine delle intestazioni in WordPress.


Che cos'è un tag H1 e perché è importante in WordPress?

Un tag H1 (<h1>) è l'elemento di intestazione HTML di primo livello. Nell'HTML semantico, segnala ai browser, ai motori di ricerca e alle tecnologie assistive: "Questo è l'argomento principale di questa pagina."

Pensa ai tag di intestazione come a una struttura del documento:

H1 – Main page title (only one per page)
 ├── H2 – First major section
 │    ├── H3 – Subsection
 │    └── H3 – Another subsection
 ├── H2 – Second major section
 │    ├── H3 – Subsection
 │    │    └── H4 – Detail within subsection
 └── H2 – Third major section

Salta un livello, saltando da H2 a H4, e rompi il contorno. Usa due H1 e crei ambiguità strutturale. Usa i tag H3 per lo stile visivo e introduci titoli fantasma che confondono i crawler.

In WordPress in particolare, questo diventa complicato velocemente. A differenza di una pagina HTML statica in cui scrivi ogni tag manualmente, WordPress genera markup di intestazione da almeno quattro fonti diverse contemporaneamente: il modello di intestazione del tema, il titolo del post, il contenuto dell'editor ed eventuali widget o moduli di creazione di pagine che hai aggiunto.

Cosa dice realmente Google sui tag H1

Sistemiamo il dibattito sulla classifica Presto.

Nel luglio 2024, Gary Illyes di Google ha affrontato questo argomento direttamente durante il podcast SEO Office Hours: organizzare i titoli in ordine semantico è davvero utile per l’accessibilità (soprattutto per gli utenti di screen reader), ma non ha un impatto significativo sugli algoritmi di ranking di Google. John Mueller ha anche affermato che più tag H1 su una pagina non confondono i crawler e non hanno alcun impatto diretto sulla SEO.

Allora, tutto questo ha importanza?

Sì, ma non per il motivo indicato dalla maggior parte delle guide SEO.

I veri motivi per preoccuparsi della struttura delle intestazioni in WordPress sono:

  1. Conformità all'accessibilità — Il criterio di successo 1.3.1 delle WCAG 2.1 richiede che le informazioni e le relazioni siano determinabili a livello di programmazione. Le gerarchie di intestazioni interrotte falliscono in questo.
  2. Crawability e segnali di contenuto — Sebbene Google sia in grado di analizzare markup disordinati, un H1 pulito fornisce il segnale più chiaro possibile sull'argomento della pagina, che è importante nei casi ambigui.
  3. Esperienza utente e tempo di permanenza — I lettori scansionano le intestazioni. Una gerarchia logica li aiuta a navigare e a rimanere più a lungo: entrambi segnali di classificazione indiretti.
  4. Pulizia dell'audit tecnico — Per le agenzie, le questioni relative alle rubriche emergono in ogni strumento di audit (Screaming Frog, Ahrefs, SEMrush, Rank Math, Yoast). I report rivolti ai clienti sembrano pessimi anche se si discute dell'impatto diretto sul ranking.

Come WordPress genera tag di intestazione: le quattro fonti di conflitto

Comprensione Perché Le interruzioni della struttura delle intestazioni di WordPress richiedono la comprensione dei quattro punti da cui genera le intestazioni.

Fonte 1: modello di intestazione del tema

La maggior parte dei temi WordPress visualizza il titolo del sito nell'area dell'intestazione. I temi più vecchi e mal codificati lo racchiudono in un tag <h1> su ogni singola pagina. Ciò significa che ogni pagina del tuo sito inizia con lo stesso H1: il nome del tuo marchio.

Quindi, quando viene visualizzato il titolo della pagina o del post (che Dovrebbe essere l'H1), diventa un secondo H1 o viene retrocesso a H2.

Ecco come appare in un tema non funzionante header.php:

php

// Broken — site title as H1 on every page
<h1><?php bloginfo('name'); ?></h1>
<h2><?php the_title(); ?></h2>  // Post title wrongly demoted

Come dovrebbe apparire:

php

// Correct — site title is a link or span, post title is H1
<p class="site-title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
<h1><?php the_title(); ?></h1>

Questo è uno dei problemi H1 di WordPress più comuni ed è completamente invisibile a meno che non controlli l’origine della pagina. Puoi avere un plugin SEO, un punteggio di leggibilità verde e contenuto perfetto - e continui a produrre H1 duplicati su ogni pagina.

Fonte 2: L'editor dei blocchi Gutenberg

L'editor di blocchi di WordPress ha introdotto modifiche deliberate al comportamento H1. Per impostazione predefinita, Gutenberg de-enfatizza l'opzione H1 nel blocco Intestazione: il presupposto è che il titolo del post venga già visualizzato come H1, quindi i titoli dell'area di contenuto dovrebbero iniziare da H2.

In pratica ciò crea due problemi:

Problema A: Alcuni temi lo fanno non genera il titolo del post come H1. Se il tuo tema rende il titolo in <div> o <h2> per ragioni stilistiche, e Gutenberg ha nascosto H1 dalle opzioni del blocco di intestazione, ti ritroverai con zero tag H1 sulla pagina.

Questa è esattamente la situazione segnalata in un problema di GitHub di lunga data nel repository Gutenberg: gli utenti richiedono la possibilità di rimuovere completamente l'opzione H1 per configurazioni aziendali e di agenzie in cui l'H1 è controllato a livello di modello. Il problema evidenzia una vera confusione: il comportamento predefinito dell’editor e il modello del tema devono essere esplicitamente coordinati, ma WordPress non fornisce alcun controllo automatico per questo.

Problema B: Gli editor di contenuti possono comunque selezionare H1 nell'editor di blocchi modificando il livello dell'intestazione. Se il tuo tema restituisce già il titolo del post come H1, un editor che aggiunge un altro blocco H1 all'interno dell'area del contenuto crea un duplicato e non viene visualizzato alcun avviso.

Fonte 3: Costruttori di pagine (Elementor, Divi, Beaver Builder)

I page builder sono la principale fonte di caos gerarchico dei titoli in WordPress.

Ecco perché: i page builder ti offrono un controllo visivo granulare. Puoi trascinare un elemento di testo ovunque, modellarlo in qualsiasi modo e assegnare qualsiasi livello di intestazione. Questo è potente per il design. È disastroso per la struttura.

Il tipico problema dell'intestazione del page builder è simile al seguente:

  • Sezione Eroe: H1 (corretto) ✓
  • Titolo della sezione delle funzionalità: H3 (salta H2, scelto perché "sembra migliore") ✗
  • Titolo dell'area widget: H2 (sembra un titolo di sezione, ma è solo il titolo di un widget nella barra laterale) ✗
  • Intestazione della testimonianza: H4 (senza H3 sopra) ✗
  • Intestazione CTA: H2 (torna a un livello superiore, ora il contorno è completamente non lineare) ✗

Il risultato è una struttura dell’intestazione visivamente coerente ma semanticamente priva di significato. Gli screen reader e i crawler che analizzano questo aspetto ottengono una struttura del contenuto che salta come un sommario rotto.

La documentazione di InspectWP identifica esplicitamente questo modello: gli autori e gli utenti del page builder scelgono i livelli di intestazione in base a come Aspetto piuttosto che il loro significato logico: se H3 ha la dimensione visiva giusta, selezionano H3, anche senza H2 sopra.

Fonte 4: widget e componenti del tema

Le aree widget di WordPress – barre laterali, piè di pagina, moduli di intestazione – spesso producono intestazioni proprie. Un widget "Post recenti" potrebbe essere visualizzato come H2. Un banner promozionale integrato nel tema potrebbe utilizzare H3. Nessuno di questi fa parte della struttura del contenuto, ma appare nella struttura dell'intestazione della pagina.

Ciò crea un “rumore” di titoli che aumenta l’apparente complessità della struttura e può spingere i titoli dei contenuti fuori dalla loro corretta posizione gerarchica.


I 5 problemi più comuni di WordPress H1 e di gerarchia delle intestazioni

Problema 1: il titolo del sito è racchiuso in H1 su ogni pagina

Come appare: Ogni pagina del tuo sito ha due H1: il nome del tuo sito e il titolo del tuo post.

Chi colpisce: Siti che utilizzano temi meno recenti, temi premium mal realizzati o qualsiasi tema in cui lo sviluppatore ha utilizzato <h1> per il branding del sito.

Come rilevarlo: Fai clic con il pulsante destro del mouse su qualsiasi pagina → Ispeziona → cerca <h1 nel pannello Elementi. Se vedi il nome del tuo sito racchiuso in H1 nella sezione <intestazione>, hai questo problema.

Come risolverlo:

Opzione 1: modifica del tema secondario (approccio dello sviluppatore) Nei temi di tuo figlio header.php, trova l'output del titolo del sito e modificalo da <h1> a <p> o <span> con le classi appropriate:

php

<p class="site-title">
  <a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
    <?php bloginfo('name'); ?>
  </a>
</p>

Opzione 2: CSS + aria-label (soluzione alternativa senza codice) Se non riesci a modificare i file del tema, utilizza i CSS per reimpostare lo stile H1 sul titolo del sito:

css

.site-header h1.site-title {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

Nota: questo nasconde il visivo Problema H1 ma non risolve il problema strutturale. Il tag H1 rimane nel markup.

Opzione 3: passa a un tema ben strutturato I temi che seguono gli standard di codifica di WordPress (Twenty Twenty-Four, Kadence, GeneratePress, Astra) lo gestiscono correttamente e immediatamente. Se il tuo tema attuale presenta questo problema e non sei uno sviluppatore, cambiare è spesso la soluzione più affidabile.


Problema 2: H1 mancante nella home page

Come appare: La tua home page ha zero tag H1. I plugin SEO riportano “Nessun H1 trovato”.

Chi colpisce: Siti che utilizzano un'immagine del logo per il branding (nascondendo il titolo del sito), siti che utilizzano una prima pagina statica senza titolo visibile o siti in cui il modello di home page del tema non richiama the_title().

Questo è un problema reale e ricorrente nei forum di supporto di WordPress. La causa è tipicamente questa sequenza: il titolo del sito è impostato per essere visualizzato nell'intestazione, ma l'utente lo nasconde (o lo sostituisce con un logo), rimuovendo il solo H1 dalla pagina. Poiché la home page spesso non ha un “titolo del post” come fa un post del blog, non viene generato H1 automatico.

Come risolverlo:

Per la home page in particolare: Aggiungi un H1 alla sezione hero o al modello di pagina. Questo può essere:

  • Un'intestazione visibile ("Nome della tua azienda | Categoria di servizio") che funziona anche come H1
  • Un H1 visivamente nascosto aggiunto tramite CSS (position: absolute; clip: rect(0 0 0 0);) che fornisce il marcatore semantico senza interrompere il design visivo

A Gutenberg: Aggiungi un blocco di intestazione nella parte superiore del contenuto della tua home page, impostalo su H1 e rendilo parte del tuo messaggio hero.


Problema 3: livelli di intestazione saltati nel contenuto

Come appare: La struttura del contenuto passa direttamente da H2 a H4 o da H1 direttamente a H3.

Chi colpisce: Chiunque scriva contenuti di lunga durata e utilizzi titoli per uno stile visivo piuttosto che per una struttura semantica.

Perché è importante: Come osserva InspectWP, il salto dei livelli di intestazione avviene quando gli autori scelgono i livelli in base all'aspetto: l'H3 sembra corretto, quindi usano H3, indipendentemente dal fatto che un H2 lo preceda.

Come rilevarlo in Gutenberg: Fai clic sull'icona delle informazioni (ⓘ) nella barra degli strumenti superiore dell'editor di blocchi. Il pannello Struttura del documento mostra tutte le intestazioni in ordine e contrassegna i livelli saltati con un avviso.

Come risolverlo:

  1. Controlla la struttura dell'intestazione utilizzando la struttura del documento prima della pubblicazione
  2. Imposta una guida allo stile dei contenuti per il tuo team: H2 per le sezioni principali, H3 per le sottosezioni, H4 per le sottosezioni: non saltare mai i livelli
  3. Utilizza Yoast SEO o l'analisi dei contenuti di Rank Math: entrambi segnalano problemi relativi alla struttura delle intestazioni

Problema 4: più tag H1 dai page builder

Come appare: Una pagina creata con Elementor o Divi ha tre o quattro tag H1 perché ogni sezione principale ha il proprio titolo "H1" in stile eroe.

Come risolverlo:

In Elementor: modifica ciascun widget di intestazione → controlla l'impostazione del tag HTML → imposta solo il titolo della pagina principale su H1 e modifica tutti gli altri su H2 o H3 a seconda dei casi.

In Divi: modifica i moduli di intestazione → in Avanzate → Tag HTML → passa al livello semantico corretto.

In Beaver Builder: ogni modulo di intestazione ha un'impostazione "Tag di intestazione" nella scheda Stile. Controlla ciascuno di essi.


Problema 5: il problema della visibilità di Gutenberg H1

Come appare: Il tuo tema non restituisce il titolo del post come H1 e Gutenberg ha nascosto l'opzione H1 nel blocco Intestazione. Le tue pagine non hanno H1.

Come risolverlo:

Per gli sviluppatori che gestiscono un sito in cui l'H1 deve essere inserito all'interno dell'area del contenuto, puoi ripristinare l'opzione H1 utilizzando un filtro nella sezione del tema functions.php:

php

// Allow H1 in the Heading block
add_filter( 'allowed_block_types_all', function( $allowed_blocks ) {
    return $allowed_blocks;
});

In alternativa, passa alla visualizzazione "Modifica come HTML" per il blocco Intestazione e imposta manualmente <h1> nel markup.

Per le configurazioni dell'agenzia dove desideri impedire gli editor dall'aggiunta di H1 (perché il modello lo controlla), utilizzare il file block_editor_settings_all filtro per limitare i livelli di intestazione nell'editor.


Come controllare la struttura delle intestazioni di WordPress (passo dopo passo)

Metodo 1: Plugin gratuito SkySEOManager

Utilizzo Plug-in SkySEOManager incorpora SEO Analyser per trovare tutti i problemi relativi ai titoli.

Leggi la guida completa: come controllare il tuo sito WordPress utilizzando SkySEOManager per tutti i problemi SEO

Metodo 2: utilizza il SEO Analzyer gratuito di Siteskyline

Visita fuori Analizzatore SEO gratuito e inserisci il tuo URL e fai clic su Analzye now.

Ti mostrerà tutti i problemi con i tag del titolo.

WordPress H1 Tags: Fix Heading Hierarchy Issues

Gerarchia H1 di WordPress: la lista di controllo dell'agenzia

Se stai creando o mantenendo siti WordPress per i clienti, la struttura delle intestazioni deve far parte del processo di controllo pre-lancio e continuo. Ecco una lista di controllo ripetibile:

A livello tematico:

  • Il titolo del sito nell'intestazione NON è racchiuso tra <h1> (usa <p>, <span> o <div>)
  • Il titolo del post/pagina viene visualizzato come <h1> in <article> o <main> su tutti i tipi di post
  • La home page ha esattamente un <h1>: dal titolo del sito o dalla sezione degli eroi
  • Le pagine di archivio (categoria, tag, autore) hanno un <h1> descrittivo
  • La pagina 404 ha un <h1>

A livello di contenuto:

  • Ogni pagina ha esattamente un <h1> nell'area del contenuto (o zero se il tema lo gestisce tramite il titolo)
  • Le sezioni principali usano <h2>
  • Le sottosezioni utilizzano <h3> nidificate all'interno delle sezioni <h2>
  • Nessun livello di intestazione viene saltato
  • I titoli non vengono utilizzati solo per lo stile visivo

A livello di plugin/costruttore:

  • Gli elementi di intestazione Elementor/Divi/Beaver Builder hanno le impostazioni corrette dei tag HTML
  • Le aree widget non emettono tag H1 o H2 accidentali
  • Gli avvisi H1 del plugin SEO vengono risolti su tutte le pagine chiave

La corretta gerarchia delle intestazioni di WordPress: per tipo di pagina

Un modello non si adatta a ogni tipo di pagina WordPress. Ecco la struttura corretta per ciascuno:

Post del blog/Pagina di post singolo

H1: Post Title (output by theme automatically)
  H2: First major section
    H3: Subsection
    H3: Another subsection
  H2: Second major section
    H3: Subsection
      H4: Detail
  H2: Third major section

Home page (prima pagina statica)

H1: Primary value proposition or page headline
  H2: Service category or feature group
    H3: Individual service or feature
  H2: Testimonials or social proof section
  H2: Call to action section

Pagina del prodotto WooCommerce

H1: Product name (output by WooCommerce template)
  H2: Product description heading
  H2: Reviews
  H2: Related products

Categoria/Pagina archivio

H1: Category name (e.g., "WordPress SEO Articles")
  H2: Post title within loop (if posts are displayed with headings)

Errori comuni che rompono la struttura H1 di WordPress

Errore 1: utilizzare i tag di intestazione per definire lo stile del testo Se desideri un testo in grassetto di grandi dimensioni che non sia un titolo di sezione, non utilizzare H2. Aggiungi una classe CSS a <p> o <div> e modellala visivamente. L'uso dei tag di intestazione per motivi estetici inquina il tuo schema strutturale.

Errore 2: lasciare che gli editori scelgano i livelli di intestazione a vista Senza una guida allo stile dei contenuti, gli editori graviteranno naturalmente verso livelli di intestazione che Aspetto Giusto. Una breve guida interna – “H2 per le sezioni, H3 per le sottosezioni, non usare mai H1 nei contenuti” – previene la maggior parte dei problemi.

Errore 3: installare un tema WordPress senza controllare la struttura delle intestazioni Non tutti i temi WordPress premium restituiscono il markup dell'intestazione corretto. Prima di impegnarsi in un tema, ispeziona un post demo: il titolo del post viene visualizzato come H1? Il titolo del sito evita di essere H1 nelle pagine interne?

Errore 4: dare per scontato che il tuo plugin SEO copra tutto Yoast e Rank Math controllano il post che stai modificando. Non rilevano i problemi di intestazione introdotti dal modello di intestazione del tema, dai widget del piè di pagina o dai modelli di pagina di archivio. È ancora necessario un controllo manuale o una scansione di Screaming Frog.

Errore 5: correggere l'aspetto visivo anziché la struttura HTML La "correzione" più comune per il problema H1 del titolo del sito è l'aggiunta di CSS per farlo sembrare più piccolo. Ciò nasconde visivamente il problema ma lascia al suo posto il markup non funzionante. Correggi il tag HTML, non solo lo stile.

Condividi questo post

Ajay Malik

Ajay Malik è uno sviluppatore WordPress ed Elite Freelance con oltre 8 anni di esperienza.