Sui siti con molte pagine, il breadcrumb ( navigazione breadcrumb) può aiutare notevolmente i visitatori a navigare nella struttura gerarchica dei documenti e indicare la posizione attuale degli utenti sul sito. Dal punto di vista dell'usabilità, i breadcrumb possono ridurre il numero di passaggi che un visitatore deve compiere per raggiungere il livello più alto di una pagina.

Cos'è il pangrattato?

Briciole di pane (Menu di navigazione, "Briciole di pane", Inglese Briciole di pane) - un elemento di navigazione del sito web, che rappresenta un percorso attraverso il sito dalla sua “radice” alla pagina corrente in cui si trova l'utente.

Il titolo "Breadcrumbs" è un riferimento ironico alla fiaba tedesca "Hansel e Gretel", in cui i bambini, quando furono condotti nel bosco una seconda volta, non riuscivano a ritrovare la via del ritorno perché questa volta al posto dei sassolini lasciavano dietro di sé le briciole di pane, successivamente beccate dagli uccelli della foresta.

Di solito è possibile visualizzare i breadcrumb sui siti che hanno molti contenuti disposti in ordine gerarchico. La forma più semplice è quando i breadcrumb vengono presentati come collegamenti di testo orizzontali e simboli separati (> -"maggiore di") che indicano il livello di quella pagina rispetto ad altre pagine.

Quando dovresti usare il breadcrumb?

Usa la traccia di breadcrumb per siti Web di grandi dimensioni e siti Web con organizzazione gerarchica delle pagine.

I breadcrumb non devono essere utilizzati per siti a livello singolo che non dispongono di alcuna gerarchia o raggruppamento logico.

Un ottimo modo per determinare se un sito trarrebbe vantaggio dall'utilizzo dei breadcrumb è creare una mappa del sito o un diagramma che rappresenti l'architettura di navigazione del sito e quindi analizzare se i breadcrumb consentono all'utente di navigare facilmente all'interno e tra le categorie.

La navigazione gerarchica dovrebbe essere considerata una funzionalità aggiuntiva e non dovrebbe sostituire un menu di navigazione primario efficace. Si tratta di uno schema di navigazione secondario che consente agli utenti di stabilire dove si trovano e costituisce un modo alternativo di navigare nel sito.

Tipi di pangrattato

Ce ne sono tre principalitipo di "briciole di pane".

In base alla posizione

I breadcrumb basati sulla posizione mostrano all'utente dove si trova nella gerarchia del sito.Vengono in genere utilizzati per strutture di navigazione con più livelli (solitamente più di due livelli).Nell'esempio seguente (daSitePoint ), ogni collegamento testuale della pagina che si trova a sinistra è di un livello superiore.

In base alle proprietà

I breadcrumb basati sulle proprietà riflettono gli attributi di una particolare pagina.

Basato sul percorso

Mostrano il percorso intrapreso dall'utente per arrivare alla pagina corrente. Questo percorso è dinamico, la stessa pagina può avere indirizzi diversi.

Vantaggi dell'utilizzo del breadcrumb

Possono aiutare l'utente

I breadcrumb vengono utilizzati principalmente per fornire agli utenti un mezzo aggiuntivo per navigare in un sito.Su siti Web di grandi dimensioni e multilivello, offrire una visualizzazione del percorso percorso può fornire all'utente un modo abbastanza semplice per navigare verso categorie di livello superiore.

Riduce il numero di clic o azioni per tornare alle pagine di livello superiore

Invece di utilizzare il pulsante Indietro del browser o la navigazione principale di un sito Web, gli utenti possono tornare alle categorie principali utilizzando i breadcrumb con meno clic.

Generalmente non ostruire lo schermo

Solitamente hanno un orientamento orizzontale e quindi non occupano molto spazio sulla pagina.

Ridurre la frequenza di rimbalzo

