Breadcrumb: Regole di Gerarchia e Schema

I breadcrumb sono un percorso ordinato di collegamenti che mostra dove si colloca la pagina corrente nell’architettura dell’informazione del sito, o IA: il sistema di relazioni genitore, figlio e fratello che organizza i contenuti. Permettono al lettore di risalire senza ricominciare dalla navigazione principale, fornendo al contempo a crawler e sistemi di risposta un resoconto esplicito e leggibile dalla macchina della stessa gerarchia.

Questo percorso renderizzato è intenzionalmente letterale. Identifica tre antenati reali, nomina la pagina corrente e collega solo verso l’alto. Non inserisce “Navigazione SEO” o un’altra frase semplicemente perché quella dicitura potrebbe attirare ricerche.

Perché questo elemento è importante

I lettori arrivano su pagine profonde da risultati di ricerca, link condivisi, email e risposte AI. Spesso non ricordano il percorso che i menu del sito si aspettano che seguano. Un breadcrumb risolve questa incertezza in un colpo d’occhio: “Sto leggendo una pagina elemento all’interno del playbook SEO e posso tornare a entrambe le raccolte.” Questo contesto riduce il costo dell’esplorazione di un sito senza costringere il lettore ad aprire un menu, modificare un URL o usare il pulsante Indietro.

La psicologia riguarda l’orientamento, non la decorazione. Un percorso chiaro dà al lettore un senso stabile di posizione e una via di fuga ovvia. Questo è particolarmente importante sui siti grandi dove titoli di pagina simili possono trovarsi in sezioni diverse—ad esempio, una categoria di prodotto chiamata “Analytics” e una sezione di documentazione con lo stesso nome. Gli antenati disambiguano la pagina prima che il lettore ne interpreti i dettagli.

Le macchine hanno bisogno della stessa relazione espressa senza fare affidamento sulla spaziatura visiva o sui chevron. L’estraibilità automatica significa che il software può recuperare il significato e l’ordine di un’unità dall’HTML o dai dati strutturati. Un <nav> semantico, un elenco ordinato, link ordinari, aria-current e dati BreadcrumbList corrispondenti espongono una sequenza di entità con posizioni esplicite. Una riga di elementi <span> stilizzati può avere lo stesso aspetto, ma non fornisce alcun punto di riferimento di navigazione o ordine di elenco affidabile.

Il percorso visibile e l’output strutturato devono raccontare la stessa storia. Se la pagina è visibilmente sotto “Elementi” ma lo schema chiama “Strumenti SEO” il suo genitore, un sistema riceve due gerarchie in competizione. Questa incoerenza è peggiore dell’omettere lo schema perché rende le relazioni tra entità del sito meno affidabili.

Segui le regole di scrittura degli elementi quando scegli questo componente. La loro regola di precedenza si applica qui: se lo scopo di un passaggio è comunicare la gerarchia e la navigazione verso l’alto, usa l’elemento breadcrumb tipizzato. Non imitarlo con testo libero, un sottotitolo separato da barre o parole chiave collegate.

Quando usarlo

Usa i breadcrumb quando una pagina appartiene a una gerarchia stabile con almeno un genitore significativo oltre la home page. Grandi siti editoriali, cataloghi e-commerce, librerie di documentazione, strutture per aree di servizio, directory e siti di prodotto multilivello ne traggono maggior beneficio perché i visitatori entrano comunemente al di sotto del livello superiore.

Usali coerentemente in tutta una sezione. Un percorso che appare solo su alcune pagine prodotto fa sì che i lettori si chiedano se le pagine mancanti appartengano altrove, e rende l’interpretazione automatizzata dipendente da accidenti del template. Il modello di contenuto o il percorso dovrebbero fornire la gerarchia; gli autori non dovrebbero ricostruirla indipendentemente su ogni pagina.

Non usare i breadcrumb quando non c’è una gerarchia da esprimere. Una pagina pubblicitaria singola, un sito poco profondo dove ogni pagina è direttamente sotto Home, o uno stato applicativo temporaneo potrebbero non trarre alcun percorso utile. Aggiungere “Home › Pagina corrente” a ogni pagina poco profonda può creare rumore visivo senza rivelare nuovo contesto.

