I breadcrumb sono dei link che facilitano la navigazione di un sito web. Nell'era digitale la navigazione intuitiva è fondamentale per mantenere l'attenzione dell'utente. Una delle tecniche più efficaci per migliorare l'esperienza di navigazione è l'uso delle breadcrumb. Ma cosa sono esattamente e perché sono così importanti?
Vediamo nel dettaglio cosa sono i breadcrumb, le origini, i benefici, come implementarli nel sito e come verificarli correttamente.
I breadcrumb sono un elemento di navigazione che mostra agli utenti la posizione attuale di una pagina all'interno di un sito web. Sono spesso visualizzate sotto il titolo della pagina e consistono in una serie di collegamenti che portano a pagine di livello superiore.
Il termine "breadcrumb" potrebbe evocare immagini di una scia di briciole di pane, e in effetti, l'analogia non è lontana dalla realtà. Nel contesto del web design, il breadcrumb, tradotto letteralmente come "briciola di pane", rappresenta una tecnica di navigazione utilizzata per aiutare gli utenti a comprendere e navigare la struttura di un sito web.
Ma da dove proviene questo concetto e come si è evoluto nel tempo?
Il concetto di breadcrumb trae ispirazione dalla fiaba di Hansel e Gretel, dove i protagonisti lasciano una traccia di briciole di pane per ritrovare la strada di casa nel bosco. Analogamente, nel vasto "bosco" del World Wide Web, i breadcrumb servono come guida per gli utenti mostrando loro il percorso che hanno seguito e come tornare indietro.
Questa analogia ha portato alla nascita del termine "breadcrumb", che è diventato una parte integrante del design e della funzionalità dei siti web moderni.
Mentre la barra di navigazione principale di un sito può essere paragonata al "menu" di un ristorante, i breadcrumb sono come una dettagliata mappa del percorso che porta a una pagina. Questa "mappa" è particolarmente utile per i siti con una struttura complessa o con molte pagine interconnesse. Ad esempio, se stai visualizzando la pagina di un paio di scarpe di un e-commerce, nei breadcrumb potresti trovare le relative categorie di prodotto in cui rientra quella scarpa, come ad esempio: Home > Donna > Sport > Running > Scarpe > Nike Pegasus.
I breadcrumb offrono una chiara rappresentazione visiva del percorso di navigazione, permettendo agli utenti di tornare facilmente a una pagina precedente o alla homepage.
Questo è particolarmente utile per i siti con molte sottocategorie, come gli e-commerce, dove gli utenti potrebbero voler saltare tra diverse sezioni o prodotti.
I breadcrumb non sono solo un elemento estetico; hanno un ruolo funzionale cruciale nel migliorare l'usabilità di un sito. Ma quali sono i veri benefici dell'implementazione dei breadcrumb?
I breadcrumb offrono numerosi vantaggi sia per gli utenti che per i motori di ricerca. Per gli utenti possono aiutare a migliorare l'esperienza di navigazione rendendo più facile trovare le informazioni di cui hanno bisogno, riducendo il numero di clic necessari per navigare tra le pagine.
Per i motori di ricerca, i breadcrumb possono aiutare a comprendere la struttura di un sito web, il che può influire sul posizionamento del sito nei risultati di ricerca.
Oltre ai benefici per l'utente, i breadcrumb offrono anche vantaggi significativi in termini di SEO (Search Engine Optimization). Aiutano i motori di ricerca a comprendere la struttura e la gerarchia di un sito, il che può influenzare positivamente il posizionamento nei risultati di ricerca. Questo il consulente SEO lo sa bene
Le breadcrumb possono anche apparire nei risultati di ricerca stessi, fornendo agli utenti ulteriori informazioni sul contenuto di una pagina e incoraggiandoli a fare clic.
Google, il motore di ricerca più popolare al mondo, ha riconosciuto l'importanza delle breadcrumb. La guida SEO di Google suggerisce di aggiungere breadcrumb ai siti e di utilizzare un markup specifico per farlo. Questo aiuta nella distribuzione del PageRank e nella comprensione della struttura del sito da parte di Google, oltre che a migliorare l'esperienza utente.
Se vuoi aggiungere i breadcrumb al tuo sito esistono varie modalità. Se hai un sito statico in html puoi farlo manualmente; se utilizzi Wordpress esistono vari plugin già pronti.
WordPress, una delle piattaforme CMS più popolari, offre vari plugin per implementare le breadcrumb. "Breadcrumb NavXT" è uno dei plugin più popolari e affidabili disponibili. Tuttavia è essenziale assicurarsi che i breadcrumb siano strutturati correttamente e che non siano solamente visibili nel front-end ma che utilizzino anche i dati strutturati appropriati.
Se usi già il plugin per Wordpress Yoast SEO, troverai nelle impostazioni una funzione per attivare automaticamente i breadcrumb.
Quando si scrivono breadcrumb, è importante seguire una struttura logica e gerarchica. Di seguito alcuni esempi.
Nel primo esempio, "Home" rappresenta la pagina principale del sito, seguita dalla categoria "Abbigliamento", dalla sottocategoria "Uomo" e infine dalla sottocategoria specifica "Giacche". Ogni elemento dei breadcrumb dovrebbe essere cliccabile, tranne l'ultimo, che rappresenta la pagina corrente.
Per implementare i breadcrumb nel codice del tuo sito puoi utilizzare il markup JSON-LD, che è raccomandato da Google. In alternativa puoi utilizzare i microdati, scrivendo il codice direttamente nei tag HTML. Ecco un esempio di come potrebbe apparire il codice JSON-LD del seguente menu:
Home > Abbigliamento > Uomo > Giacche
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://link-al-tuo-sito/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Abbigliamento",
"item": "https://link-al-tuo-sito/abbigliamento"
},
{
"@type": "ListItem",
"position": 3,
"name": "Uomo",
"item": "https://link-al-tuo-sito/abbigliamento/uomo"
},
{
"@type": "ListItem",
"position": 4,
"name": "Giacche",
"item": "https://link-al-tuo-sito/abbigliamento/uomo/giacche"
}
]
}
</script>
Dopo aver implementato i breadcrumb è fondamentale verificare che siano strutturati correttamente. Uno strumento utile per questa verifica è lo Schema Markup validator.
Questo strumento online permette di inserire l'URL del tuo sito e controllare se i breadcrumb sono stati implementati correttamente secondo gli standard di Schema.org. Se ci sono errori o avvertenze, lo strumento fornirà dettagli su cosa correggere, garantendo che i breadcrumb siano ottimizzati sia per gli utenti che per i motori di ricerca.
In alternativa a fornire l'url della pagina del tuo sito da controllare puoi anche incollare direttamente il codice nell'apposito campo.
I breadcrumb sono molto più di un semplice elemento grafico di un sito web. Sono uno strumento essenziale per migliorare l'usabilità e l'ottimizzazione dei motori di ricerca.
Implementando correttamente i breadcrumb puoi offrire ai tuoi utenti un'esperienza di navigazione intuitiva e migliorare la visibilità del tuo sito nei risultati di ricerca. In un mondo digitale sempre più competitivo, dettagli come i breadcrumb possono fare la differenza tra un sito di successo e uno che viene ignorato.
Qui a Chef Studio mi occupo di SEO, Art Direction, User Interface Design e Fotografia. Dal 2013 sono Fotografo Certificato Google Maps Street View. Nel tempo libero amo viaggiare e fare un sacco di altre cose che se le elenco non finiamo più. Sono curioso, molto. Mi piace documentarmi e imparare sempre cose nuove.