I breadcrumb possono invogliare nuovi visitatori a navigare nel resto del tuo sito web. Ad esempio, un utente arriva a una pagina tramite una ricerca su Google, vede le categorie pubblicate sopra e potrebbe interessarsi. Questo, a sua volta, riduce la frequenza di rimbalzo del sito.

Errori durante l'utilizzo dei breadcrumb

Usare il pangrattato è abbastanza semplice. Ma prima di implementarli sul tuo sito, devi considerare alcuni errori che dovresti evitare.

Utilizzando il pangrattato quando non necessario

Un errore comune è usare il breadcrumb quando non c’è alcun vantaggio nel farlo.

Nell'esempio sopra, possiamo vedere troppe opzioni di navigazione posizionate abbastanza vicine l'una all'altra: navigazione primaria, breadcrumb e navigazione secondaria.

Utilizzo del breadcrumb come navigazione principale

Come notato in precedenza, i breadcrumb dovrebbero essere utilizzati come ulteriore aiuto alla navigazione.

Utilizzo dei breadcrumb quando le pagine hanno più categorie

I breadcrumb hanno una struttura lineare, quindi saranno difficili da utilizzare se le tue pagine non possono essere divise in categorie chiare.La decisione se utilizzare i breadcrumb dipende in gran parte da come hai creato la gerarchia del tuo sito.A un livello di pagina basso, l'utilizzo dei breadcrumb è inefficace, impreciso e crea confusione per l'utente.

Design a briciola di pane

Quando si sviluppano i breadcrumb, potrebbero sorgere alcune domande. Per esempio:

Quale simbolo dovrebbe essere usato per separare i collegamenti?

Il simbolo comune e più riconoscibile per separare i collegamenti ipertestuali nei breadcrumb è il simbolo maggiore di - (>).