Gli errori comuni includono:

• Un percorso di cronologia del browser. “Ricerca › Prodotto › Carrello” registra una sessione, non una gerarchia di contenuti. Visitatori diversi riceverebbero genitori diversi per la stessa pagina, quindi la relazione non è canonica.
• Un percorso di parole chiave. “Miglior CRM › CRM Economico › CRM per Startup” può posizionare frasi target in vista, ma inventa antenati che potrebbero non esistere come pagine navigabili. Le etichette dei breadcrumb nominano nodi reali; non sono un tag title aggiuntivo.
• Un percorso di filtri. “Scarpe › Blu › Taglia 9” descrive facet selezionati. Appartiene ai controlli di filtro a meno che ogni passaggio non sia una pagina di destinazione stabile, indicizzabile con una relazione genitore intenzionale.
• Un indicatore di progresso. “Dettagli › Pagamento › Conferma” comunica passaggi in una transazione. Necessita di semantica da stepper e stato, non di markup BreadcrumbList.
• Un indice dei contenuti. I link di sezione si muovono all’interno del documento corrente; i breadcrumb si muovono tra documenti nella gerarchia del sito.
• Una catena di tag. I tag descrivono relazioni molti-a-molti, mentre i breadcrumb richiedono un percorso primario ordinato. Una pagina può avere diversi tag ma non dovrebbe esporre diversi genitori in competizione in un unico percorso.

Quando una pagina appare legittimamente in più raccolte, scegli una gerarchia canonica primaria per il breadcrumb. Preserva altri percorsi di scoperta attraverso link contestuali o pagine di raccolta. Percorsi breadcrumb multipli costringono il lettore e il consumatore dello schema a decidere quale genitore sia autorevole.

Dove posizionarlo

L’orientamento funziona solo quando arriva prima che la pagina richieda interpretazione, quindi posiziona il percorso dopo l’intestazione globale del sito e prima dell’H1 o del contenuto hero della pagina. Dovrebbe essere la prima regione di navigazione specifica della pagina. Mantieni la stessa posizione nei layout desktop e mobile anche se il percorso si impagina diversamente.

Non posizionare i breadcrumb accanto a un indice dei contenuti, a una barra degli strumenti condivisa, a chip di categoria, a controlli dell’account o a un badge promozionale. Questi elementi rispondono a domande diverse e fanno sembrare la stretta linea di orientamento una barra degli strumenti generica. Non inserire un annuncio pubblicitario o un invito all’azione inline tra il percorso e l’H1. Se l’hero contiene entrambi, impila il breadcrumb sopra il titolo e separa i contenuti promozionali sotto il testo introduttivo.

Anatomia

1. Punto di riferimento di navigazione: un <nav> con il nome accessibile “Breadcrumb” distingue questo percorso dalla navigazione globale e locale.
2. Elenco ordinato: l’ordine porta significato dall’antenato più ampio alla pagina corrente, quindi <ol> è obbligatorio anche se i marcatori di elenco sono visivamente rimossi.
3. Elementi antenato: ogni antenato usa la sua etichetta leggibile canonica e un link scansionabile alla pagina genitore reale.
4. Separatore: un chevron o una barra separa visivamente gli elementi. È decorativo e nascosto alla tecnologia assistiva.
5. Elemento corrente: l’elemento finale nomina la pagina corrente, non ha link e usa aria-current="page".
6. Relazione del documento: il percorso si trova sopra l’H1. Lo screenshot etichetta questa posizione, ma il posizionamento è controllato dal template piuttosto che dal testo scritto dall’autore.

Esempi di design

Le varianti cambiano densità e comportamento responsive, mai la gerarchia sottostante.

Predefinito: mostra il percorso completo quando da due a cinque elementi concisi sono adatti. Questa è la variante preferita perché nessun contesto è nascosto.

Percorso lungo: permetti un percorso di sei o sette elementi solo quando ogni livello rappresenta un antenato navigabile genuino. Vai a capo ai confini degli elementi; non ridurre mai il testo fino a renderlo difficile da leggere.

