Consigli per l’ottimizzazione delle breadcrumb
Cosa troverai in questo articolo. Le breadcrumb (letteralmente “briciole di pane”) sono un elemento essenziale per la navigazione dei siti web, specialmente sui dispositivi mobili: permettono infatti di risalire con rapidità i vari livelli della gerarchia delle pagine che compongono il sito senza ricorrere al menù principale, migliorano la coesione semantica del sito, aumentano le possibilità di ottenere rich snippet in SERP (qualora corredate di dati strutturati) e chiariscono meglio la struttura generale del sito agli utenti che vi approdano attraverso percorsi non lineari. È possibile però attendersi da esse questi vantaggi, che intrecciano UX e SEO, solo ottimizzandone la lunghezza e l’aspetto grafico e scegliendo modalità di interazione che siano immediate per gli utenti. È poi importante assicurarsi di averle implementate correttamente dal punto di vista tecnico utilizzando gli strumenti messi a disposizione da Google.
Navigare un sito web può trasformarsi facilmente in un’esperienza da incubo se non si ha una mappa chiara a disposizione. È qui che entrano in gioco le breadcrumb, piccoli sentieri di navigazione in grado di guidare l’utente attraverso la complessità gerarchica di un sito web. Ma non sempre le breadcrumb riescono a raggiungere questo obiettivo: in questo articolo ti aiutiamo a comprendere le migliori pratiche per l’implementazione e l’ottimizzazione delle breadcrumb che ti permetteranno di realizzare un’esperienza utente fluida e un’ottimizzazione efficace per i motori di ricerca.
Quale ruolo hanno le breadcrumb nella UX?
Le breadcrumb, più raramente chiamate briciole di pane nella traduzione italiana, altro non sono che link ubicati in alto alla pagina e separati dal segno “>” o “/” che riproducono il percorso seguito dall’utente per arrivare a quella specifica landing page partendo dalla homepage. La loro principale utilità risiede nella capacità di fornire un’immediata idea all’utente del punto in cui egli si trovi all’interno della gerarchia delle informazioni del sito.
Se, a partire da quella landing page, l’utente desiderasse tornare indietro di un livello per navigare la pagina di ordine gerarchico superiore (ad esempio la categoria “Abiti da sposa” dopo aver visualizzato uno specifico abito), le breadcrumb sarebbero il mezzo più veloce per farlo. Rispetto al menù di navigazione tradizionale, infatti, l’interazione con le breadcrumb richiede uno sforzo cognitivo nettamente inferiore, soprattutto quando si tratta di navigazione mobile poiché in questo caso, a differenza della navigazione da desktop, il menù principale non è permanentemente visibile.

