Verifica della struttura dei titoli: schema da H1 a H6 dall'HTML | We.Inc
Incolla l'HTML e vedi lo schema da H1 a H6 come albero, con livelli saltati, H1 mancanti o ripetuti e titoli vuoti segnalati. Gira nel tuo browser; non viene caricato nulla.
Verifica della struttura dei titoli
Incolla l'HTML di una pagina e questo strumento disegna lo schema dei suoi titoli come albero rientrato, da h1 fino a h6, inclusi gli elementi con role="heading". Segnala i livelli saltati, come un h2 seguito da un h4, un h1 mancante o ripetuto e i titoli vuoti. L'analisi avviene nel tuo browser, quindi il codice non lascia mai il tuo dispositivo.
Cosa segnala lo strumento
Controllo
Esempio
Perché conta
Livello saltato
h2 seguito direttamente da h4
Chi usa uno screen reader perde il filo di dove si trova
Nessun h1
La pagina inizia da h2
La pagina non ha un titolo principale
Più di un h1
Logo e titolo entrambi h1
Un solo h1 dovrebbe dare il nome alla pagina
Titolo vuoto
<h3></h3> o solo un'icona
Viene annunciato senza niente da dire
Primo titolo diverso da h1
h3 prima dell'h1
Lo schema comincia a metà
I titoli sono il modo in cui chi usa uno screen reader scorre una pagina, e danno ai motori di ricerca la forma dei tuoi contenuti. Incolla qui sotto l'HTML di una pagina o di un componente, dal sorgente della pagina o dal tuo editor, e lo schema compare con ogni problema segnato sulla riga in cui si verifica.
Copia l'HTML della tua pagina, per esempio dal sorgente, e incollalo nella casella. Oppure carica l'esempio per vedere i controlli.
Lo strumento legge ogni elemento da h1 a h6 e ogni elemento con role="heading" nell'ordine del documento.
Leggi l'albero: il rientro segue il livello, e gli avvisi stanno accanto al titolo che li ha causati.
Correggi il markup, incollalo di nuovo e copia lo schema pulito come testo semplice se ti serve per un brief.
Usa i livelli dei titoli per la struttura e il CSS per la dimensione. Se un h2 sembra troppo grande in una card, cambiane lo stile invece di sostituirlo con un h4.
Risalire di diversi livelli va bene: un h4 può essere seguito da un h2 quando inizia una nuova sezione.
Raramente il logo è l'h1 giusto. Assegna l'h1 al titolo che dà il nome a questa pagina.
Per le single page app incolla l'HTML renderizzato, copiato dall'ispettore degli elementi del browser, perché il sorgente della pagina può mostrare un guscio vuoto.
Il testo nascosto con il CSS qui conta comunque, perché lo strumento legge il markup e non applica il tuo foglio di stile.
Domande frequenti
È sbagliato saltare livelli di titolo?
Il tutorial del W3C sui titoli dice che saltare livelli può creare confusione e andrebbe evitato quando possibile, per esempio un h2 seguito direttamente da un h4. Chiudere una sezione e risalire, come da h4 a h2, è normale.
Una pagina può avere più di un h1?
L'HTML lo consente, ma MDN consiglia un solo h1 che descriva il contenuto della pagina. La vecchia idea che ogni sezione potesse ripartire da h1 si basava su un algoritmo di outline del documento che i browser non usano, quindi questo strumento avvisa in presenza di un secondo h1.
Perché non posso semplicemente inserire un URL?
Questa è una pagina statica che gira nel tuo browser, e i browser impediscono a un sito di leggere l'HTML di un altro sito. Incollare il codice mantiene lo strumento onesto e privato: non viene inviato nulla da nessuna parte.
Riconosce role="heading"?
Sì. Un elemento con role="heading" viene letto al suo aria-level. Se aria-level manca, i browser ripiegano sul livello 2, quindi lo strumento lo tratta come un h2 e segnala l'attributo mancante.
I titoli influiscono sulla SEO?
I titoli descrivono la struttura dei tuoi contenuti a ogni lettore, motori di ricerca compresi. Non facciamo promesse sul posizionamento; uno schema chiaro vale la pena prima di tutto per le persone.
Leggere lo schema
Ogni riga è un titolo, rientrata in base al suo livello. Uno schema sano si legge come un indice: un titolo, una manciata di sezioni h2 e sottosezioni h3 sotto di esse dove serve.
Gli avvisi indicano il titolo in cui è avvenuto il salto, non quello precedente. Correggili dall'alto verso il basso, perché un livello sbagliato all'inizio può far sembrare strano tutto ciò che segue.
Cause comuni
La maggior parte dei livelli saltati nasce dallo scegliere un titolo per la sua dimensione predefinita. Template e page builder lo fanno spesso nei footer e nelle card. Altri vengono da componenti riutilizzati in pagine con una struttura diversa, ed è per questo che conviene rendere configurabile il livello del titolo di un componente.
I titoli vuoti di solito racchiudono un'icona o un'immagine senza testo alternativo. Dai all'immagine un testo alternativo, aggiungi testo visibile oppure smetti di usare un titolo per quell'elemento.
I livelli dei titoli in sintesi
Come si usano di solito i sei livelli in una pagina web
Livello
Uso tipico
Il titolo della pagina, una sola volta
Le sezioni principali della pagina
Sottosezioni dentro un h2
Dettagli dentro un h3, come le voci di un elenco di funzionalità
Raro; documentazione approfondita e testi legali
Correggere uno schema sbagliato
Prima: livelli scelti per la loro dimensione
I titoli delle card saltano da h2 a h4 perché h4 sembrava della dimensione giusta.
Dopo: il livello giusto, ristilizzato con il CSS
Le card usano h3, il livello immediatamente inferiore, e una classe le mantiene piccole.
Controlla i tuoi titoli
Incolla l'HTML qui sotto. Viene letto nel tuo browser e non viene mai caricato.
HTML da controllare
Carica esempio
Cancella
Schema
{n} titoli, {w} avvisi
Nessun titolo trovato. Incolla l'HTML di una pagina per vederne lo schema.
Nessun problema trovato.
(vuoto)
role=heading
Copia schema
Salta da h{from} a h{to}
Un altro h1 nella pagina
Titolo vuoto
Il primo titolo non è un h1
La pagina non ha un h1
role=heading senza aria-level (letto come livello 2)