È inoltre possibile utilizzare le virgolette per indicare un angolo destro (") e una barra (/).

La scelta dipende dal sito stesso e dal tipo di catena che utilizzi.Ad esempio, se i collegamenti nel breadcrumb non hanno una relazione gerarchica tra loro, l'utilizzo del simbolo maggiore di > potrebbe non trasmetterne accuratamente l'essenza.

Cosa dovrebbero essere?

Non vuoi che le tue briciole di pane dominino la pagina.Dovrebbero essere utilizzati come ulteriore aiuto per gli utenti (per comodità), quindi anche le loro dimensioni dovrebbero corrispondere a queste e trasmettere correttamente questa funzione agli utenti: dovrebbero essere più piccoli o meno evidenti rispetto al menu di navigazione principale.

Una buona regola pratica per determinare la distanza percorsa è che essonon dovrebbe essere il primo elemento che attira l'attenzione dell'utente sulla pagina.

Dove dovrebbero essere posizionati i breadcrumb?

I breadcrumb vengono generalmente visualizzati nella parte superiore della pagina, sotto il menu di navigazione principale, se viene utilizzato un menu orizzontale.

Statistiche

Di seguito sono riportate le statistiche raccolte nel maggio 2002 su 75 principali siti di e-commerce.

Orientamento della catena

95% - orizzontale

5% verticale

Separatore tra elementi (per catene orizzontali)

Esempi di utilizzo del breadcrumb nel web design

Ora che abbiamo esaminato chi, come, quando e perché le persone utilizzano i breadcrumb, possiamo osservare alcuni esempi di come vengono utilizzati sui siti Web.

Uso classico del pangrattato

Utilizzando altri simboli

Buona giornata, cari lettori!

In che modo i breadcrumb influenzano l'ottimizzazione dei motori di ricerca e come realizzarli su un sito WordPress. Questo è esattamente ciò che verrà discusso nell'articolo di oggi. Guardando al futuro, dirò che i breadcrumb aiutano i tuoi utenti a navigare nel sito. Hanno anche un impatto positivo sulla SEO.

I breadcrumb sono suggerimenti su un sito Web che mostrano all'utente dove si trova. Una sorta di catena creata per la navigazione.

Sono cliccabili, il che significa che il visitatore può passare in qualsiasi momento a un "livello" superiore, a una sottocategoria o categoria. Di norma, i breadcrumb hanno la seguente forma: principale – intestazione – sottocategoria – articolo. Quest'ultimo elemento molto spesso viene rimosso nella convinzione che crei inutili duplicazioni.

Si ritiene che questo nome sia un riferimento ad una fiaba in cui i bambini, andando nella foresta, lasciavano dietro di sé una scia di briciole di pane per la navigazione. Dovevano ritornare lungo questa strada. Anche una catena di link è un percorso: più si va avanti nel sito, più elementi contiene. E infatti lungo questa catena puoi tornare alla pagina principale. Proprio come in una fiaba.

Come influenzano la SEO

L'utilizzo di una barra di navigazione è considerato una buona forma nel mondo dell'ottimizzazione dei motori di ricerca.

Innanzitutto, migliora i fattori comportamentali. E questo, come sai, è quasi l'indicatore più basilare della qualità di un sito. Se l'usabilità è di buon livello, l'uso e la navigazione sono chiari e convenienti, i visitatori lo apprezzeranno sicuramente e rimarranno sulla risorsa più a lungo. Inoltre, migliori sono i fattori comportamentali, maggiore sarà la tua risorsa nei risultati di ricerca.

In secondo luogo, la presenza del breadcrumb è già considerata un buon fattore per un motore di ricerca. I robot vedono che il progetto ha un sistema e una struttura di navigazione e questo ha un buon effetto sul posizionamento.

Naturalmente, la sola barra di navigazione non porterà la tua risorsa in alto. Questo funziona insieme ad altri aspetti di un buon SEO.

Per riassumere, i breadcrumb aiutano:

• migliorare i fattori comportamentali e l’usabilità,
• rendere la struttura del sito chiara e accessibile,
• facile navigazione tra le pagine,
• migliorare tecnicamente il SEO,
• creare un collegamento.

Cioè, l'uso di una barra multifunzione di navigazione è strettamente necessario per chi vuole che il proprio progetto sia comodo, pratico e visitabile.

Tipi di pangrattato

Sì, sì, hanno varietà. Non ce ne sono molti, ma vale comunque la pena considerare questo punto.

Lineare

Una striscia regolare che mostra il percorso dalla pagina principale all'articolo. Il tipo più comune di breadcrumb... Abbiamo solo una barra di navigazione di tipo lineare.

Tasto indietro

Un tipo di navigazione molto scomoda, molto comune nei negozi online. Di norma, gli utenti non ne sono particolarmente soddisfatti e utilizzano un pulsante simile nel browser stesso. Per un sito di informazione questa opzione è praticamente inutile.

Ibrido

Questa opzione combina le due precedenti. Cioè, la risorsa ha sia la navigazione lineare che un pulsante "Indietro". Possiamo dire che questo è un compromesso che aiuta ad accontentare tutti. Ma, come ho detto sopra, le persone usano raramente il pulsante "Indietro", preferendo il pulsante nel browser stesso - fortunatamente, tutte le applicazioni moderne ne sono dotate.

In genere, la barra di navigazione si trova su tutte le pagine tranne la pagina principale. In WordPress si tratta di categorie, tag, articoli e altre tassonomie.

Come creare breadcrumb su WordPress

Il modo più semplice per creare un feed di navigazione su WordPress e altri siti è tramite HTML. Più precisamente, sarà un ibrido di html e php, altrimenti dovrai scrivere manualmente ogni catena di navigazione, e questo non è un compito molto piacevole.

Utilizzando un modello

Sarebbe saggio scegliere subito un modello con pangrattato. Se stai solo pensando al tuo prossimo sito web e non hai ancora iniziato a crearlo, dovresti dare un'occhiata a qualche negozio di template WordPress e cercare un tema con questa funzione (ti consiglio Root).

Questa sarà l'opzione più pratica perché non dovrai installare plugin aggiuntivi. Allo stesso tempo, non è necessario aggiungere o modificare manualmente nulla, tutto funzionerà, come si suol dire, fuori dagli schemi (immediatamente dopo l'installazione).