Le breadcrumb aiutano anche la SEO?
Le breadcrumb, in qualità di sentieri di navigazione che facilitano il salto dell’utente fra pagine di livello gerarchico superiore e inferiore, rappresentano un fattore migliorativo della UX. Sappiamo che un’esperienza utente positiva può portare a un maggiore coinvolgimento e a una riduzione del tasso di rimbalzo, risultati che impattano positivamente anche il posizionamento di una pagina sui motori di ricerca.
Un altro motivo per cui le breadcrumb sostengono la SEO è che sono in grado di facilitare il processo attraverso il quale gli spider del motore di ricerca indicizzano e comprendono la struttura di un sito web. Inoltre, esse consentono agli utenti di saltare direttamente a livelli specifici della struttura del sito, riducendo la profondità della navigazione e garantendo così che le pagine più importanti del sito siano più facilmente accessibili.
In aggiunta a tutto ciò, le breadcrumb aggiungono di fatto link interni alle pagine di un sito contribuendo a creare un’architettura di link più solida: in conseguenza di ciò, si aumenta la rilevanza e coerenza semantica delle pagine, si migliora la distribuzione dell’autorità del sito e, in ultima analisi, si contribuisce a migliorare il posizionamento complessivo in SERP.
Quando usare e non usare le breadcrumb
È evidente che utilizzare le breadcrumb su un sito monolivello non ha la minima utilità perché non apporta vantaggio alcuno alla UX. Lo stesso vale per i cosiddetti siti-vetrina, quelli che fungono da biglietto da visita dell’azienda e hanno un numero molto limitato di pagine, in genere limitato alla homepage, una pagina “Chi Siamo”, una pagina riassuntiva per i servizi e un pagina di contatto.
Diversamente le breadcrumb risultano essenziali per tutti i grandi siti, specialmente e-commerce, strutturati su una complessa serie di livelli gerarchici. Sono utili però anche per i siti di notizie e i blog qualora gli articoli che vi vengono pubblicati siano suddivisi in categorie e sottocategorie differenti.
Come implementare le breadcrumb e verificare che siano bene inserite
L’implementazione delle breadcrumb su un sito web può variare a seconda della piattaforma utilizzata e del livello di controllo che si ha sul codice del sito. Ad esempio, se il vostro sito web è basato su un CMS come WordPress, Joomla, Drupal e così via potete trovare plugin o estensioni dedicate in grado di aggiungere funzionalità di breadcrumb al sito. Questi plugin semplificano notevolmente il processo di implementazione e di solito offrono opzioni di personalizzazione, tuttavia presentano un certo margine di rischio in termini di compatibilità con il template scelto. Se state sviluppando un sito da zero, quindi, vi conviene verificare che il template scelto integri già nativamente questa possibilità per evitare problemi di compatibilità in futuro.
Nel caso di programmazione manuale del sito, invece, o se avete la possibilità di intervenire direttamente sul codice sorgente del sito, è possibile implementare le breadcrumb manualmente utilizzando HTML e CSS. Per migliorare ulteriormente l’indicizzazione dei motori di ricerca, implementate le breadcrumb utilizzando il relativo markup strutturato di Schema.org. I dati strutturati forniscono informazioni aggiuntive ai motori di ricerca su come sono strutturati le breadcrumb, aumentando le possibilità che il risultato compaia in SERP con uno snippet arricchito in cui l’URL della pagina scompare a favore del percorso di navigazione; questo sarà in grado di ricevere un numero maggiore di clic rispetto a uno snippet di tipo tradizionale.
Una volta implementate le vostre breadcrumb, avete diversi strumenti a vostra disposizione per verificare la correttezza delle operazioni effettuate. Il primo strumento che potete utilizzare è il tester dei dati strutturati di Google per convalidare i dati strutturati su schema.org e per visualizzare l’anteprima del loro aspetto nei risultati della Ricerca Google. Inoltre, all’interno della Search Console trovate un report dedicato al monitoraggio degli eventuali errori registrati in corrispondenza delle breadcrumb.

