Di Riccardo Esposito | Pubblicato il
I breadcrumb – o briciole di pane – sono dei collegamenti ipertestuali che indicano la posizione della pagina. Aiutano l’utente a comprendere il percorso effettuato per raggiungere la pagina. Questi link sono utili per la SEO e l’UX.
Questi link che si trovano nella parte alta della pagina web aiutano l’utente a comprendere il percorso per raggiungere una risorsa. Ecco perché parliamo di briciole di pane o breadcrumb: come nella favola di Pollicino aiutano a ritrovare la via di casa.
Aggiungere questi elementi di navigazione e dell’ottimizzazione SEO on-page vuol dire curare un dettaglio minimo. Utile soprattutto per i grandi portali che hanno diverse categorie e sotto-categorie. Eppure pure un blog WordPress ha bisogno di aggiungere i breadcrumb. Perché In che modo si mettono? Ecco tutto quello che devi sapere.
Indice dei contenuti
Cos’è un breadcrumb, definizione e spiegazione
Note anche con il nome tradotto dall’inglese, briciole di pane, i breadcrumbs sono dei collegamenti ipertestuali che riproducono il percorso di navigazione. Gli anchor text di questa fila di hyperlink rappresentano le varie directory del percorso svolto.
Queste indicazioni testuali per gli utenti aiutano a individuare la posizione: il percorso inizia dalla home e ha delle frecce che mostrano categoria, eventuale sotto-categoria, e nome dell’articolo o della pagine web. Questo ha un vantaggio lato UX e SEO.
Ma perché si usa il termine breadcrumb, tradotto come briciole di pane? Nella terminologia comune nel web design è una metafora della tecnica di orientamento utilizzata nella fiaba dei fratelli Grimm Hansel e Gretel. In Italia è nota quella di Pollicino.
Da leggere: cosa sono i backlink e a cosa servono
Esempi di breadcrumb e codice HTML
Il breadcrumb indica la posizione in una gerarchia. Elenca le sezioni e le directory dividendole separatori che possono essere di tipo differente. Ad esempio: home / categoria / articolo o home > categoria > articolo. Ecco un esempio del codice HTML.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Per dividere le varie voci dei breadcrumb si possono utilizzare diversi simboli. Nella maggior parte dei casi si utilizzano > e » per intendere un percorso gerarchico ma funzionano bene anche / e frecce. In alcuni casi si utilizza il pipe | come fa GoPro.
In ogni caso, a prescindere dai simboli utilizzati, i breadcrumb trail nei siti web offrono agli utenti un modo per tracciare il percorso dal punto di partenza originale fino all’arrivo.
Perché si mettono i breadcrumb, a cosa servono
Questo elemento della navigazione di un sito web serve all’utente e al motore di ricerca. Il lettore che arriva su una pagina web riesce a capire dove si trova, quale percorso ha fatto per arrivare su quella pagina e cosa deve fare per tornare indietro a un livello superiore, senza ricominciare ogni volta dalla navigazione dalla home page.
Oltre all’usabilità del sito web, i breadcrumb migliorano anche il modo in cui Googlebot vede il portale. Queste etichette testuali contenenti link interni aiutano a far comprendere la struttura del sito web e a scoprire tutte le sezioni di cui è composto.
Vantaggi SEO e UX per chi usa le breadcrumb
Abbiamo detto che questi link per la navigazione aiutano la search engine optimization e possono dare vantaggi in termini di ottimizzazione SEO on-page. Nello specifico, sono una soluzione per ottenere una serie di vantaggi per il posizionamento su Google.
Migliori user experience del portale
Può sembrare un dettaglio, ma inserire questa stringa di link su riga orizzontale prima della risorsa permette all’utente di muoversi meglio tra le pagine evitando di perdere tempo. Inoltre la frequenza di rimbalzo aumenta se le persone possono muoversi.
Aiuti Google a scansionare il sito
Uno dei motivi che dovrebbero spingerti a mettere i breadcrumbs su blog, siti web ed e-commerce: questi testi con collegamenti ipertestuali aiutano Google a capire la struttura delle tue pagine web e l’architettura dell’intero portale. A tal proposito, Mountain View propone anche dei dati strutturati per far apparire la traccia dei breadcrumb nella serp.
In questo modo, nel risultato su Google, invece dell’URL puro appare la sequenza gerarchica delle varie directory. Ecco la pagina con le istruzioni per implementare i dati strutturati. In alto, invece, c’è un esempio di snippet arricchito con questa soluzione.
Aumenti il numero di link interni
Uno dei benefici dell’inserire i breadcrumb sul sito internet: puoi implementare il numero di collegamenti alle pagine e alle categorie. L’internal linking è uno dei fattori di ottimizzazione on-site fondamentali per aiutare il tuo sito web a posizionarsi meglio.
Dove sono posizionati questi link di navigazione
Di solito i percorsi di breadcrumb si posizionano nella parte alta della pagina, ovvero tra l’header e il titolo H1. In realtà John Mueller ha sottolineato, in un suo intervento, che dal punto di vista del motore di ricerca la posizione di questi link non è importante.
Great question — no, the placement doesn’t matter for SEO. We use breadcrumbs for crawling (finding internal links) & for rich results (structured data); both don’t depend on placement of the breadcrumbs.
— 🐝 johnmu.xml (personal) 🐝 (@JohnMu) April 25, 2021
In realtà se valutiamo anche l’aspetto legato alla user experience, l’esperienza utente, è giusto lasciare le briciole di pane in una zona visibile – above the fold – per dare all’utente un ulteriore elemento per muoversi sul sito oltre al classico menu di navigazione.
Esempi e tipi di breadcrumb
Esistono diverse tipologie di briciole di pane da inserire nei siti web. La soluzione più comune è quella di permettere al pubblico di muoversi in autonomia e senza difficoltà, questo è l’obiettivo dei breadcrumb. Però puoi scegliere tra metodi diversi.
Dinamici
I percorsi di breadcrumb possono mostrare i passaggi che l’utente ha intrapreso per arrivare a una pagina particolare. Questi elementi sono dinamici, mostrano le risorse che il pubblico ha visitato prima di arrivare alla pubblicazione sulla quale si trova.
Ricorda però che Jakob Nielsen sottolinea che I breadcrumb dovrebbero visualizzare la posizione corrente nella struttura gerarchica del sito, non la cronologia della sessione.
Gerarchici
Il breadcrumb gerarchico (o location-based) mette nell’elenco la sequenza delle directory in cui si trova l’utente. Prima c’è la home, poi ci sono le categorie, sotto-categorie, e infine la pagina di destinazione. Nell’esempio di Amazon puoi vedere come è articolato.
Quasi inutile dire che il tipo di breadcrumb gerarchico è il più utilizzato. Tra i consigli base per gestire questo tipo di struttura possiamo ricordare che è inutile aggiungere il link all’ultimo step (in alcuni casi non viene neanche citato) e lo stesso si può dire della home: in realtà la pagina principale del sito dovrebbe essere esclusa dai breadcrumb.
Attributi
In alcuni casi si utilizzano i breadcrumb in base agli attributi relativi a una determinata scelta. Questo avviene soprattutto negli e-commerce dove un prodotto può avere colore, taglia, genere ed età come riferimento di navigazione. E questa combinazione viene riprodotta nei link del breadcrumb per aiutare a muoversi nel portale.
Come mettere i breadcrumb su un sito web
Le soluzioni per inserire le briciole pane su un portale o un blog sono diverse. Se vuoi aggiungere i breadcrumb su WordPress puoi scegliere la soluzione più semplice: i plugin. Esistono diverse estensioni che ti consentono di mettere questi link di navigazione.
In primo luogo puoi utilizzare NavXT che è il plugin WordPress per breadcrumb più famoso e che ti consente sia di personalizzare i link, sia di generarli con il formato BreadcrumbList RDFa di Schema.org. In pratica puoi ottenere i rich snippet.
C’è da dire che una delle migliori soluzioni per aggiungere i breadcrumb su un sito web fatto con WordPress è utilizzando Yoast. Questo plugin, che magari già usi per l’ottimizzazione di tag title e meta description, permette di inserire i link di navigazione.
Purtroppo, in alcuni casi i breadcrumb non si vedono se li metti con Yoast. In questi casi bisogna copiare e incollare il codice nelle varie sezioni. Ecco la procedura per inserire i breadcrumb sul blog o sul sito web utilizzando sempre il plugin SEO by Yoast.
- Entra in WordPress.
- Installa e attiva Yoast SEO.
- Seleziona SEO > Aspetto ricerca.
- Fare clic sulla scheda Breadcrumb.
- In Impostazioni breadcrumb, fai clic su Abilitato.
- Configura le impostazioni dei breadcrumb.
- Fare clic su Salva modifiche.
- Copia lo snippet di codice di incorporamento breadcrumb.
- Seleziona Aspetto > Editor tema.
- Incolla lo snippet di codice nei tuoi file del tema.
- Salva e verifica la presenza della briciole di pane.
In buona sintesi, se hai montato Yoast puoi attivare la funzione breadcrumb con un semplice switch nella sezione dedicata. Non tutti i temi WordPress permettono di operare in questo modo. Se i breadcrumb non si vedono devi aggiungere il codice manualmente.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>Ovviamente questa stringa di codice deve essere incollata dove vuoi che appaia il breadcrumb. Ad esempio all’interno del file single.php e/o page.php appena sopra il titolo H1 della pagina. Inoltre, su alcuni temi puoi metterlo alla fine del file header.php.
Alcuni consigli su come usare i breadcrumb
Ci sono alcune regole fondamentali da seguire per ottimizzare i breadcrumb sia dal punto di vista SEO che della buona user experience. Ecco come mettere questi collegamenti ipertestuali in modo che siano realmente utili per il sito e l’utente.
- Non sempre i breadcrumb servono. Su un sito monopagina sono inutili.
- Nella home page è altrettanto superfluo mettere il breadcrumb.
- Non confondere i breadcrumbs con altri elementi di navigazione.
- Usa un font leggermente più piccolo rispetto al contesto.
- La voce home o nel menu o nel breadcrumb, non in entrambi i punti.
- La pagina corrente non deve essere linkata.
I breadcrumb non devono sostituire la barra di navigazione. Da mobile, attenzione ai breadcrumb che vanno a capo, potrebbero portare confusione nella pagina. Considera la possibilità di eliminare l’ultimo livello se è troppo lungo. Ecco qualche punto extra.
Su un e-commerce i percorsi di navigazione sono ancora più importanti. Se utilizzi Woocommerce puoi utilizzare un’estensione specifica per aggiungere questi link.
Se utilizzi questo page builder per creare le tue landing page puoi mettere i percorsi di navigazione o con il widget di Yoast o con uno ufficiale di Elementor che però è a pagamento. D’altro canto puoi personalizzare meglio i breadcrumb con il CSS:
Questi link possono essere usati per la navigazione. Si modificano esteticamente con il CSS e puoi ottenere una buona documentazione di breadcrumb su Bootstrap.