I breadcrumb sono uno di quegli elementi dell’interfaccia che sembrano secondari finché non capisci quanto Google li valuta. Compaiono nella parte superiore delle pagine di prodotto e categoria (Home → Donna → Vestiti → Vestiti estivi) e aiutano gli utenti a capire dove si trovano nella gerarchia del sito. Questo è il vantaggio per l’esperienza utente. Il vantaggio SEO è maggiore: i breadcrumb creano link interni che trasferiscono autorità attraverso il tuo sito, e quando sono contrassegnati con dati strutturati, compaiono direttamente nei risultati di ricerca di Google come snippet ricchi.
Un risultato di ricerca con breadcrumb si distingue. Invece di mostrare un URL semplice (example.com/products/12345), Google mostra l’intero percorso breadcrumb (Example Store → Donna → Vestiti). Gli utenti vedono il contesto prima di fare clic. Il risultato appare più autorevole, riceve più clic e segnala a Google che il tuo sito ha una gerarchia chiara che merita di essere evidenziata.
Ma i breadcrumb sbloccano questi vantaggi solo se sono implementati correttamente: link HTML reali (non solo styling visivo), markup di dati strutturati (JSON-LD) e allineamento con la tua struttura di navigazione principale. Molti negozi aggiungono breadcrumb come elemento di design senza aggiungere il markup, e perdono completamente il valore SEO.
- I breadcrumb creano link interni dai prodotti alle categorie, trasferendo l'equità dei link verso l'alto.
- I dati strutturati (JSON-LD BreadcrumbList) dicono a Google di mostrare i breadcrumb nei risultati di ricerca.
- I percorsi breadcrumb dovrebbero corrispondere alla tua struttura URL e alla gerarchia di navigazione principale.
- Esegui il test con il Rich Results Test di Google e monitora la Search Console per gli errori.
Perché i breadcrumb importano per la SEO
I breadcrumb svolgono tre funzioni SEO:
1. Architettura di link interni
Ogni breadcrumb è un insieme di link interni. Una pagina di prodotto con il breadcrumb “Home → Donna → Vestiti → Prodotto” contiene tre link interni: uno alla homepage, uno a Donna, uno a Vestiti.
Questi link trasferiscono l’equità dei link dalla pagina del prodotto alle pagine di categoria. Se la pagina del prodotto riceve backlink esterni (un blog revisionista il prodotto e lo collega direttamente), parte di quell’autorità ritorna alle pagine di categoria tramite i link breadcrumb. Questo è l’inverso del flusso di navigazione normale (homepage → categoria → prodotto). I breadcrumb creano un flusso bidirezionale.
I breadcrumb forniscono anche a Google più percorsi per scoprire le pagine. Google può seguire i breadcrumb verso l’alto (da prodotto a categoria a homepage) e verso il basso (da homepage a categoria a prodotto), migliorando l’efficienza del crawl e riducendo il rischio che le pagine diventino orfane.
2. Segnali di gerarchia del sito
I breadcrumb dicono esplicitamente a Google come è organizzato il tuo sito. Il percorso “Home → Donna → Vestiti → Vestiti estivi” dice a Google che Vestiti estivi è una sottocategoria di Vestiti, che è una sottocategoria di Donna, che è una categoria di livello superiore.
Google utilizza questa gerarchia per capire quali pagine sono hub (categorie collegate da molti breadcrumb) e quali pagine sono foglie (singoli prodotti). Le pagine hub sono considerate più importanti e vengono sottoposte a crawl più frequentemente.
Senza breadcrumb, Google deve dedurre la gerarchia dalla struttura URL, dai modelli di link interni e dai menu di navigazione. I breadcrumb rendono la gerarchia esplicita, riducendo l’ambiguità.
3. Risultati ricchi nella ricerca
Quando aggiungi il markup di dati strutturati ai breadcrumb, Google può visualizzarli direttamente nei risultati di ricerca. Invece di un URL semplice, gli utenti vedono l’intero percorso breadcrumb.
Esempio di risultato di ricerca senza breadcrumb:
example.com › products › 12345-summer-dress
Esempio di risultato di ricerca con breadcrumb:
Example Store › Donna › Vestiti › Vestiti estivi
Il secondo risultato è più informativo e più cliccabile. Gli utenti vedono il contesto di categoria prima di visitare la pagina. Questo migliora il tasso di clic (CTR), e un CTR più alto è un segnale di ranking positivo per Google.
Come implementare i breadcrumb: struttura HTML
I breadcrumb devono essere link HTML reali, non solo testo stilizzato. Ogni livello del percorso breadcrumb dovrebbe essere un tag anchor che punta alla pagina di categoria appropriata.
Struttura HTML di base
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/collections/women">Donna</a></li>
<li><a href="/collections/dresses">Vestiti</a></li>
<li><a href="/collections/summer-dresses">Vestiti estivi</a></li>
</ol>
</nav>
Elementi chiave:
<nav aria-label="Breadcrumb">: Il wrapper è un elemento nav con un’etichetta ARIA in modo che i lettori di schermo lo annuncino come un percorso breadcrumb (non solo navigazione generica).<ol>: Un elenco ordinato, perché i breadcrumb sono una sequenza (l’ordine ha importanza).<a href="...">: Tag anchor reali con URL reali. Ogni livello breadcrumb è cliccabile e crawlable.
L’ultimo elemento (la pagina corrente) può essere un link o testo semplice. Google accetta entrambi. Alcune linee guida UX consigliano di renderlo testo semplice (poiché fare clic su di esso non fa nulla — sei già su quella pagina), mentre altre consigliano di mantenerlo come link per coerenza. Entrambi funzionano per la SEO.
Styling CSS
I breadcrumb sono generalmente stilizzati come un elenco orizzontale in linea con separatori (/ o › o >) tra gli elementi. I separatori possono essere aggiunti con pseudo-elementi CSS:
nav[aria-label="Breadcrumb"] ol {
list-style: none;
display: flex;
gap: 8px;
font-size: 14px;
color: #666;
}
nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
content: "›";
margin-left: 8px;
color: #999;
}
I separatori sono solo visivi — non fanno parte della struttura HTML. Google li ignora.
Come aggiungere il markup di dati strutturati
I breadcrumb HTML creano link interni e migliorano l’esperienza utente. Il markup di dati strutturati dice a Google che questi link rappresentano un percorso breadcrumb e dovrebbero essere visualizzati come risultati ricchi.
Google supporta il markup dello schema BreadcrumbList in formato JSON-LD. Questo è un tag script contenente dati JSON che descrive la struttura breadcrumb.
Esempio JSON-LD BreadcrumbList
Aggiungi questo script nel <head> o alla fine di <body> su ogni pagina che ha breadcrumb (pagine di prodotto, pagine di categoria, pagine di articoli):
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Donna",
"item": "https://example.com/collections/women"
},
{
"@type": "ListItem",
"position": 3,
"name": "Vestiti",
"item": "https://example.com/collections/dresses"
},
{
"@type": "ListItem",
"position": 4,
"name": "Vestiti estivi",
"item": "https://example.com/collections/summer-dresses"
}
]
}
</script>
Campi chiave
@contexte@type: Dichiarazioni standard schema.org. Questi dicono a Google che questo è un BreadcrumbList.itemListElement: Un array di elementi breadcrumb, in ordine dalla homepage alla pagina corrente.position: L’ordine di ogni elemento (1 per homepage, 2 per prima categoria, 3 per sottocategoria, ecc.).name: Il testo visibile del breadcrumb (quello che gli utenti vedono).item: L’URL completo della pagina (deve essere assoluto, iniziando conhttps://).
L’ultimo elemento (la pagina corrente) deve includere il campo item. La documentazione Google più vecchia suggeriva di ometterlo, ma la pratica migliore attuale è includerlo per tutti gli elementi.
Errori comuni dello schema breadcrumb
Errore 1: URL relativi invece di URL assoluti
Google richiede URL assoluti nei dati strutturati. Questo non supera la validazione:
"item": "/collections/women"
Questo supera:
"item": "https://example.com/collections/women"
Se il tuo tema Shopify usa Liquid per generare il markup breadcrumb, assicurati di usare il filtro url con absolute_url:
"item": ""
Errore 2: HTML e JSON-LD non corrispondenti
I breadcrumb HTML e il markup JSON-LD dovrebbero descrivere lo stesso percorso. Se l’HTML mostra “Home → Donna → Vestiti” ma il JSON-LD mostra “Home → Abbigliamento → Vestiti”, Google potrebbe ignorare il markup o contrassegnarlo come errore.
Questo accade quando i temi generano i breadcrumb dinamicamente in base alla struttura URL ma hardcodano il markup JSON-LD. Genera sempre entrambi dalla stessa fonte di dati.
Errore 3: Inclusione di link non breadcrumb
Alcuni temi includono il titolo della pagina corrente nel percorso breadcrumb, anche se non è un link navigabile:
<li>Prodotto: Vestito di cotone estivo</li>
Questo va bene per l’HTML (fornisce contesto agli utenti), ma l’elemento JSON-LD corrispondente dovrebbe comunque rappresentare una pagina di categoria o sezione, non il prodotto stesso. L’ultimo elemento dovrebbe essere la categoria padre:
{
"position": 3,
"name": "Vestiti",
"item": "https://example.com/collections/dresses"
}
Se includi il prodotto come elemento breadcrumb finale, assicurati che abbia un URL reale:
{
"position": 4,
"name": "Vestito di cotone estivo",
"item": "https://example.com/products/summer-cotton-dress"
}
Errore 4: Breadcrumb che non corrispondono alla navigazione
Se la tua navigazione principale ha una categoria chiamata “Abbigliamento donna” ma i tuoi breadcrumb mostrano “Donna”, Google potrebbe essere confuso sul fatto che si tratti della stessa categoria.
Usa la denominazione coerente in tutta la navigazione, i breadcrumb e gli URL. Se la navigazione dice “Abbigliamento donna”, il breadcrumb dovrebbe dire lo stesso. Se l’URL è /collections/womens-clothing, il nome della categoria nei dati strutturati dovrebbe corrispondere.
Come testare il markup breadcrumb
Google Rich Results Test
Google fornisce uno strumento gratuito per convalidare i dati strutturati: il Rich Results Test (cerca “Google Rich Results Test” e inserisci il tuo URL).
Lo strumento effettua il crawl della tua pagina, estrae i dati strutturati e mostra se sono validi. Per i breadcrumb, dovrebbe mostrare:
- “BreadcrumbList” rilevato
- Numero di elementi
- Nome e URL di ogni elemento
Se lo strumento mostra errori (“Campo obbligatorio mancante: item” o “URL non valido”), correggili prima di distribuire.
Controllo manuale View Source
Apri la pagina del tuo prodotto o categoria in un browser, View Source (Ctrl+U / Cmd+Option+U), e cerca BreadcrumbList. Dovrebbe vedere lo script JSON-LD con tutti gli elementi breadcrumb elencati.
Verifica:
- Tutti gli URL sono assoluti (iniziano con
https://). - Il percorso breadcrumb corrisponde ai breadcrumb HTML visibili sulla pagina.
- I valori
positionsono sequenziali (1, 2, 3, …).
Google Search Console
Dopo aver distribuito il markup breadcrumb, controlla Google Search Console → Miglioramenti → Breadcrumb. Questo rapporto mostra:
- Quante pagine hanno un markup breadcrumb valido
- Quante pagine hanno errori o avvertimenti
- Quali errori specifici ha trovato Google
Google potrebbe impiegare alcuni giorni per effettuare il crawl delle tue pagine e popolare questo rapporto. Se compaiono errori, fai clic sui dettagli dell’errore per vedere quali pagine sono interessate e qual è il messaggio di errore.
Breadcrumb e struttura URL
I breadcrumb funzionano meglio quando si allineano con la tua struttura URL. Se l’URL di un prodotto è:
https://example.com/collections/women/products/summer-dress
Il breadcrumb dovrebbe riflettere quel percorso:
Home → Donna → Vestito estivo
Se l’URL non corrisponde al percorso breadcrumb (l’URL dice /collections/women ma il breadcrumb mostra “Abbigliamento → Donna”), gli utenti e i motori di ricerca ricevono segnali conflittanti sulla gerarchia del sito.
Per i negozi Shopify, questo può essere complicato. Gli URL dei prodotti Shopify sono flat per impostazione predefinita:
https://example.com/products/summer-dress
Non c’è categoria nell’URL. Il prodotto potrebbe apparire in più raccolte (Donna, Vestiti, Saldi estivi), quindi non esiste un singolo percorso breadcrumb canonico.
Soluzioni:
1. Scegli una raccolta primaria. Se un prodotto appartiene a più raccolte, designane una come primaria. Usa quella raccolta per i breadcrumb. I temi Shopify spesso lo fanno controllando da quale raccolta è venuto l’utente (tramite il referrer HTTP), ma questo non funziona per gli utenti che atterrano direttamente sulla pagina del prodotto dai risultati di ricerca.
2. Usa parametri URL. Alcuni temi aggiungono un parametro di raccolta agli URL dei prodotti: /products/summer-dress?collection=women. Il breadcrumb può quindi essere generato da quel parametro.
3. Usa gli URL dei prodotti basati sulla raccolta di Shopify. In Shopify admin, puoi abilitare gli URL dei prodotti basati sulla raccolta: Impostazioni → Generale → Formato URL prodotto. Questo cambia gli URL dei prodotti in /collections/women/products/summer-dress. La raccolta è ora parte dell’URL, rendendo la generazione breadcrumb diretta.
Breadcrumb per la navigazione sfaccettata
La navigazione sfaccettata (filtraggio delle pagine di categoria in base ad attributi come taglia, colore, marchio) crea breadcrumb dinamici che riflettono lo stato del filtro corrente:
Home → Donna → Vestiti → Taglia: Media → Colore: Blu
Queste selezioni di filtri dovrebbero apparire nei dati strutturati breadcrumb?
Linee guida di Google: i breadcrumb dovrebbero rappresentare la gerarchia del sito, non lo stato di filtro temporaneo. I dati strutturati dovrebbero mostrare:
Home → Donna → Vestiti
I breadcrumb HTML possono mostrare il percorso completo inclusi i filtri (per l’esperienza utente), ma il JSON-LD dovrebbe omettere i filtri. I filtri non sono URL stabili (cambiano con ogni interazione dell’utente) e non rappresentano una gerarchia navigabile.
Eccezione: se le combinazioni di filtri sono promosse come pagine di categoria autonome (ad es., una raccolta “Vestiti blu da donna” con il suo URL e contenuto), è una categoria reale e dovrebbe apparire nei breadcrumb.
Come i breadcrumb interagiscono con la navigazione principale
I breadcrumb non sostituiscono la navigazione principale — la integrano. La navigazione principale (menu header) fornisce categorie di livello superiore e accesso rapido a sezioni chiave. I breadcrumb forniscono contesto gerarchico e navigazione verso l’alto dalle pagine profonde.
I due dovrebbero essere allineati:
- Se la tua navigazione principale ha una categoria “Donna”, i breadcrumb sulle pagine di prodotto in quella categoria dovrebbero includere “Donna”.
- Se la tua navigazione principale usa “Abbigliamento uomo” come etichetta, i breadcrumb dovrebbero usare “Abbigliamento uomo”, non “Uomo”.
La denominazione incoerente confonde gli utenti (“‘Donna’ è la stessa cosa di ‘Abbigliamento donna’?”) e diluisce i segnali SEO (Google vede due etichette diverse per la stessa categoria e deve dedurre che sono la stessa).
Controllo rapido dell'implementazioneApri una pagina di prodotto sul tuo negozio. View Source e cerca "BreadcrumbList." Se non appare nulla, non hai dati strutturati breadcrumb. Aggiungili — il markup richiede 10 minuti per l'implementazione e può migliorare i tassi di clic entro giorni.
Breadcrumb come strumento di efficienza del crawl
Oltre ai risultati ricchi e ai link interni, i breadcrumb aiutano Google a effettuare il crawl del tuo sito in modo più efficiente. Quando Google effettua il crawl di una pagina di prodotto, estrae tutti i link, inclusi i link breadcrumb. Se il breadcrumb include tre link (Home, Donna, Vestiti), Google ora ha tre URL aggiuntivi da eseguire il crawl.
Per i negozi grandi, questo è importante. Google assegna un budget di crawl finito — non effettuerà il crawl di ogni pagina ogni giorno. Le pagine collegate più frequentemente (da più pagine) vengono sottoposte a crawl più spesso. Le categorie che compaiono nei breadcrumb su centinaia di pagine di prodotto vengono sottoposte a crawl molto più frequentemente rispetto alle categorie collegate solo nella navigazione principale.
Questo è particolarmente importante per i prodotti con scorte basse o stagionali. Se un prodotto esaurisce le scorte, desideri che Google re-esegua il crawl della pagina di categoria rapidamente per aggiornare i risultati di ricerca. I link breadcrumb dalle pagine di prodotto alle pagine di categoria aumentano la probabilità che Google re-esegua il crawl della pagina di categoria entro ore o giorni, non settimane.
Implementazione di breadcrumb in Shopify
La maggior parte dei temi Shopify moderni includono il supporto breadcrumb, ma non tutti includono il markup di dati strutturati. Controlla la documentazione del tuo tema o ispeziona il codice breadcrumb nei file Liquid del tuo tema.
Se il tuo tema non include il markup JSON-LD, puoi aggiungerlo manualmente. Nel file theme.liquid del tuo tema (o in uno snippet incluso nelle pagine di prodotto e raccolta), aggiungi uno script come questo:
{% if template contains 'product' %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
}
{% if collection %}
,{
"@type": "ListItem",
"position": 2,
"name": "{{ collection.title | escape }}",
"item": "{{ collection.url | absolute_url }}"
}
{% endif %}
,{
"@type": "ListItem",
"position": {% if collection %}3{% else %}2{% endif %},
"name": "{{ product.title | escape }}",
"item": "{{ product.url | absolute_url }}"
}
]
}
</script>
{% endif %}
Questo genera il markup breadcrumb per le pagine di prodotto. Adattalo per le pagine di raccolta sostituendo product con collection e regolando il percorso breadcrumb di conseguenza.
Per i negozi che utilizzano app come Navi+ AI Menu Builder, il markup breadcrumb è spesso gestito automaticamente come parte del pacchetto di navigazione — controlla le impostazioni dell’app o la documentazione.
I breadcrumb sono una delle implementazioni di dati strutturati con il ROI più alto che puoi fare. Il markup è semplice, gli strumenti di convalida sono gratuiti e l’impatto (risultati ricchi, link interni, efficienza del crawl) è immediato. Se il tuo negozio non ha ancora breadcrumb, aggiungili. Se ha breadcrumb ma nessun dato strutturato, aggiungi il JSON-LD. Lo sforzo incrementale è basso e il vantaggio SEO si accumula nel tempo.
This article is part of the larger guide on SEO di navigazione: assicurati che Google possa eseguire il crawl della tua struttura di menu.