Mobile compresso: quando il percorso reale non può andare a capo in modo accettabile, preserva Home, il genitore immediato e la pagina corrente. Un controllo con puntini di sospensione focalizzabile può rivelare gli antenati intermedi nascosti. Il percorso completo deve rimanere nel DOM o diventare disponibile attraverso quel controllo, e i dati strutturati devono conservare ogni elemento reale.

Hero scuro: colori e indicatori di focus si adattano allo sfondo, ma le etichette, l’ordine, il comportamento dei link e il nome accessibile rimangono identici al predefinito.

Parametri

L’elemento è un elenco strutturato perché array paralleli di etichette e URL sono facili da disallineare. L’ordine degli elementi è la gerarchia, e gli stessi elementi alimentano l’HTML visibile e lo schema.

La prima intestazione non ha mappatura in questo elemento. I breadcrumb sono un punto di riferimento di navigazione, non una sezione di contenuto titolata, e posizionare un’intestazione in un elemento creerebbe una falsa gerarchia del documento. L’elemento finale omette url nella fonte scritta per impostazione predefinita; un renderizzatore può usare l’URL canonico della pagina per l’output BreadcrumbList senza trasformare l’elemento corrente visibile in un auto-link.

Due elementi significano un antenato più la pagina corrente. Cinque è il normale limite superiore. Sette è un massimo assoluto perché percorsi più profondi diventano difficili da scansionare e di solito rivelano un problema di IA che dovrebbe essere risolto alla fonte piuttosto che nascosto dallo styling.

Sintassi ed esempi di codice

Il nome canonico del componente è breadcrumbs. Il suo ordine degli elementi deve provenire dai dati di gerarchia revisionati del sito, anche quando gli esempi mostrano valori inline.

Direttiva Markdown portatile

:::breadcrumbs{ariaLabel="Breadcrumb" schema=true collapse=mobile}
::item{label="Home" url="/"}
::item{label="Playbook SEO" url="/seo-playbook/"}
::item{label="Elementi" url="/seo-playbook/elements/"}
::item{label="Breadcrumb" current=true}
:::

Shortcode Hugo

{{< breadcrumbs ariaLabel="Breadcrumb" schema="true" collapse="mobile" >}}
  {{< breadcrumb-item label="Home" url="/" />}}
  {{< breadcrumb-item label="Playbook SEO" url="/seo-playbook/" />}}
  {{< breadcrumb-item label="Elementi" url="/seo-playbook/elements/" />}}
  {{< breadcrumb-item label="Breadcrumb" current="true" />}}
{{< /breadcrumbs >}}

Questo è il contratto dell’adattatore portatile, non un’istruzione per aggiungere un nuovo shortcode a questo repository. Un’implementazione Hugo dovrebbe normalmente derivare gli elementi dall’ascendenza della pagina e dai metadati della sezione in modo che un editore non possa pubblicare un percorso in disaccordo con il routing.

Blocco WordPress

<!-- wp:amicited/breadcrumbs {"ariaLabel":"Breadcrumb","schema":true,"collapse":"mobile"} -->
<!-- wp:amicited/breadcrumb-item {"label":"Home","url":"/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Playbook SEO","url":"/seo-playbook/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Elementi","url":"/seo-playbook/elements/"} /-->
<!-- wp:amicited/breadcrumb-item {"label":"Breadcrumb","current":true} /-->
<!-- /wp:amicited/breadcrumbs -->

WordPress dovrebbe popolare il blocco dalla catena genitore primaria della pagina e dagli URL canonici. Le sostituzioni manuali richiedono una revisione editoriale perché cambiare un’etichetta può altrimenti far sì che navigazione, schema e architettura del sito siano in disaccordo.

Esempi

Buono: una gerarchia reale e navigabile

Home › Documentazione › Audit › Audit di freschezza

Questo è buono quando Documentazione, Audit e Audit di freschezza sono pagine canoniche reali in quell’ordine genitore–figlio. Ogni antenato predice la sua destinazione, e l’etichetta corrente è abbastanza concisa da confermare la posizione senza ripetere l’intero H1.

