Breadcrumb: navigazione e SEO
I breadcrumb ("briciole di pane") sono un percorso di navigazione che mostra all'utente la posizione della pagina corrente nella gerarchia del sito (es. Home > Servizi > Web Design). Migliorano l'usabilità riducendo il bounce rate e segnalano ai motori di ricerca la struttura logica del sito. Implementare il Breadcrumb Schema in JSON-LD permette inoltre di sostituire l'URL grezzo nei risultati di ricerca con un percorso più leggibile.
Beneficio in SERP
Quando il Breadcrumb Schema è implementato correttamente, Google sostituisce l'URL del risultato di ricerca con il percorso del breadcrumb. Esempio: invece di tuosito.it/servizi/web-design/seo appare tuosito.it > Servizi > Web Design > SEO. È un piccolo miglioramento di leggibilità che può incrementare il CTR del 2-5%.
Struttura del markup
Il Breadcrumb Schema usa il tipo BreadcrumbList con un'array di ListItem ordinati per posizione:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://tuosito.it/"
},{
"@type": "ListItem",
"position": 2,
"name": "Servizi",
"item": "https://tuosito.it/servizi/"
},{
"@type": "ListItem",
"position": 3,
"name": "Web Design"
}]
}
Nota: l'ultimo elemento (pagina corrente) può omettere il campo item perché rappresenta la pagina stessa.
Coerenza con HTML visibile
Il breadcrumb deve essere presente anche come elemento HTML visibile nella pagina. Pattern consigliato:
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/servizi/">Servizi</a></li>
<li aria-current="page">Web Design</li>
</ol>
</nav>
L'uso di aria-label e aria-current migliora accessibilità per screen reader. I link devono essere navigabili e portare a pagine reali.
Breadcrumb multipli
Una pagina può avere più breadcrumb se è raggiungibile da percorsi diversi. Esempio: un prodotto categorizzato sia in "Marca" che in "Categoria" può avere due BreadcrumbList. Inseriscile entrambe come array di JSON-LD: Google sceglierà quella più rilevante per la query.
Implementazione su WordPress
WordPress genera breadcrumb tramite plugin SEO:
- Yoast SEO: abilita Breadcrumb in Yoast → Generale → Funzionalità → Breadcrumb. Inserisci la funzione yoast_breadcrumb() nel template del tema
- Rank Math: Rank Math → General Settings → Breadcrumb, attiva e configura i separatori
- SEOPress: SEOPress → Pro → Breadcrumb
Questi plugin generano automaticamente sia l'HTML visibile sia il JSON-LD coerente.
E-commerce: struttura ideale
Per un'e-commerce il breadcrumb riflette la struttura categorie:
Home > Elettronica > Smartphone > iPhone 15
Mantieni gerarchie con massimo 4-5 livelli. Più livelli rendono i breadcrumb poco utili e diluiscono l'autorità delle pagine intermedie. Su Magento e PrestaShop esistono moduli nativi che generano automaticamente il markup.
Errori comuni
Non saltare livelli: ogni breadcrumb deve riflettere un path reale e cliccabile. Non includere parametri di query negli URL del markup (es. UTM). Non duplicare lo stesso breadcrumb su pagine non correlate. L'URL item deve essere assoluto e con HTTPS.
Validazione
Testa con Rich Results Test e Schema Markup Validator. In GSC monitora la sezione Miglioramenti → Breadcrumb per individuare pagine con errori. Il rich result Breadcrumb è uno dei più semplici da ottenere e dei più stabili nel tempo.
Hai bisogno di aiuto?
Se vuoi un sito SEO ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.