I problemi più comuni con le breadcrumb
Un elemento così delicato e importante per UX e SEO richiede attenzioni particolari in fase di implementazione. Di seguito vi proponiamo alcuni dei problemi più comuni di esperienza utente che abbiamo registrato nell’interazione degli utenti con le “briciole di pane” e linee guida per la loro risoluzione.
Lunghezza delle breadcrumb
Una delle sfide più ricorrenti nell’implementazione di breadcrumb, specialmente per quanto concerne i dispositivi mobili, è quella di riuscire a condensarle tutte nel ridotto spazio disponibile sullo schermo dello smartphone. Questo problema viene spesso risolto in modi che però presentano ognuno evidenti criticità:
- O rimuovendo del tutto le breadcrumb e rinunciando completamente alla loro implementazione, oppure
- Omettendo alcuni passaggi intermedi della gerarchia di navigazione.
In entrambi i casi, si finisce con il disorientare l’utente e si rischia anche di ridurre le sue capacità di scelta all’interno di un catalogo prodotti molto nutrito, con effetti deleteri per le conversioni. Infatti, si costringe l’utente a compiere molti passaggi avanti e indietro fra le pagine utilizzando o il tasto Indietro del browser o ricorrendo al menù principale; ciò potrebbe rappresentare un deterrente all’acquisto, specialmente se il navigatore è approdato sul sito attraverso un percorso non lineare: un’inserzione pubblicitaria, una ricerca su un comparatore di prezzi o qualsiasi altro canale per cui egli non sia già stato esposto in qualche modo alla gerarchia del sito prima di approdare su una pagina nidificata in profondità.
Qualora non sia possibile mostrare nelle briciole di pane il percorso completo che ha portato l’utente ad atterrare sul prodotto visualizzato, una prima soluzione è quella di includere tutti i livelli di categoria fondamentali all’interno della breadcrumb. Inoltre, è importante non fare confusione fra categorie e filtri per evitare di ritrovarsi con un’eccessiva capillarità gerarchica riflessa in breadcrumb troppo lunghe.
È poi possibile risparmiare spazio rimuovendo sia l’Homepage sia il prodotto specifico dal percorso: per tornare all’homepage, gli utenti potranno semplicemente cliccare sul logo sempre visibile in alto nell’header del sito, azione che la maggior parte degli utenti è ormai perfettamente addestrata a compiere; per quanto riguarda il link al prodotto specifico, la sua presenza nella breadcrumb non offre alcun vantaggio in termini di UX e la sua rimozione non impatta minimamente la navigazione o le conversioni.
Un’altra opportunità di ottimizzazione scaturisce dai nomi stessi delle categorie: è possibile che in alcuni casi possiate sceglierne di più concisi riducendo di conseguenza la lunghezza delle breadcrumb e migliorando, in aggiunta, la facilità di lettura da parte degli utenti.
Se tutte queste ottimizzazioni non fossero comunque sufficienti, potete valutare l’opzione di mantenere le vostre breadcrumb intere e renderle scorribili con un movimento di swipe orizzontale: anche in questo caso si tratta di un meccanismo istintivo per la maggior parte degli utenti che ha il beneficio di mantenere per intero tutta la gerarchia di navigazione. È però necessario far sì che la presenza di questa meccanica sia palesata agli utenti, ad esempio troncando la parte iniziale e/o finale della striscia di breadcrumb.
Altezza delle breadcrumb
Per risolvere il problema dei buchi di informazioni in breadcrumb molto lunghe, alcuni siti ricorrono alla soluzione di disporre i link su due righe consecutive. Questo può tuttavia rappresentare una barriera per la UX qualora lo spazio che separa le righe non sia sufficiente a evitare tap accidentali sul link sbagliato. Ricordate che l’area generalmente colpita con un tap su un sito o app mobile è di circa 7×7 mm e che l’interlinea non dovrebbe essere inferiore a 2 mm.
Questi criteri non sono sempre semplici da rispettare e comunque non arginano un altro problema posto dalle breadcrumb su più righe, ovvero l’aspetto trasandato e confusionario conferito alle pagine su cui si trovano. Tale soluzione dovrebbe quindi essere presa in considerazione solo su siti con gerarchie non eccessivamente dettagliate dove le possibilità di avere breadcrumb su più righe siano molto ridotte.
Visibilità e stile delle breadcrumb
Un’altra situazione molto comune è quella per cui gli utenti ignorino completamente le breadcrumb a causa di un aspetto grafico non sufficientemente chiaro ed evidente. Per evitare che ciò avvenga, vi consigliamo di:
- Evitare di affastellare le breadcrumb con altri elementi che si trovano in cima alla pagina, scegliendo per esse uno stile grafico unico che le differenzi dagli altri link o porzioni di testo circostanti e inserendo spazio bianco di contorno per farle risaltare rispetto al resto;
- Fornire input visivi che facciano subito capire all’utente che ciò che ha davanti è un elemento su cui è possibile compiere un’azione di tap/ Specialmente nella visualizzazione mobile, gli utenti non hanno la possibilità di veder cambiare i colori dei link fermandovisi sopra con il mouse ed è quindi fondamentale utilizzare la sottolineatura così come separatori chiari (i più usati sono i segni “>” e “/”).
Quando le breadcrumb non sono facili da trovare o non riescono a dare accesso immediato alla gerarchia completa di navigazione, infatti, vanno contro a quella che dovrebbe essere la loro funzione primaria di orientare gli utenti nell’architettura del sito, esplorare categorie correlate e raggiungere prodotti simili con il minor sforzo possibile.