Cattivo: parole chiave che fingono di essere gerarchia

Home › Miglior Strumento SEO AI › Piattaforma di Visibilità AI Accessibile › Breadcrumb

Questo è cattivo quando le due etichette centrali non sono pagine genitore reali. Il percorso fa promesse che i suoi link non possono mantenere, ripete frasi promozionali invece di nominare sezioni e crea una falsa catena di entità per i crawler. Sostituiscilo con il percorso antenato reale più breve. Se i concetti desiderati meritano pagine, crea e integra prima quelle pagine nell’IA; non anticipare un’architettura immaginaria nei breadcrumb.

Markup dello schema e accessibilità

I breadcrumb possono alimentare BreadcrumbList di Schema.org, un elenco ordinato le cui voci sono oggetti ListItem. Usa valori interi position basati su uno e mantieni name e item allineati con l’etichetta visibile e la destinazione canonica. Genera JSON-LD e HTML da un unico oggetto dati in modo che una ridenominazione, uno spostamento o un cambiamento canonico aggiorni entrambi gli output insieme.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"https://amicited.com/"},
    {"@type":"ListItem","position":2,"name":"Playbook SEO","item":"https://amicited.com/seo-playbook/"},
    {"@type":"ListItem","position":3,"name":"Elementi","item":"https://amicited.com/seo-playbook/elements/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumb","item":"https://amicited.com/seo-playbook/elements/breadcrumbs/"}
  ]
}

Lo schema descrive la gerarchia visibile; non autorizza un secondo percorso ottimizzato. Non includere reindirizzamenti, parametri di tracking, varianti di protocollo o host non canoniche, risultati di ricerca sul sito, stati di sessione o categorie di parole chiave nascoste. Non pubblicare due oggetti BreadcrumbList per due tassonomie possibili. Seleziona il percorso primario nel modello di contenuto e usalo ovunque.

L’accessibilità inizia con <nav aria-label="Breadcrumb"> e un elenco ordinato. L’etichetta accessibile distingue questa regione di navigazione senza richiedere un’intestazione visibile. Nascondi i separatori decorativi con aria-hidden="true" o creali in CSS in modo che i lettori di schermo non annuncino “maggiore di” tra ogni elemento. Contrassegna solo l’elemento finale con aria-current="page" e non collegarlo a sé stesso.

Ogni link antenato necessita di un indicatore di focus visibile e di una destinazione abbastanza grande da essere attivata su un touch screen. I percorsi lunghi devono andare a capo o comprimersi attraverso un controllo operabile da tastiera; lo scorrimento orizzontale che nasconde la posizione corrente non è un comportamento predefinito accettabile. Il troncamento può accorciare un’etichetta visiva solo quando il nome accessibile completo rimane disponibile e il testo accorciato è ancora distinguibile. Non affidarti mai al solo colore per separare gli antenati collegati dall’elemento corrente.

Regole di scrittura

Le etichette dei breadcrumb sono nomi di posizione, quindi scrivile come navigazione piuttosto che come mini-titoli. Usa il nome ufficiale più breve e inequivocabile di ogni sezione o pagina. “Documentazione” funziona meglio di “Esplora tutta la documentazione del prodotto,” perché la destinazione fornisce il contesto e il percorso deve rimanere scansionabile.

• Usa da una a sei parole e non più di 60 caratteri per etichetta. Le etichette corte rendono la gerarchia visibile prima dell’andata a capo; non sono un permesso per abbreviare termini non familiari.
• Usa normalmente da due a cinque elementi, inclusa la pagina corrente. Permetti sei o sette solo quando ogni livello è strutturalmente necessario.
• Ordina gli elementi dall’antenato più ampio alla pagina corrente. Non invertire mai il percorso né posizionare un fratello nella sequenza.
• Usa la lettera minuscola per le parole comuni (sentence case) a meno che un marchio, un prodotto o un acronimo non abbia un’ortografia approvata.
• Mantieni le etichette stabili tra le pagine. Lo stesso genitore non può essere “Documenti” in un percorso e “Documentazione” in un altro, a meno che il sistema di navigazione non cambi globalmente.
• Fai sì che le etichette degli antenati corrispondano o riflettano fedelmente il nome visibile della destinazione. Un’etichetta di navigazione concisa è accettabile; un diverso target di parole chiave no.
• Nomina la pagina corrente in modo conciso. Può accorciare un H1 lungo, ma deve comunque identificare lo stesso documento.
• Usa un tono neutro. I breadcrumb orientano; non vendono, congratulano, avvertono o istruiscono.

