Breadcrumbs:
cosa sono, a cosa servono e traduzione

Breadcrumb, letteralmente “briciole di pane”, è quel breve percorso di testo situato nella parte alta della pagina di un sito. Nella favola di Pollicino, le briciole servono a lasciare una traccia per non perdersi nel bosco. In egual modo il breadcrumb serve al navigante per sapere sempre dove si trova.

I breadcrumbs, noti anche come percorsi di navigazione, hanno assunto un ruolo cruciale nel design e nell’architettura dell’informazione dei siti web moderni.

Questi elementi, rappresentati da una serie di indicatori testuali che riflettono la struttura gerarchica del sito, guidano l’utente attraverso il suo percorso digitale consentendogli di comprendere immediatamente dove si trova all’interno della struttura del sito facilitando il ritorno a pagine precedenti con un semplice clic.

Utili sia per gli utenti che per i motori di ricerca, le breadcrumbs aumentano la facilità di utilizzo e l’indicizzazione dei contenuti.

Sono una serie di collegamenti testuali disposti gerarchicamente. Sono utili come guida che agevola l’orientamento, riduce il tasso di abbandono del sito e la bounce rate, migliorando così la soddisfazione complessiva dell’utente.

Che cosa sono i breadcrumbs: definizione e utilità

La definizione deriva dalla favola di Pollicino che per non perdersi nel bosco, lasciava dietro di sè delle briciole di pane per ritrovare facilmente il sentiero di casa.

I breadcrumbs, o “briciole di pane”, sono elementi di navigazione che migliorano l’esperienza utente sui siti web. Rappresentano una sorta di “mappa” che mostra il percorso gerarchico che porta alla pagina alla pagina attuale.

Un breadcrumb potrebbe apparire così: Home > Categoria > Sottocategoria > Pagina

La loro utilità risiede nella facilità con cui permettono agli utenti di orientarsi all’interno del sito web e tornare agevolmente alle sezioni precedenti.

Un utente che, ad esempio, dovesse atterrare in una pagina di vendita di t shirt delle nazionali di calcio ma volesse trovarne di altri sport, sarebbe facilitato dalla presenza del breadrcumb come nell’esempio qui sotto, giungendo a destinazione con facilità e rapidità. Una sintesi funzionale di ux design, ui design e seo.

Un esempio di navigazione breadcrumb dal sito Puma

L’importanza dei breadcrumbs va oltre la semplice navigazione; essi svolgono un ruolo significativo nell’ottimizzazione per i motori di ricerca, migliorando la strutturazione dei dati e facilitano la scansione della struttura interna del sito da parte del crawler di Google.

I benefici dei breadcrumbs tra seo e user experience

Questi percorsi di navigazione, solitamente posti nella parte superiore delle pagine, aiutano gli utenti a comprendere la struttura del sito e a muoversi facilmente tra macro e micro categorie.

I breadcrumbs possono aiutare a diminuire il numero di click che separano l’utente dalla pagina che sta cercando di raggiungere. Inoltre, in un ambiente nuovo, favoriscono l’orientamento dell’utente all’interno dell’architettura del sito web. Il miglioramento della Ux è la naturale conseguenza.

Ciò aumenta il tempo di permanenza sul sito, contribuendo così ad un possibile miglioramento nel posizionamento nei risultati di ricerca.

Genera più click attraverso i motori di ricerca

Oltre ad essere visibili all’interno dei siti web, i breadcrumbs possono comparire anche nei risultati di ricerca di Google. Nei rich snippet, ad esempio. Ciò rende il risultato più attraente, ordinato ed intrigante, col conseguente ragionevole auspicio d’incremento del ctr.

Un esempio di breadcrumb presente in serp in un rich snippet

Grazie all’utilizzo dei dati strutturati di breadcrumb è possibile comunicare tali informazioni correttamente a Google.

Chi non ne sfrutta l’opportunità, può presentarsi così:

Un esempio di breadcrumb presente in serp in uno snippet

I 3 tipi di breadcrumbs

Esistono principalmente tre tipi di breadcrumbs, ognuno con le proprie peculiarità e contesti di utilizzo ideali.

I breadcrumbs di navigazione riflettono la struttura gerarchica del sito, guidando l’utente attraverso i livelli di navigazione in modo intuitivo. Sono particolarmente utili in siti web con una struttura complessa e molteplici livelli di contenuto.
I breadcrumbs dinamici, invece, si adattano al percorso specifico intrapreso dall’utente, offrendo un tracciato personalizzato delle pagine visitate. Questo tipo è ideale per siti e-commerce, dove l’utente può arrivare a un prodotto attraverso percorsi diversi.
I breadcrumbs attributivi mostrano gli attributi o le categorie specifiche relative alla pagina corrente. Questa varietà è particolarmente utile in siti web che presentano articoli o prodotti classificati secondo vari criteri, come taglia, colore o genere.

Comprendere la differenza tra questi tipi di breadcrumbs e il contesto appropriato per ciascuno è essenziale per migliorare l’usabilità del sito e fornire un’esperienza utente ottimale.

Come aggiungere dati strutturati

La corretta integrazione dei dati strutturati con i breadcrumbs è fondamentale per ottimizzare la visibilità di un sito web sui motori di ricerca, in particolare su Google.

Per farlo, utilizza il markup Schema.org specifico per breadcrumb, includendo i tag JSON-LD o Microdata nel codice HTML delle pagine.

Ad esempio, con JSON-LD, crea uno script che definisce chiaramente il percorso di navigazione dell’utente.

Segui le linee guida di Google per l’implementazione dei dati strutturati e assicurati che ogni breadcrumb sia correttamente inserito.

Un’integrazione accurata porterà a una maggiore visibilità nei motori di ricerca, contribuendo significativamente alla SEO e all’attrattività generale del sito.

Esempi di breadcrumb

Quando crei breadcrumb per il tuo sito, è essenziale mantenere una struttura chiara e gerarchica.

Ad esempio, per un sito dedicato al turismo potresti avere una sequenza come: Home > Destinazioni > Europa > Italia > Roma.

In questo schema, “Home” è la pagina di partenza, seguita dalle sezioni che si approfondiscono fino alla destinazione specifica, “Roma”.

Assicurati che ogni passaggio sia un link cliccabile, tranne l’ultimo, che indica la pagina corrente.

Per codificare i breadcrumb, puoi usare il JSON-LD, raccomandato da Google, inserendo nel tuo HTML un blocco di script che delinei ogni tappa del percorso navigazionale.

Una volta aggiunti i breadcrumb, verifica la correttezza della loro struttura con il Schema Markup validator, che aiuterà a identificare e correggere eventuali errori, assicurando l’ottimizzazione per utenti e motori di ricerca.

Copia