Plugin

Puoi installare il feed di navigazione insieme al plug-in. Ma tieni presente che ogni plugin può caricare ancora di più il tuo CMS. Se ci sono già così tanti plugin, uno in più può semplicemente rovinare tutto, rallentando il sito.

Yoast SEO: istruzioni dettagliate per l'impostazione delle briciole

Se lo usi come plugin SEO, ho ottime notizie per te. I breadcrumb sono presenti nella funzionalità, quindi tutto ciò che devi fare è configurarli.

Queste sono istruzioni generali che dovrebbero essere adatte alla maggior parte degli utenti. Si basa sulle informazioni fornite dagli stessi autori del plugin.

Quindi, affinché il feed di navigazione in Yoast SEO funzioni, dobbiamo inserire il seguente codice PHP nei nostri file modello:

Di solito questo codice viene inserito nei modelli di pagina comuni: single.php o page.php. Inoltre, alcuni utenti inseriscono questo codice in header.php, alla fine. Se funzionerà specificatamente nel tuo caso o meno, non lo so, ma puoi provare.

I modelli di pagina comuni possono essere modificati tramite gli strumenti WordPress integrati. Vai su “Aspetto” – “Editor”, trova il file desiderato nell'elenco.

Ecco il codice PHP e il markup HTML. Un utente inesperto potrebbe confondersi, ma è necessario riunirsi e cercare di capire cosa e dove.

Nello specifico nel mio tema i breadcrumb sono già forniti; subito dopo l'header c'è una funzione che richiama i breadcrumb nativi. Il tuo codice sarà diverso, ma il significato generale rimane lo stesso.

È meglio posizionare il breadcrumb direttamente sotto l'intestazione: la funzione get_header(); – serve solo a chiamarlo. Pertanto, è corretto posizionare il codice di Yoast SEO direttamente sotto di esso.

Ma tieni presente che per personalizzare la barra di navigazione, potresti dover lavorare con gli stili CSS. Sono forniti dal plugin stesso, ma potrebbero non essere adatti.

Puoi anche usare il breadcrumb negli articoli. Devi solo lasciare il seguente shortcode nel posto giusto: .

Ma né il codice né lo shortcode funzioneranno se la funzionalità breadcrumb è disabilitata nel plugin stesso. Per abilitarlo, devi andare nelle impostazioni del plugin (scheda SEO) - visualizzazione nei risultati di ricerca - breadcrumb.

Imposta il dispositivo di scorrimento su "Abilitato", quindi scorri verso il basso la pagina e fai clic su "Salva modifiche". Da questo momento in poi il pangrattato comincerà a funzionare.

Puoi personalizzarli se lo desideri. Ad esempio, imposta un separatore tra gli elementi, specifica il testo del collegamento alla pagina principale, i prefissi per le tassonomie, ecc.

Puoi anche evidenziare l'ultima pagina (o il titolo del materiale) in grassetto. Per fare ciò, cambia il cursore corrispondente.

Se Yoast SEO non è particolarmente adatto a te, allora puoi prestare attenzione ad altri plugin che ti permettono di creare breadcrumb sul tuo sito. Ce ne sono molti gratuiti nel catalogo, ma metterò in evidenza le opzioni più popolari.

NavXT breadcrumb

Un semplice plugin che può creare breadcrumb per il tuo progetto. Attualmente conta più di 800mila utenti attivi. Il plugin ha un proprio pannello di controllo ed è adatto alla maggior parte dei siti WordPress.