Non mettere mai inviti all’azione, prezzi, stato del magazzino, date, nomi di autori, punteggi di recensione, emoji, icone con significato indipendente, affermazioni promozionali, codici di tracking o parametri di query all’interno di un’etichetta breadcrumb. Non aggiungere mai “Indietro,” “Precedente” o “Successivo” come elemento perché quei controlli esprimono cronologia o sequenza piuttosto che ascendenza. I separatori sono elementi di presentazione gestiti dal renderizzatore e non fanno parte di alcuna etichetta.

Tipi di post che lo utilizzano

Il frontmatter postTypes registra le combinazioni supportate. La tabella converte queste combinazioni in regole di utilizzo e posizionamento; non è un’affermazione che ogni istanza necessiti di un percorso scritto manualmente.

“Di solito” significa usa l’elemento quando il sito ha il genitore stabile nominato, e omettilo su un’implementazione realmente superficiale piuttosto che inventare un livello extra. “Sempre” presuppone che esista la struttura annidata dichiarata. I template dovrebbero gestire il rendering; il tipo di post definisce la fonte della gerarchia prevista e le eccezioni editoriali.

Checklist QA

• Gerarchia reale: Ogni antenato è un genitore reale e intenzionale nell’IA primaria del sito, non una parola chiave, un tag, un filtro o una visita precedente.
• Posizione corretta: Il percorso appare dopo l’intestazione globale e prima dell’H1, senza promozioni o barre degli strumenti non correlate inserite tra di essi.
• Un percorso: La pagina espone un breadcrumb visibile e un BreadcrumbList corrispondente, non percorsi concorrenti.
• Ordine completo: Gli elementi vanno dall’antenato più ampio alla pagina corrente, senza livelli strutturali mancanti o fratelli aggiunti.
• Link canonici: Ogni antenato risolve direttamente al suo URL canonico e indicizzabile senza parametri di tracking o reindirizzamenti evitabili.
• Stato corrente: L’ultimo elemento visibile nomina la pagina corrente, non è collegato e ha aria-current="page".
• Etichette concise: Ogni etichetta usa il nome ufficiale più breve e inequivocabile, segue la sentence case e rimane entro il limite editoriale.
• HTML semantico: Il componente usa un punto di riferimento di navigazione etichettato e un elenco ordinato; non è una riga di span generici.
• Separatori decorativi: I separatori sono nascosti alla tecnologia assistiva e non appaiono all’interno dei nomi di link accessibili.
• Comportamento responsive: La posizione corrente rimane disponibile su schermi stretti; andata a capo, disclosure, ordine di focus e target touch funzionano senza contenuti orizzontali nascosti.
• Parità dello schema: Nomi, URL canonici, ordine, conteggio elementi e posizioni di BreadcrumbList corrispondono alla gerarchia visibile completa nella sostanza.
• Fonte dati unica: HTML e JSON-LD sono generati dalla stessa gerarchia revisionata piuttosto che mantenuti come copie separate.
• Parità portatile: Le rappresentazioni Markdown, Hugo e WordPress preservano ordine degli elementi, etichette, destinazioni e stato corrente identici.
• Stato degli screenshot: I commenti di acquisizione rimangono istruzioni non renderizzate fino a quando non esistono asset reali; nessuno screenshot inesistente viene referenziato come immagine.

FAQ

Il template dell’accademia renderizza le cinque domande revisionate memorizzate nel frontmatter. Coprono i percorsi URL, l’elemento corrente, i dati strutturati, le pagine di filtro instabili e i limiti pratici di profondità.