Analizzatore di intestazioni
Lo schema da H1 a H6
Questo analizzatore di intestazioni disegna lo schema di qualsiasi pagina: ogni intestazione in ordine, rientrata per livello, con i livelli saltati e le intestazioni vuote segnalati. Incolla un indirizzo, oppure incolla direttamente il markup.
- GratisPrezzo
- 2Modalità
- NessunaRegistrazione
- NullaSalvato
Analizzatore di intestazioni
Lo schema da H1 a H6 di una pagina, e dove si rompe
- Intestazioni
- 0
- Tag H1
- 0
- Livelli saltati
- 0
- Intestazioni vuote
- 0
- Livello più profondo
- —
Pronto. Incolla un indirizzo, oppure passa alla modalità markup e incolla la pagina stessa.
A cosa serve uno schema delle intestazioni
Le intestazioni non sono testo grande. Sono l’indice che una pagina costruisce per sé stessa e, infatti, due gruppi leggono quell’indice invece della pagina.
Chi usa uno screen reader salta da un’intestazione all’altra per raggiungere la parte che vuole. Allo stesso modo i crawler leggono quella struttura per capire cosa copre una pagina lunga.
Per questo uno schema senza H1, o che salta da H2 a H4, si legge come un indice a cui mancano dei capitoli.
La Web Accessibility Initiative del W3C lo dice allo stesso modo nella sua guida sulla struttura della pagina: le intestazioni descrivono sezioni, e i livelli descrivono come quelle sezioni si annidano.
Un solo H1, e perché
L’H1 dice di cosa parla l’intera pagina. Uno solo, in alto, coerente con l’argomento della pagina.
Tecnicamente HTML5 ne consente diversi, perché le sezioni dovevano creare schemi propri. Tuttavia i browser non hanno mai implementato quello schema, quindi in pratica un solo H1 resta la regola.
Un controllo degli H1 è quindi l’audit di pagina più rapido che esista. Nessun H1 o tre tag H1 indicano entrambi un problema di template, non di scrittura.
Perché un livello saltato conta
Un salto da H2 a H4 dice alle tecnologie assistive che una sottosezione sta dentro qualcosa che nessuno ha mai aperto.
La correzione è quasi sempre visiva. Qualcuno voleva un testo più piccolo e ha usato un livello inferiore, ma il riferimento degli elementi di intestazione è chiaro: la dimensione appartiene al CSS.
Dai all’H3 lo stile che vuoi. Così lo schema resta onesto e la pagina continua a sembrare giusta.
Intestazioni vuote
Un’intestazione che avvolge un’immagine, un’icona o niente del tutto. Uno screen reader annuncia "intestazione, vuota", il che è peggio di nessuna intestazione, e per questo l’analizzatore le segnala tutte.
Due modi di leggere una pagina
La modalità indirizzo scarica una pagina online tramite questo server, perché il tuo browser non può leggere un altro sito per conto tuo.
La modalità markup legge ciò che incolli, interamente nella scheda. Così copre un sito di staging protetto da password, una pagina ancora nell’editor o un frammento di template.
La riga di stato indica quale modalità è attiva. Inoltre in modalità markup nulla lascia la scheda, e il piè di pagina lo specifica.
Come si usa davvero uno schema
Uno screen reader può elencare tutte le intestazioni di una pagina e saltare direttamente a una. Quell’elenco è lo schema che disegna questo strumento, nello stesso ordine.
I lettori vedenti fanno qualcosa di simile con gli occhi. Scorrono la pagina cercando un’intestazione che corrisponda a ciò che li ha portati lì e, poi, leggono da quel punto.
Entrambi i comportamenti premiano la stessa cosa: intestazioni che descrivono la loro sezione e stanno al livello giusto. Invece nessuno premia una parola chiave infilata a forza in un H2.
Quindi scrivi prima lo schema, poi riempilo. Una pagina che si legge bene come elenco di intestazioni di solito si legge bene anche come prosa.
Intestazioni e pagine lunghe
Una pagina lunga vive o muore per il suo schema. Oltre le mille parole circa nessuno legge dall’alto in basso e, perciò, le intestazioni diventano la navigazione.
Inoltre Google estrae link di sezione da una struttura chiara in alcuni risultati, il che dà a una pagina lunga più di un punto d’ingresso.
Di conseguenza una pagina con quindici sezioni ha bisogno di quindici intestazioni oneste, non di cinque intestazioni e dieci righe in grassetto.
Leggere l’albero disegnato da questo strumento
L’albero rientra ogni intestazione sotto quella precedente, così un salto da H2 a H4 appare come un vuoto visibile invece che come un avviso da leggere.
Il rosso grassetto segnala il secondo H1, se la pagina ne ha uno. È il difetto da correggere per primo.
Le intestazioni vuote appaiono come un trattino. Infatti un’intestazione con dentro solo un’icona non dice nulla a uno screen reader.
Inoltre il conteggio in alto dice quante intestazioni di ogni livello usa la pagina. Nove H3 sotto un H2 di solito significano che la sezione andava divisa.
Le intestazioni non sono un trucco per il ranking
Infilare parole chiave in un H2 ha smesso di funzionare da tempo. Una struttura chiara aiuta un crawler a capire una pagina lunga e, soprattutto, aiuta molto di più un lettore, che è il motivo migliore.
In questa pagina
- Lo strumento
- A cosa serve uno schema delle intestazioni
- Come usare l’analizzatore di intestazioni
- Cosa distingue questo analizzatore di intestazioni
- Regole per una struttura di intestazioni pulita
- Sei errori di intestazione su siti reali
- Domande frequenti sulle intestazioni
- Strumenti per il resto della pagina
Continua
Come usare l’analizzatore di intestazioni
Tre passaggi, e lo schema appare come un elenco da leggere dall’alto in basso.
- 1
Scegli una modalità
Un indirizzo online o un markup che incolli. La modalità markup non invia nulla da nessuna parte, per questo si adatta a una pagina non ancora pubblicata.
- 2
Avvialo
Lo schema si riempie, rientrato per livello, con il nome del tag su ogni riga. Inoltre le righe ambra sono livelli saltati e quelle rosse intestazioni vuote.
- 3
Leggi i risultati
Sotto lo schema compaiono i difetti in parole chiare: nessun H1, più tag H1, livelli saltati, intestazioni vuote e tutto ciò che è insolitamente lungo.
- 4
Correggi i livelli, non le dimensioni
Quasi ogni livello saltato è una scelta di dimensione del carattere. Pertanto cambia il CSS e lascia l’intestazione al livello che la sua posizione merita.
Cosa distingue questo analizzatore di intestazioni
La maggior parte stampa un elenco piatto di intestazioni. Qui invece le differenze sono il rientro, i difetti e la seconda modalità.
Uno schema rientrato
Ogni riga sta al suo livello, così un salto da H2 a H4 si vede invece di doverlo contare.
Modalità markup
Incolla un frammento dal tuo editor. Non si scarica nulla e non si invia nulla, il che conta per il lavoro non pubblicato.
Difetti indicati a parole
Saltato, vuoto, mancante. Ogni risultato dice cosa fare invece di dare alla pagina un voto su cento.
Blocchi script ignorati
Le intestazioni dentro script, style, template o commenti non sono vere intestazioni, quindi nessuna entra nel conteggio.
Nessun parser, per scelta
Questo sito blocca il parsing DOM di markup non affidabile, quindi la scansione trova i tag dalla loro forma. Così la pagina di uno sconosciuto non può mai entrare in questo documento.
Uno schema copiabile
Un solo tocco ti dà l’intera struttura come testo rientrato, pronta per un ticket, una revisione o un documento.
Regole per una struttura di intestazioni pulita
Le intestazioni costano poco se fatte bene e sono fastidiose da correggere dopo. Queste otto regole coprono quasi ogni caso.
- Un H1, vicino all’inizio. Dice al lettore e a Google di cosa tratta la pagina. Se due cose di una pagina meritano un H1, probabilmente hai due pagine.
- Non saltare mai un livello scendendo. H2 segue H1, e H3 segue H2. Risalire va bene, poiché un nuovo H2 apre semplicemente la sezione successiva.
- Usa il CSS per la dimensione. Scegli il livello in base alla posizione nello schema, poi dagli stile. Un’intestazione scelta per la dimensione del carattere rompe la struttura per chi non può vederla.
- Titoli che si capiscono anche letti da soli. Chi scorre l’elenco delle tue intestazioni dovrebbe capire la pagina. "Panoramica" non gli dice nulla.
- Tienile brevi. Non oltre nove o dieci parole. Le persone scorrono le intestazioni invece di leggerle, quindi un’intestazione lunga quanto una frase fallisce lo scopo.
- Non avvolgere un’immagine in un’intestazione. Uno screen reader annuncia un’intestazione vuota. Metti il testo nell’intestazione e il logo accanto.
- Controlla il template, non una pagina. Un difetto di intestazione in un template si ripete su ogni pagina costruita con esso, quindi un controllo ne copre centinaia.
- Ricontrolla dopo un redesign. I nuovi temi cambiano i livelli di intestazione per adattarli alla loro scala tipografica, ed è lì che di solito compare un buco nello schema.
Sei errori di intestazione su siti reali
Nessuno si vede in un browser. Tutti e sei si vedono in uno schema.
Il logo come H1
Comune nei temi più vecchi. Ogni pagina dice allora di parlare del nome dell’azienda, e nessuna dice cosa copre davvero.
Un H4 scelto per la sua dimensione
Il grafico desiderava caratteri più piccoli. Ora lo schema ha un buco, e le tecnologie assistive segnalano una sottosezione senza genitore.
Più tag H1 dai widget
Una barra laterale, un footer e un hero ne aggiungono uno ciascuno. La pagina finisce per dichiarare tre argomenti.
Intestazioni usate per enfasi
Una riga in grassetto a metà paragrafo marcata come H3. Nello schema appare come una sezione che non esiste.
Intestazioni vuote attorno alle icone
Una forma decorativa dentro i tag di intestazione si annuncia come intestazione vuota, ed è rumore per chiunque ascolti.
Nessun H1 su una landing page
I page builder lo perdono più spesso di qualsiasi altra cosa, e la pagina perde l’unica intestazione che ne nomina l’argomento.
Domande frequenti sulle intestazioni
Una pagina web dovrebbe contenere un solo H1 o più di uno?
Uno. In teoria HTML5 ne consente di più, ma nessun browser ha mai implementato lo schema su cui si basava quell’idea, quindi un controllo degli H1 considera ancora un secondo H1 come un problema.
Passare da H2 a H4 penalizza su Google?
Da solo, quasi nulla. Tuttavia danneggia chiaramente l’accessibilità, poiché chi usa uno screen reader naviga per intestazioni, e questo basta a giustificare la correzione.
Posso controllare una pagina non ancora online?
Sì. Passa alla modalità markup e incolla l’HTML. In quella modalità nulla lascia la scheda, quindi il lavoro non pubblicato resta sul tuo computer.
Perché il conteggio è diverso dal mio editor?
Questo analizzatore di intestazioni ignora le intestazioni dentro blocchi script, style, template e commenti. Infatti non sono vere intestazioni, per quanto ne abbiano l’aspetto.
L’ordine delle intestazioni conta?
Moltissimo. Lo schema si legge dall’alto in basso, quindi un’intestazione di sezione che compare dopo il contenuto che introduce confonde sia il lettore sia il crawler.
E un H1 nell’header del sito?
Conta e, nella maggior parte dei temi, è il logo. Di conseguenza ogni pagina ha lo stesso H1, che è il problema più comune segnalato da questo strumento.
Conviene mettere parole chiave nei titoli?
In modo naturale, sì. Di proposito, no. Del resto un’intestazione che descrive la sua sezione conterrà le parole che la gente cerca senza alcun aiuto.
E le intestazioni dentro un nav o un footer?
Contano, perché stanno nel documento. Inoltre vale la pena sapere di un H2 ripetuto nel footer, poiché compare su ogni pagina.
Quante parole mettere in un titoletto?
Non oltre nove o dieci parole. L’analizzatore segnala tutto ciò che supera i settanta caratteri, cioè più o meno il punto in cui un’intestazione non si legge più a colpo d’occhio.
Segue i redirect?
Fino a cinque, e ogni salto ripassa tutti i controlli prima della richiesta successiva. Di conseguenza lo schema che ottieni è quello della pagina in cui finisce la catena.
Le intestazioni in una barra laterale contano?
Sì, perché stanno nel documento. Un H2 della barra laterale che si ripete su ogni pagina merita attenzione e, inoltre, lo schema mostra esattamente dove si trova.
Posso esportare lo schema?
Premi il pulsante di copia e ottieni l’intera struttura come testo rientrato, con il livello su ogni riga. Così si incolla pulita in un ticket o in un documento di revisione.
L’indirizzo che controllo viene salvato?
No. Serve una richiesta e poi sparisce e, inoltre, questo server non conserva alcuna copia della pagina.
Strumenti per il resto della pagina
Lo schema è uno strato della revisione on-page. Questi tre coprono gli altri.
Analizzatore di meta tag
Il blocco head dello stesso indirizzo, con le lacune indicate.
Apri lo strumento →Controllo leggibilità
Cinque formule sulla scrittura sotto quelle intestazioni.
Apri lo strumento →Rimozione tag HTML
Estrai il testo semplice da una pagina conservando gli a capo.
Apri lo strumento →
Vediamo la struttura della tua pagina?
Incolla un indirizzo o il tuo markup, poi leggi lo schema dall’alto in basso. L’analizzatore di intestazioni è gratis, non chiede account e non conserva traccia della pagina.