Quasi tutto può essere personalizzato in Breadcrumb NavXT. Aspetto, elementi visualizzati e loro ordine. Ci sono molte più possibilità qui che nello stesso Yoast SEO (in particolare per quanto riguarda l'impostazione della catena di navigazione).

Questa estensione può essere installata in modo assolutamente gratuito dalla directory di WordPress. Puoi trovarlo utilizzando parole chiave.

Percorso di navigazione

Un'altra estensione che può essere installata direttamente dalla directory. A differenza del precedente, questo plugin non ha un pubblico così vasto. Totale 10.000 utenti attivi. Ma se consideri che molte persone preferiscono altre opzioni per creare il breadcrumb, allora questo è un risultato abbastanza buono.

Il plugin è semplice e leggero. Ha un bel design (vedi screenshot), puoi cambiare i colori. Per l'utilizzo su piccoli progetti è più che sufficiente.

Ci sono anche altri plugin. Sono meno popolari, ma puoi comunque provarli. Basta andare nella directory dei plugin e inserire la parola chiave breadcrumb. WordPress ti offrirà immediatamente diverse dozzine di opzioni adatte.

Conclusione

I breadcrumb sono un ottimo modo per navigare in un sito web. Migliorano il SEO, aumentano i fattori comportamentali e consentono agli utenti di navigare nelle pagine del sito.

Quasi tutti i siti moderni cercano di prestare attenzione a questo. I web designer non sono in ritardo, ora l'assenza di breadcrumb in un modello è considerata uno svantaggio molto significativo. Qualcuno si rifiuterà addirittura di acquistare un modello del genere solo per questo dettaglio apparentemente insignificante. Assicurati di tenere conto di questo fatto e cerca di rendere il tuo sito facile da usare.

Se vuoi saperne di più sulla creazione di progetti informativi a scopo di reddito, ti consiglio di dare un'occhiata. L'autore parla della creazione di un sito Web su WordPress, di tecniche competenti e di ottimizzazione dei motori di ricerca e, soprattutto, degli attuali metodi di monetizzazione.

Raccolta gratuita Pangrattato HTML e CSS esempi di codici di navigazione: semplice, reattivo, multilinea, compresso, eccetera. Aggiornamento della collezione febbraio 2018. 3 nuovi articoli.

articoli Correlati

A proposito del codice

CSS semplice.

A proposito del codice

Sentiti libero di personalizzarlo a modo tuo. Colori, dimensioni, ombre, bordi, ecc. Fatto con Bootstrap.

A proposito del codice

Pangrattato con puntini di sospensione "intelligenti" (Flex)

Gioca con le dimensioni del browser per vedere come si comportano quando non c'è più spazio per loro.

A proposito del codice

Questo esempio mostra cosa succede quando un utente si avvicina al pulsante Indietro. I breadcrumb si espandono e consentono all'utente di navigare praticamente in qualsiasi altro punto del corso con un impatto minimo sullo spazio.

Breadcrumb con proprietà personalizzate CSS come API.
Realizzato da Stas Melnikov
15 giugno 2017

Frecce breadcrumb CSS pure multilinea adattive.
Realizzato da Glynn Smith
30 maggio 2017

GIF dimostrativa: pangrattato

Breadcrumb HTML e CSS.
Realizzato da Dany Santos
15 luglio 2016

Pangrattato di Material Design, tracker dei progressi.
Realizzato da Shyam Chen
30 luglio 2015

Un elenco di breadcrumb è compresso per mostrare solo il testo di anteprima per tutti tranne la pagina corrente, con il testo completo mostrato al passaggio del mouse/focus.
Realizzato da Skye
4 marzo 2015

Pangrattato reattivo puro CSS.
Realizzato da Oliver Knoblich
2 aprile 2014

La navigazione breadcrumb aiuta i visitatori del sito a navigare nella struttura gerarchica dei documenti e a raggiungere il livello più alto. Pertanto, se il sito contiene un numero elevato di documenti, è necessario fornirlo di "breadcrumb". Questa lezione presenterà il codice CSS per creare varie opzioni di progettazione per uno strumento di navigazione così necessario.

Markup HTML

Il markup è semplice e minimo. Si basa su un elenco non ordinato.