La breadcrumb è la riga di link che mostra in che punto della gerarchia di un sito si trova la pagina che stai leggendo, e permette di risalirla un livello alla volta.
La cosa da sapere prima di metterci mano è che la riga visibile e il markup BreadcrumbList che legge Google sono due oggetti distinti, con regole che non coincidono. Sul campione globale dell'HTTP Archive, il Web Almanac 2024 ha trovato un BreadcrumbList in JSON-LD sul 5,66% delle pagine: una su diciotto.
Come è fatta una breadcrumb
Tre pezzi: le pagine superiori, ciascuna con il proprio link; i separatori, che non sono cliccabili; la pagina corrente, che chiude la riga senza essere un link. Il design system di Designers Italia, riferimento per i siti della pubblica amministrazione, la colloca in alto a sinistra dopo header e navigazione e prima del titolo di pagina, e chiede che i titoli nella breadcrumb corrispondano a quelli delle pagine a cui puntano.
Come separatore il Nielsen Norman Group consiglia il segno «>», precisando però che tra «>» e «/» non esiste differenza funzionale. È una convenzione, non una regola.
La riga che vedi e il markup che legge Google non seguono le stesse regole
Qui si concentrano quasi tutti gli errori di implementazione. Le linee guida di usabilità parlano dell'elemento a schermo, la documentazione di Google parla dei dati strutturati, e chi legge una fonte sola finisce per applicare la regola giusta all'oggetto sbagliato.
| Elemento | Nella breadcrumb visibile | Nel markup BreadcrumbList |
|---|---|---|
| Link alla home | La traccia parte dalla home, ma se il link Home è già nella navigazione globale ne basta uno dei due (NN/g) | Non è necessario un ListItem per il dominio o il nome host del sito (Google) |
| Pagina corrente | Presente, mai cliccabile: un link che non porta da nessuna parte è un errore di usabilità | Facoltativa. Se la includi puoi omettere item: Google usa l'URL della pagina che contiene il markup |
| Numero minimo di voci | Ha senso da tre livelli di profondità in su | Almeno due ListItem, altrimenti la BreadcrumbList non è valida |
| Percorsi multipli | Uno solo: due tracce parallele occupano spazio e confondono | Ammessi: più oggetti BreadcrumbList sulla stessa pagina |
| Voci senza una pagina dietro | Escluse: ogni voce deve essere un posto dove l'utente può andare | Escluse: item richiede un URL |
| Ordine | Dal livello più alto al più basso | position parte da 1 e prosegue senza salti |
Il caso dei percorsi multipli è il più netto. Google ammette più oggetti BreadcrumbList sulla stessa pagina quando a quella pagina si arriva da strade diverse, e sceglie quale mostrare in base alla query. Il Nielsen Norman Group sconsiglia di mostrarne due all'utente e chiede di designare un percorso canonico. Le due indicazioni convivono: nel markup dichiari entrambi i percorsi, a schermo ne mostri uno.
I tre tipi di breadcrumb, e quale regge
| Tipo | Esempio | Quando regge |
|---|---|---|
| Gerarchica (o di posizione) | Home > Scarpe > Trekking > Modello | Sempre, se il sito ha una gerarchia vera. È l'unica che comunica la struttura del sito anche a chi la scansiona |
| Per attributi | Home > Scarpe > Donna > 39 | Sui cataloghi filtrabili, a condizione di avere una categoria primaria unica per prodotto. Senza quella, lo stesso prodotto genera tracce diverse a seconda del filtro |
| Cronologica | Home > Articolo 1 > Articolo 2 | Mai. Duplica il pulsante Indietro del browser e cambia a ogni sessione, quindi non è dichiarabile nel markup |
Sul terzo tipo il Nielsen Norman Group è esplicito da vent'anni: la breadcrumb mostra la gerarchia del sito, non la cronologia della sessione. Una traccia cronologica è inutile proprio nel caso in cui la breadcrumb vale di più, cioè quando qualcuno atterra su una pagina profonda da un link esterno e non ha mai visto la home.
Dal 23 gennaio 2025 la breadcrumb non compare più nei risultati mobile
Quel giorno Caitlin Dorsey, product manager della Ricerca Google, ha annunciato sul blog di Google Search Central che l'URL visibile nei risultati mobile si riduce al solo dominio. La motivazione: l'elemento breadcrumb «non è molto utile per le persone che effettuano ricerche su dispositivi mobili, in quanto viene tagliato su schermi più piccoli». La modifica vale per tutte le lingue e le regioni in cui la Ricerca è disponibile.
Su desktop non è cambiato niente: l'URL visibile resta composto da dominio e breadcrumb. La documentazione ha recepito la modifica e alla voce disponibilità della funzionalità oggi indica il solo computer. Il markup continua a essere supportato, il report sui risultati avanzati con breadcrumb in Search Console resta attivo, il Test dei risultati avanzati continua a validarlo. Google lo scrive senza giri di parole: chi usa il markup non deve fare nulla.
Quello che si è perso è una porzione di snippet su mobile, e con essa il contesto che quella riga dava a chi valutava il risultato prima di cliccare. I link interni, il segnale sulla gerarchia e l'orientamento dentro la pagina sono rimasti dov'erano.
Il markup BreadcrumbList, proprietà per proprietà
Il formato che Google documenta per primo è JSON-LD, e va servito nell'HTML iniziale: se lo genera il client dopo il caricamento, i crawler che non eseguono JavaScript non lo vedono. La struttura richiede un BreadcrumbList con almeno due ListItem, e ogni ListItem vuole tre proprietà.
position: numero intero. La posizione 1 indica l'inizio della traccia.name: il titolo del livello, quello che l'utente legge.item: l'URL della pagina, in forma assoluta. Sull'ultimo elemento si può omettere, e in quel caso Google usa l'URL della pagina che contiene il markup.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Blog",
"item": "https://www.esempio.it/blog/"
},{
"@type": "ListItem",
"position": 2,
"name": "SEO tecnica",
"item": "https://www.esempio.it/blog/seo-tecnica/"
},{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb"
}]
}
</script>Due indicazioni della documentazione che quasi nessuno applica. La prima: i breadcrumb dovrebbero rappresentare «un percorso utente tipico di una pagina, anziché riprodurre la struttura dell'URL». Conta sugli e-commerce, dove l'URL porta spesso livelli e parametri che a un utente non dicono niente. La seconda: non serve un ListItem né per il dominio né per la pagina stessa, il che rende il markup più corto della riga che stai mostrando a schermo.
Quando la breadcrumb non serve
Designers Italia la prevede quando un sito «presenta molti contenuti, organizzati su più di due livelli gerarchici, e gli utenti hanno bisogno di spostarsi velocemente tra i vari livelli». Sotto quella soglia è decorazione. Il Nielsen Norman Group arriva alla stessa conclusione: su gerarchie piatte di uno o due livelli, o su siti a struttura lineare, non è uno strumento di orientamento.
Altri due usi da evitare, entrambi segnalati da Designers Italia: sostituire il menu di navigazione principale, e indicare il progresso in un flusso transazionale come la richiesta di un servizio o un pagamento. Per il secondo esiste un componente dedicato, il progress indicator.
C'è poi una regola che il Nielsen Norman Group mette nero su bianco e che negli audit viene violata di continuo: nella breadcrumb vanno solo pagine che esistono. Se nel menu hai un'etichetta di raggruppamento senza una pagina dietro, nella traccia non ci va. Il markup chiede un URL per item, e a schermo un elemento che sembra cliccabile ma non lo è crea più confusione del livello mancante.
Accessibilità: tre attributi e nient'altro
Il pattern del W3C nelle ARIA Authoring Practices chiede poco: la traccia sta dentro un landmark di navigazione, il landmark viene etichettato con aria-label o aria-labelledby, il link alla pagina corrente porta aria-current="page". Se l'ultima voce non è un link, aria-current diventa facoltativo.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/seo-tecnica/">SEO tecnica</a></li>
<li><a href="/blog/breadcrumbs/" aria-current="page">Breadcrumb</a></li>
</ol>
</nav>Sulla navigazione da tastiera Designers Italia specifica il comportamento atteso: si scorre con Tab e Shift-Tab, si apre la pagina con Invio, i separatori restano fuori dal giro del focus perché non sono interattivi.
Come si attivano su WordPress e come si verificano
I plugin SEO più diffusi le generano già, con il JSON-LD annesso. In Yoast SEO stanno sotto Aspetto nella ricerca, voce Breadcrumb, dove si impostano separatore, gerarchia delle tassonomie e testo della home; Rank Math e SEOPress hanno l'equivalente. Su un tema che non le supporta nativamente va aggiunta la chiamata alla funzione nel template, sopra il titolo. Su altri CMS senza plugin dedicato si scrive a mano.
La verifica è in tre passaggi, e vale la pena farli tutti e tre perché controllano cose diverse. Il Test dei risultati avanzati di Google dice se il markup è idoneo ai rich result. Lo Schema Markup Validator su validator.schema.org controlla la correttezza sintattica rispetto al vocabolario di schema.org, anche per le proprietà che Google ignora. Il report Breadcrumb in Search Console mostra errori e avvisi su tutte le URL del sito, non su una sola pagina, ed è l'unico dei tre che fa emergere i template rotti.
Un controllo che nessuno dei tre strumenti fa: rileggere la riga a schermo e confrontarla con il JSON-LD. Se la traccia visibile dice una cosa e il markup un'altra, il segnale che arriva a Google è contraddittorio, e nessun validatore lo segnala perché entrambe le versioni, prese da sole, sono formalmente corrette.
Se la breadcrumb è difficile da scrivere, il problema è l'architettura
La breadcrumb è l'unico elemento di link interno che si genera da solo a partire dalla struttura del sito: mille schede prodotto su venti categorie producono mille link verso le categorie senza che nessuno li scriva. Ed è esattamente per questo che funziona come strumento diagnostico.
Quando per una pagina non riesci a scrivere la traccia senza inventare un livello che non ha una pagina dietro, o quando la stessa pagina sta con pari dignità in tre percorsi diversi, il difetto non è nella breadcrumb. È nella gerarchia, e si riverbera sulle SERP in modi meno visibili. Nei nostri progetti SEO la prima cosa che guardiamo su un sito grande non è se le breadcrumb ci sono, ma se si riescono a scrivere senza forzature: dove non si riescono, quasi sempre c'è un problema di categorie che nessun intervento on-page risolve.
Domande frequenti sulle breadcrumb
Sì. Dal 23 gennaio 2025 Google non mostra più il percorso nei risultati di ricerca mobile, ma continua a supportare il markup per i risultati desktop e il report sui risultati avanzati con breadcrumb in Search Console resta attivo. Il valore principale delle breadcrumb, cioè i link interni verso le pagine di categoria e il segnale sulla gerarchia del sito, non passa comunque dallo snippet.
A schermo il Nielsen Norman Group consiglia di far partire la traccia dalla home, ma sconsiglia di duplicare il link Home sia nella navigazione globale sia nella breadcrumb: uno dei due basta. Nel markup BreadcrumbList la documentazione di Google specifica che non è necessario includere un ListItem per il percorso di primo livello, cioè il dominio o il nome host del sito.
No. La pagina corrente si mostra ma non si rende cliccabile, perché un link che ricarica la pagina su cui ti trovi non porta da nessuna parte. Nel markup l'ultimo elemento è facoltativo: se lo includi puoi omettere la proprietà item, e Google usa l'URL della pagina che contiene il markup.
Perché la BreadcrumbList sia valida Google chiede almeno due ListItem. Verso l'alto non esiste un limite formale, ma Designers Italia consiglia il componente sui siti organizzati su più di due livelli gerarchici: su una gerarchia più piatta la traccia non aggiunge orientamento e occupa spazio, soprattutto su mobile dove rischia di andare a capo.
Sono due cose con funzioni diverse. La riga HTML orienta chi legge e genera i link interni anche senza dati strutturati. Il markup BreadcrumbList è quello che rende la pagina idonea alla visualizzazione del percorso nei risultati desktop e che alimenta il report Breadcrumb di Search Console: senza markup quel report resta vuoto anche se la riga a schermo c'è.