Riassumendo: le domande più comuni sulle breadcrumb
Concludiamo questo approfondimento con una serie di FAQ relative alle breadcrumb.
- Cos’è una breadcrumb e perché è importante per l’esperienza utente?
- Una breadcrumb è un elemento di navigazione che mostra la posizione di una pagina all’interno della struttura del sito. È importante perché aiuta gli utenti a capire dove si trovano e a tornare indietro più facilmente.
- Qual è il ruolo dei breadcrumb nella SEO?
- Le breadcrumb migliorano l’usabilità del sito e la struttura dei link interni, entrambi fattori che possono influenzare positivamente il posizionamento nei motori di ricerca.
- Qual è la differenza tra breadcrumb dinamiche e statiche?
- Le breadcrumb dinamiche si aggiornano automaticamente in base alla posizione dell’utente, mentre quelle statiche sono fisse. La scelta dipende dalla complessità del sito e dalle preferenze dell’utente.
- Quali sono le migliori pratiche per la progettazione e la disposizione delle breadcrumb?
- Le breadcrumb dovrebbero essere chiare, concise e posizionate in modo prominente vicino all’inizio della pagina.
- È possibile inserire breadcrumb su CMS come WordPress?
Sì. In questo caso è meglio optare per un tema che implementi nativamente tale funzionalità per evitare conflitti con plugin installati successivamente. Potete comunque scegliere fra numerosi plugin quello che meglio si integra con il template già esistente.
- Le breadcrumb sono compatibili con i dispositivi mobili?
- Sì, le breadcrumb possono essere progettate per essere responsive e adattarsi a diversi dispositivi.
- Come assicurarsi che le breadcrumb siano accessibili a tutti gli utenti, inclusi quelli con disabilità?
- Le breadcrumb devono essere navigabili utilizzando solo la tastiera e compatibili con lettori di schermo e altre tecnologie assistive.
- Qual è il ruolo del markup strutturato nelle breadcrumb?
- Il markup strutturato aiuta i motori di ricerca a comprendere meglio la struttura delle breadcrumb. Può essere implementato utilizzando formati come JSON-LD.
- Le breadcrumb devono essere presenti su tutte le pagine del sito o solo su alcune?
- Dipende dalla struttura del sito, ma di solito sono presenti su tutte le pagine ad eccezione della homepage.
- Quali sono gli errori comuni da evitare nell’implementazione dei breadcrumb?
Errori comuni includono breadcrumb confuse o poco chiare, un posizionamento inappropriato o mancanza di coerenza nella struttura.
- Le breadcrumb possono essere personalizzati per adattarsi alla struttura del sito web?
- Sì, le breadcrumb possono essere personalizzate per riflettere la struttura specifica del tuo sito.
- È obbligatorio usare i dati strutturati nelle breadcrumb?
No. Tuttavia il vantaggio che questi sono in grado di offrire in termini SEO ne rende altamente consigliabile l’implementazione.
- Si possono eliminare alcuni passaggi dalle breadcrumb per risparmiare spazio?
Sì, ma bisognerebbe evitarlo il più possibile. Soprattutto per chi naviga un sito da mobile è difficile mantenere un senso di prospettiva rispetto alla gerarchia del sito e le breadcrumb servono proprio a sostenere l’orientamento. Per motivi di spazio, comunque, si può optare per un compromesso scegliendo di includere solo le categorie assolutamente prioritarie all’interno della breadcrumb. Inoltre, si possono tranquillamente eliminare il link all’Homepage e al prodotto specifico.
- Come capire se le breadcrumb sono implementate correttamente?
Oltre a controllarle visivamente sulle vostre pagine, usate lo strumento di testing di Google e monitorate eventuali errori che dovessero comparire nell’apposito report di Google Search Console.
Non avete trovato risposta alla vostra domanda? Scriveteci: saremo lieti di aggiungere nuove informazioni alla nostra guida sulle breadcrumb.
Coming soon:
Il blog di Seed torna fra due settimane con un approfondimento dedicato alla realtà aumentata su Google e le nuove opportunità di posizionamento aperte da essa. Non perdetevelo!