Che cosa sono i breadcrumb
I breadcrumb, detti anche “briciole di pane”, sono un elemento di navigazione che mostra il percorso della pagina corrente all’interno della gerarchia del sito. Aiutano l’utente a capire dove si trova e a tornare rapidamente a livelli superiori. Per i motori di ricerca, offrono un sistema chiaro di collegamenti interni che comunica relazioni tra categorie, sottocategorie e contenuti.
Un percorso tipico può apparire così: Home › Categoria › Sottocategoria › Pagina. Ogni tappa, tranne l’ultima, è un link. La pagina corrente è un testo non cliccabile, per non creare confusione. Nei risultati di ricerca, Google può sostituire l’URL con una rappresentazione del percorso, migliorando la leggibilità del risultato.
Perché i breadcrumb contano per UX e SEO
I breadcrumb orientano l’utente, riducono il numero di clic per salire di livello, chiariscono la struttura informativa. Allo stesso tempo supportano la SEO: aggiungono collegamenti interni coerenti, distribuiscono PageRank in modo ordinato e aiutano gli spider a comprendere i rapporti tra le sezioni. Quando progettati con cura, migliorano metrica di soddisfazione e tassi di interazione.
La presenza dei breadcrumb non risolve da sola problemi di architettura o di contenuti. È un tassello di un sistema più ampio che include menu, link contestuali, filtri e una buona nomenclatura. Se il percorso è ambiguo, il breadcrumb diventa meno utile. Ecco perché conviene definirlo insieme alla mappa del sito, alle categorie e ai pattern di interlinking.
Tipologie principali di breadcrumb
Gerarchico. Mostra i livelli dall’homepage al contenuto. È la forma più comune per siti editoriali ed eCommerce. Si basa sulla struttura fisica o logica dell’informazione e non sulla cronologia di navigazione. È il modello preferito per comunicare contesto e parentela tra le sezioni.
Basato su attributi. In progetti con faceted navigation, il percorso può includere filtri, per esempio Marca, Colore, Taglia. In molti casi però conviene mantenere il breadcrumb ancorato alla gerarchia e mostrare i filtri altrove, per non creare percorsi lunghi o instabili. Se i filtri entrano nel percorso, occorre coerenza e regole chiare.
“Path” o cronologico. Riproduce i passaggi effettivi dell’utente. È meno adatto alla SEO perché varia da visita a visita. Può essere utile in applicazioni web complesse, ma non sostituisce il breadcrumb gerarchico, che rimane la scelta più leggibile per i siti pubblici.
Progettazione: chiarezza, consistenza, riconoscibilità
Il breadcrumb deve essere semplice da scansionare a colpo d’occhio. Posizionalo in alto, vicino al titolo o subito sotto l’header. Usa uno stile coerente con il design del sito. Evita elementi che distraono e mantieni l’ultimo elemento come testo, non come link. In questo modo comunichi che la pagina corrente è il punto di arrivo.
Scegli etichette brevi. Evita ridondanze come ripetere il titolo della pagina in forma estesa. Se la gerarchia è profonda, valuta la riduzione dei passaggi con ellissi. Assicurati però che le scorciatoie non nascondano nodi importanti per l’orientamento.
Semantica HTML e accessibilità
Usa il tag <nav> con aria-label="breadcrumb" per indicare che si tratta di una navigazione. All’interno puoi usare un elenco ordinato o non ordinato, con link per gli antenati e testo semplice per la pagina corrente. Mantieni il contrasto tra link e testo, cura il focus visibile e la navigazione da tastiera.
Gli screen reader interpretano meglio percorsi con relazioni logiche chiare. Se usi separatori grafici, fornisci alternative testuali o attributes aria dove ha senso. Riduci il carico cognitivo con nomi corti, evita frasi prolisse. La chiarezza aiuta tutti gli utenti, non solo chi usa tecnologie assistive.
Dati strutturati: schema.org BreadcrumbList
Per aiutare i motori di ricerca, aggiungi il markup dei breadcrumb con schema.org/BreadcrumbList. Il formato più pratico è JSON-LD, inserito nella sezione head o nel body. Ogni tappa è un ListItem con posizione, nome e URL. Se coerente con il contenuto, Google può usare queste informazioni per mostrare il percorso in SERP.
Mantieni il markup allineato al percorso visibile. Se il codice dice una cosa e l’interfaccia ne mostra un’altra, il motore può ignorare il dato o scegliere un percorso alternativo. Aggiorna il markup quando cambi la struttura o i nomi delle categorie.
Esempio HTML di breadcrumb semantico
<nav aria-label="breadcrumb" class="nospacetag">
<ol class="nospacetag">
<li class="nospacetag"><a href="/" class="nospacetag">Home</a></li>
<li class="nospacetag"><a href="/categoria/" class="nospacetag">Categoria</a></li>
<li class="nospacetag"><a href="/categoria/sottocategoria/" class="nospacetag">Sottocategoria</a></li>
<li aria-current="page" class="nospacetag">Pagina corrente</li>
</ol>
</nav>La pagina corrente non è un link. Usa aria-current="page" per comunicarlo in modo esplicito. Il contenitore nav rende l’area riconoscibile per browser e tecnologie assistive.
Esempio JSON-LD per breadcrumb
<script type="application/ld+json" class="nospacetag">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.esempio.it/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Categoria",
"item": "https://www.esempio.it/categoria/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Sottocategoria",
"item": "https://www.esempio.it/categoria/sottocategoria/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Pagina corrente"
}
]
}
</script>L’ultimo elemento non ha l’attributo item. Indica la posizione della pagina e il nome mostrato nel percorso. Le posizioni devono essere intere e in ordine crescente.
Coerenza tra percorso visibile e markup
Il percorso mostrato all’utente e quello dichiarato nel JSON-LD devono coincidere. In caso di differenze, come nomi abbreviati a schermo e nomi lunghi nel markup, scegli una regola unica. Uniformità di nomi e posizioni rende la segnalazione affidabile per i motori e comprensibile per l’utente.
Se cambi i nomi delle categorie, aggiorna sia l’interfaccia, sia il JSON-LD, sia i link interni. Controlla anche le traduzioni nelle versioni multilingua. La coerenza evita ambiguità e revisioni ripetute.
Breadcrumb e architettura dell’informazione
Un buon breadcrumb riflette un’architettura chiara. Prima di scrivere il codice, allinea la gerarchia con il piano delle categorie, con gli obiettivi di posizionamento e con la navigazione principale. Evita alberi troppo profondi. Preferisci strutture coerenti e nomi che parlano il linguaggio degli utenti.
Il breadcrumb non è un menu alternativo, è un orientatore. Se l’utente usa sempre il breadcrumb per muoversi, forse la navigazione principale non è efficace. In questo caso serve una revisione dell’IA o una migliore segmentazione delle categorie.
E-commerce: categorie, sottocategorie, filtri
Negli eCommerce, i breadcrumb comunicano posizione nel catalogo. Per le schede prodotto, il percorso dovrebbe puntare alla categoria principale. Se un prodotto vive in più categorie, scegli la più rilevante per l’utente e per la ricerca. Evita di includere parametri di filtro nell’URL del breadcrumb. I filtri cambiano spesso, la gerarchia molto meno.
Per le pagine di listing con faceted navigation, valuta se i filtri più cercati meritano pagine dedicate con contenuti unici. In quel caso il breadcrumb può mostrare un livello editoriale con un nome stabile. Evita strade troppo granulari che invecchiano in fretta.
Multilingua e multi paese
Se il sito ha versioni in lingue diverse, mantieni lo stesso numero di livelli quando possibile. Le traduzioni devono essere naturali per i mercati locali, ma coerenti con la struttura. Abbina hreflang tra pagine equivalenti e verifica che i breadcrumb riflettano lo stesso percorso nella lingua target, senza mescolare idiomi o etichette.
Nei domini multipli, adotta un modello comune di etichette e posizioni. Evita deviazioni che generano percorsi incompatibili. La standardizzazione semplifica il lavoro dei team editoriali e riduce errori di markup.
Single Page Application e rendering
Nelle SPA occorre gestire il breadcrumb con stato dell’applicazione e routing. Il percorso deve aggiornarsi quando cambia la vista, anche senza ricaricare la pagina. Se usi rendering lato server, genera il breadcrumb già pronto all’atto del caricamento. In hydratation, mantieni l’HTML coerente per evitare salti visivi.
Per il markup strutturato, valuta JSON-LD generato lato server o inserito in modo stabile all’avvio. Evita di rigenerare il blocco a ogni micro interazione. Un flusso prevedibile facilita la scansione.
Prestazioni e mobile
Un breadcrumb è leggero per sua natura. Mantieni CSS e JavaScript essenziali. Riduci icone e componenti grafici. Evita librerie pesanti per un semplice separatore. Limita font aggiuntivi e gestisci il ridimensionamento su piccoli schermi con regole CSS semplici, per esempio overflow nascosto sull’inizio del percorso e favore per gli ultimi livelli.
Su mobile, posiziona il breadcrumb in alto, ma sotto eventuali banner persistenti. Evita di occupare troppe righe. Abbrevia nomi lunghi, usa ellissi e tooltip dove serve. Lascia spazio di tocco adeguato tra i link.
Come i breadcrumb influenzano la SERP
Google può mostrare il percorso al posto dell’URL. Il risultato appare più leggibile e genera fiducia. Il markup schema.org non garantisce la visualizzazione, ma aumenta le possibilità. La coerenza tra percorso a schermo e JSON-LD aiuta i sistemi a scegliere una rappresentazione stabile.
In siti con molte sezioni, la presenza di breadcrumb e di un buon linking interno supporta la generazione di sitelink e una migliore comprensione dei ruoli delle pagine. Nel tempo, un percorso chiaro aiuta a consolidare segnali e a ridurre confusione nell’indice.
Tracciamento e misurazione
Traccia i clic sul breadcrumb con eventi analytics. Crea una dimensione personalizzata per il percorso e valuta quali livelli ricevono più interazioni. Confronta tassi di rimbalzo della stessa pagina con e senza interazione sul breadcrumb. Questi dati indicano se il percorso aiuta le persone a risalire nei livelli o se serve un lavoro sui nomi e sulle destinazioni.
In eCommerce, osserva se gli utenti che usano il breadcrumb visualizzano più prodotti, aggiungono al carrello o concludono ordini. La metrica non è deterministica, ma orienta decisioni di design e contenuto.
Link interni, sitemap, canonical
Il breadcrumb lavora insieme a link contestuali, sitemap XML e rel=canonical. Per ogni pagina esiste un percorso di riferimento. La sitemap elenca le destinazioni pubbliche, i link interni rafforzano i rapporti tra nodi, la canonical aiuta a gestire varianti. Se tutti i segnali raccontano la stessa storia, i motori capiscono più in fretta il ruolo di ciascuna pagina.
Durante migrazioni o refactoring, valida che il percorso non cambi forma senza motivo. Evita di spezzare livelli intermedi. Se rinomini le categorie, aggiorna link, breadcrumb e dati strutturati nello stesso rilascio.
Errori comuni da evitare
- Ultimo elemento cliccabile. La pagina corrente deve essere testo, non link, per non creare cicli.
- Percorso incoerente con la gerarchia reale. Se l’albero è diverso dal percorso mostrato, l’utente si disorienta.
- JSON-LD non allineato al percorso visibile. Differenze di nomi o di posizioni riducono l’affidabilità del markup.
- Parametri di filtro nel breadcrumb. Il percorso diventa instabile e invecchia in fretta.
- Percorsi troppo lunghi su mobile. Tagli non prevedibili e testi illeggibili peggiorano l’esperienza.
- Separatore come immagine pesante. Usa CSS o glifi leggeri, non asset inutili.
- Mancanza di aria-label e focus visibile. Accessibilità compromessa e navigazione da tastiera difficoltosa.
- Nomi generici. Etichette vaghe come “Altro” non comunicano il contesto.
Checklist operativa rapida
- Percorso gerarchico chiaro, ultimo elemento non cliccabile.
- JSON-LD schema.org allineato al percorso a schermo.
- Etichette brevi, coerenti con la navigazione principale.
- CSS leggero, separatore semplice, ottimizzazione mobile.
- Eventi analytics per misurare clic e percorso.
- Aggiornamento sincrono di interfaccia, link interni e markup.
Procedura di audit
Parti dalla mappa del sito. Verifica che il breadcrumb rifletta l’albero. Con un crawler, raccogli i percorsi delle pagine e individua incoerenze. Confronta i percorsi con la sitemap XML. Se la pagina appartiene a più sezioni, definisci una categoria principale per la scheda prodotto e usa quella nel percorso. In ambiente di staging, testa il JSON-LD e controlla la validità con strumenti di test dei risultati multimediali.
Dopo il rilascio, osserva come Google mostra le briciole nei risultati. Se la rappresentazione non è stabile, controlla se esistono differenze di nomi, se la canonical punta alla pagina giusta o se il percorso non è coerente tra versioni mobile e desktop. Correggi e ripeti le verifiche.
Esempi di separatori e microcopy
Il separatore più riconoscibile è l’angolo o la freccia. Evita elementi grafici eccessivi. Assicurati che il contrasto sia adeguato. Per la microcopy, evita ridondanza e formule vaghe. Usa sostantivi chiari e mantieni coerenza tra breadcrumb, titolo e link interno nella pagina.
Se la gerarchia è profonda, valuta un taglio controllato con ellissi. Mostra sempre gli ultimi livelli, quelli più utili per la risalita. In cataloghi ampi, considera trasformazioni dinamiche che accorciano il percorso su schermi stretti.
Integrazione con CMS e framework
Su WordPress, molte soluzioni generano breadcrumb lato tema o con plugin. Verifica che il markup sia pulito e che il JSON-LD sia coerente. In Headless CMS, genera il percorso lato server e inserisci JSON-LD nella risposta. In framework moderni, evita di rigenerare il markup a ogni micro interazione, punta a un aggiornamento dello stato che non costi in performance.
Se usi builder o componenti visivi, controlla che il percorso non venga duplicato in regioni diverse della pagina. Dupliche generano confusione e incrementano il codice. Mantenere un solo breadcrumb per pagina aiuta la chiarezza.
Governance, versioning e QA
Definisci una regola di naming e un glossario interno per le etichette. Conserva la storia delle modifiche per evitare regressioni dopo i deploy. Usa checklist per PR e rilasci. Se lavori su più lingue, individua una fonte unica per i nomi. In ambienti distribuiti, tratta i breadcrumb come un componente condiviso, con versione e dipendenze chiare.
Inserisci test automatici su percorsi di pagine critiche. Confronta il JSON-LD generato con quello atteso. Se cambiano le posizioni o i nomi, fallisci il test e correggi prima di andare online.
Link esterni e letture di supporto
Per approfondire: Breadcrumb structured data, Schema.org BreadcrumbList, MDN: <nav> element, Guida alla visualizzazione del percorso.
Domande frequenti sui breadcrumb
Devo mostrare il breadcrumb su tutte le pagine?
È consigliabile sulla maggior parte delle pagine. Su landing molto isolate puoi ometterlo, purché l’utente non perda orientamento. Valuta il contesto prima di decidere.
Meglio un breadcrumb con filtri o solo gerarchico?
Per la SEO è preferibile il modello gerarchico. I filtri possono stare altrove. Se entrano nel percorso, definisci regole stabili e non legare il breadcrumb a parametri volatili.
Il JSON-LD dei breadcrumb è obbligatorio?
Non è obbligatorio, ma utile. Aumenta le possibilità di vedere il percorso in SERP e chiarisce le relazioni. Va mantenuto coerente con ciò che l’utente vede.
L’ultimo elemento va linkato?
Meglio di no. L’ultimo elemento rappresenta la pagina corrente. Lasciarlo come testo evita loop e riduce confusione.
Posso mostrare percorsi diversi nella stessa pagina?
Sconsigliato. Un solo breadcrumb per pagina. Più percorsi creano ambiguità e complicano il markup strutturato.
Come gestire breadcrumb in prodotti presenti in più categorie?
Scegli una categoria principale e usa quella nel percorso della scheda. Comunica gli altri collegamenti nel corpo o tramite blocchi “correlati”.
Serve una sitemap per i breadcrumb?
La sitemap non è il breadcrumb, ma deve allinearsi alla stessa logica. Elenca URL stabili e pubbliche, in coerenza con la gerarchia mostrata.
Quale separatore è preferibile?
Usa glifi leggeri o CSS. Evita immagini pesanti. Mantieni un contrasto adeguato e spazio sufficiente tra gli elementi cliccabili.
Come verifico che Google legga il breadcrumb?
Controlla con gli strumenti di test dei risultati multimediali e osserva la SERP. Se la visualizzazione è incoerente, rivedi markup e percorso visibile.
Che impatto hanno i breadcrumb sulle prestazioni?
Se il codice è leggero, l’impatto è minimo. Evita librerie superflue, icone pesanti e logiche JS complesse. Il componente deve essere semplice e veloce.
Breadcrumb chiari, coerenti e misurabili
I breadcrumb funzionano quando riflettono una struttura solida, usano nomi chiari e restano leggeri. Con un markup pulito e dati strutturati coerenti, migliorano l’esperienza e aiutano i sistemi a capire come è organizzato il sito. Misura, affina, e mantieni le etichette allineate alla ricerca degli utenti: il percorso diventa uno strumento affidabile per orientare persone e motori.
