Cos'è una Breadcrumb in un Sito? Generatore di Markup e Schema | We.Inc
Cos'è la navigazione a breadcrumb, il pattern HTML accessibile con aria-current, le regole BreadcrumbList di Google e un generatore che scrive entrambi per te.
Una breadcrumb è la breve scia di link vicino all'inizio di una pagina, come Home > Scarpe > Scarpe da corsa, che mostra dove si trova la pagina all'interno del sito. I visitatori la usano per risalire di un livello. Se marcata con i dati strutturati BreadcrumbList, aiuta anche Google a capire la gerarchia del tuo sito.
I tre tipi di breadcrumb
Tipo
Esempio
Ideale per
Posizione (gerarchia)
Home > Scarpe > Scarpe da corsa
Negozi, blog e la maggior parte dei siti
Attributo
Scarpe > Taglia 9 > Blu
Mostrare i filtri scelti in un elenco di prodotti
Percorso (cronologia)
Le pagine che questo visitatore ha attraversato
Raramente utile; il pulsante indietro del browser fa già questo
Il nome viene dalla scia di briciole della fiaba. In un sito è un menu secondario, quindi non sostituisce mai la navigazione principale. Qui sotto trovi il pattern HTML accessibile del W3C, i dati strutturati che Google legge e un generatore che scrive entrambi a partire dalla tua scia.
Scrivi la tua scia nel generatore, un livello per riga, dalla home page fino alla pagina corrente.
Aggiungi l'indirizzo completo dopo ogni nome, separato da una barra verticale. L'ultima riga può ometterlo.
Copia l'HTML nel template della pagina e il JSON-LD nella head della pagina.
Testa la pagina con il Test dei risultati multimediali di Google prima di estenderla a tutto il sito.
Mostra la scia della posizione della pagina nel sito, non il percorso fatto dal visitatore.
Rendi ogni elemento un link tranne la pagina corrente, che porta aria-current="page".
Mantieni identici la breadcrumb visibile e i dati strutturati, così il markup descrive ciò che le persone vedono davvero.
Disegna i separatori con il CSS, come fa l'esempio del W3C, così gli screen reader non leggono una fila di frecce.
Sugli schermi piccoli, lascia che la scia vada a capo su due righe invece di scorrere in orizzontale.
Domande frequenti
Le breadcrumb aiutano la SEO?
La documentazione di Google sulle breadcrumb dice che usa il markup delle breadcrumb nel corpo di una pagina per classificare le informazioni che contiene. Inoltre danno ai crawler più link interni verso l'alto nella gerarchia. Da sole non sono una scorciatoia per il posizionamento.
Cosa richiede Google in BreadcrumbList?
Un array itemListElement di almeno due voci ListItem. Ognuna ha bisogno di un name, di una position che parte da 1 e di un item con l'URL della pagina. L'ultima voce può omettere item, e in quel caso Google usa l'URL della pagina in cui si trova.
La breadcrumb deve includere la pagina corrente?
Il pattern del W3C la include come link finale, contrassegnato con aria-current impostato su page. Molti siti la mostrano invece come testo semplice. Vanno bene entrambe le soluzioni, purché chi usa uno screen reader capisca qual è la voce corrente.
Quale elemento deve racchiudere una breadcrumb?
Un elemento nav con un'etichetta come aria-label="Breadcrumb", e al suo interno un elenco ordinato. L'esempio del W3C usa esattamente questo, perché l'ordine dei link ha un significato.
Una pagina può avere più di una scia di breadcrumb?
Sì. La pagina di Google mostra un esempio con due elementi BreadcrumbList per una pagina raggiungibile da due categorie. Mostra entrambe le scie anche ai visitatori, così il markup corrisponde alla pagina.
Markup accessibile per le breadcrumb
Il pattern delle WAI-ARIA Authoring Practices ha tre requisiti: mettere la scia in un landmark di navigazione, etichettare quel landmark con aria-label o aria-labelledby, e impostare aria-current su page nel link alla pagina corrente. MDN descrive il valore page di aria-current come il link al documento corrente in una breadcrumb.
L'esempio del W3C struttura i link come elenco ordinato e disegna i separatori con bordi CSS, così le tecnologie assistive annunciano solo i nomi delle pagine.
Dati strutturati corrispondenti
Schema.org spiega che la proprietà position serve a ricostruire l'ordine degli elementi, con i numeri più bassi per primi. Parti da 1 per la cima della scia, di solito la home page o una categoria principale.
JSON-LD, un blocco di dati strutturati in un tag script, è il formato più facile da aggiungere perché vive separato dal tuo HTML visibile. Il generatore qui sotto lo scrive a partire dallo stesso elenco che produce la scia visibile.
Stile dei separatori
Questo CSS disegna una piccola freccia prima di ogni elemento tranne il primo, così i separatori non compaiono mai nel testo annunciato da uno screen reader.
Breadcrumb con separatori in CSS
Modifica i nomi per provarlo. Le frecce arrivano dalla regola ::before, non da caratteri nell'HTML.
Generatore di breadcrumb
La tua scia, un livello per riga: Nome | indirizzo completo
Anteprima
HTML
Dati strutturati JSON-LD
Copia
Copiato
Google chiede almeno due elementi in una BreadcrumbList. Aggiungi un altro livello.
La riga {n} non ha un indirizzo. Solo l'ultimo elemento può ometterlo.
Creato nel tuo browser a partire da ciò che scrivi. Non viene caricato nulla.