Breadcrumb in WordPress: come aggiungerli e configurarli

Sì, breadcrumbs significa proprio briciole di pane, come quelle lasciate da Hänsel e Gretel e da Pollicino per ritrovare la via del ritorno. Ma nel web, a differenza delle fiabe, le tracce del percorso restano visibili e ci danno la possibilità di farlo a ritroso così come di saltare a punti del sito più vicini alla home, anche quando arriviamo direttamente sul contenuto seguendo un backlink.

In questa guida ai breadcrumb in WordPress vedremo perché è utile mostrarli e quando è meglio non farlo. Parleremo di come aggiungerli al sito manualmente, attraverso temi che li supportano oppure con dei plugin – per la SEO o dedicati; di come personalizzarne lo stile, ottimizzarli per il posizionamento sui motori di ricerca e anche di come rimuoverli.

Cosa sono i breadcrumb

I breadcrumb sono percorsi di navigazione che mostrano la posizione di un contenuto rispetto alla struttura del sito attraverso una sequenza di link. 

Li avrai visti di certo, posizionati in alto, di solito appena sopra il titolo.

Grazie ai breadcrumb l’utente può andare con un clic alle sezioni superiori, per esempio da un articolo alla sottocategoria che lo contiene oppure alla categoria genitore o alla home.

Come negli altri CMS, su WordPress i breadcrumb sono di 3 tipi.

I breadcrumb basati sulla gerarchia o sulla posizione sono quelli più comuni che mostrano a chi visita il sito dove si trova e i livelli superiori che lo separano dalla home. Come nell’immagine sopra, seguono uno schema che riflette la struttura del sito:
Home > Categoria principale > Sottocategoria > … > Pagina

I breadcrumb basati sulla cronologia invece rappresentano il percorso effettivo seguito dall’utente e permettono di tornare facilmente sulle pagine già visitate. Sono molto meno usati rispetto a quelli gerarchici e in alcuni casi potrebbero essere identici a questi: cioè quando il visitatore ha navigato dalla home verso una categoria e poi su un contenuto della categoria.

Invece se, per esempio, l’utente arriva sulla pagina da un post di un’altra sottocategoria cliccando su un link interno, il breadcrumb non rispetterà la struttura del sito ma sarà del tipo: 
Home > Categoria > Altra Sottocategoria > Pagina

In questo esempio abbiamo un percorso di navigazione che ricalca la struttura del sito ma permette anche di tornare alla pagina precedente e di ritrovare tutti i filtri impostati grazie al link “Back”.

I breadcrumb basati sugli attributi mostrano non solo la posizione del contenuto rispetto alla gerarchia ma anche eventuali filtri che sono stati aggiunti nella ricerca. Sono tipici dei negozi online, come quello che vedi nell’immagine sotto.

Perché usare i breadcrumb 

I breadcrumb migliorano l’esperienza utente perché facilitano la navigazione. Infatti in ogni momento mostrano alle persone dove si trovano all’interno del sito e permettono di tornare alle pagine precedenti con un minor numero di clic. 

Inoltre danno un’idea della struttura dei contenuti, il che può essere molto comodo nei siti complessi e negli ecommerce.

I breadcrumb contribuiscono a migliorare la SEO di WordPress poiché aiutano non solo gli umani ma anche i motori di ricerca a capire la gerarchia delle pagine. Google li apprezza, tanto che li mostra anche nelle pagine dei risultati.

In più i percorsi di navigazione suggeriscono altre sezioni da esplorare e così tendono a ridurre il tasso di rimbalzo del sito – cioè la percentuale di utenti che abbandona dopo aver visualizzato una sola pagina. Allo stesso modo aiutano a migliorare la profondità di navigazione, cioè il numero medio di pagine viste per sessione. Tutti parametri che puoi misurare con Google Analytics, magari approfittando della nostra guida completa per principianti.

Quando potrebbe essere preferibile non usare i breadcrumb su WordPress?

• Quando il sito ha una struttura piatta, senza categorie: per esempio in caso di siti vetrina composti solo da pagine statiche.
• Se il layout già troppo affollato, o se si vuole mantenere un design minimalista.
• Se sono presenti menù secondari e altri strumenti che aiutano l’utente a orientarsi e rendono i breadcrumb superflui.

Metodi per aggiungere i breadcrumb in WordPress

In sintesi ci sono 3 modi per aggiungere i breadcrumb in WordPress:

1. inserirli da un tema che li supporta;
2. usare un plugin (SEO o dedicato);
3. modificare il codice manualmente.

Per chi ancora deve scegliere il tema, la soluzione più semplice potrebbe essere installarne uno che permetta di inserire i percorsi di navigazione. Allo stesso modo, poiché non c’è sito o blog WordPress che non abbia installato anche un plugin per la SEO, ha senso sfruttarlo anche per aggiungere i breadcrumb.

Però, come spesso succede su questo CMS, è possibile implementare la funzionalità anche con plugin WordPress dedicati, che di solito hanno il vantaggio di offrire più opzioni di personalizzazione. E se temi che installare un ulteriore software possa danneggiare le prestazioni del sito, puoi dare un’occhiata alla nostra guida per velocizzare WordPress.

In alternativa, se sai come usare il codice o hai voglia di fare esperimenti sulla copia di staging del sito prima di applicare le modifiche sul sito live, hai sempre la possibilità di aggiungere i breadcrumb in WordPress manualmente. Con SupportHost per esempio il servizio di staging è gratuito per tutti i piani di hosting WordPress e non solo.

Scegliere un tema che offra breadcrumb nativi

Se stai creando ora il tuo sito WordPress sei ancora in tempo per scegliere un tema che preveda i breadcrumb in modo da non aver bisogno di ulteriori strumenti. In effetti, anche se ci si pensa di rado, i temi WordPress influiscono non solo sulla grafica ma anche sulle funzionalità del sito.

Se invece hai un sito live, devi sapere che cambiare tema potrebbe produrre risultati imprevisti sull’aspetto di WordPress, quindi ti consiglio di testare tutto in staging e prepararti a dedicare del tempo a eventuali aggiustamenti stilistici.

Questa potrebbe non essere una buona idea se hai già un’identità visiva consolidata, nel qual caso è più pratico aggiungere i breadcrumb in WordPress con un plugin o via codice. 

Inserire i breadcrumb in WordPress con Astra 

Astra è uno dei pochi temi gratuiti a supportare sia i propri breadcrumb nativi che l’inserimento di percorsi di navigazione creati con altri strumenti.

Per attivare i breadcrumb in Astra accedi al pannello di amministrazione di WordPress e vai su Aspetto > Personalizza. 

Nella barra laterale clicca su Generale.

Nella schermata successiva seleziona Breadcrumb.

Ora puoi decidere dove far comparire i breadcrumb rispetto all’header scegliendo una voce di menù.

Se lo lasci impostato su Nessuno non ci sarà una navigazione breadcrumb. Con qualsiasi altra opzione i percorsi di navigazione saranno visualizzati.

Se selezioni Interno, posizionerai i breadcrumb dentro l’header, con un risultato simile a quello nell’immagine.

La voce Dopo l’header serve a visualizzare i breadcrumbs appena sotto la testata, così:

L’opzione Prima del titolo permette di ottenere un risultato del genere.

Inoltre è possibile decidere di non mostrare i breadcrumbs su tutte le pagina ma solo su alcune tipologie selezionandole dal menù Opzioni di visualizzazione, che comprende homepage, archivi, pagine singola e articolo singolo, pagina 404, ecc.

Ricordati che per salvare le modifiche nelle impostazioni del tema devi usare il tasto Pubblica che trovi in alto a sinistra.

Personalizzare la grafica dei breadcrumb di Astra

Oltre alla posizione, la schermata Personalizza di Astra offre anche altre opzioni per modificare l’aspetto dei breadcrumb.

Dopo aver stabilito la posizione puoi occuparti delle impostazioni tipografiche e scegliere:

• il separatore;
• l’allineamento del testo;
• i colori di sfondo, testo, separatore, link (puoi mantenere quelli ereditati dal tema oppure no);
• una diversa spaziatura del breadcrumb rispetto agli elementi circostanti.

Inserire con Astra breadcrumb di altri plugin 

Astra supporta anche l’inserimento di breadcrumb di alcuni noti plugin SEO per WordPress e di uno strumento specifico per i percorsi di navigazione:

• Yoast SEO
• Rank Math
• SEOPress PRO
• Breadcrumb NavXT.

Quando sono abilitati i breadcrumb di uno di questi plugin, è possibile selezionarlo come sorgente nella sezione Personalizza di Astra, in modo che sostituiscano a livello di sito quelli generati dal tema. Come vedi, questa funzionalità di Astra non si applica ai breadcrumb generati con All in One SEO.

Per esempio qui posso scegliere di inserire i breadcrumb da Rank Math.

Anche quando scegli di visualizzare i breadcrumb di un plugin, puoi sfruttare il menù Posizione dell’header per decidere dove collocarli rispetto alla testata.

Invece se vuoi personalizzarli nell’aspetto devi farlo dalle impostazioni del plugin di provenienza, perché da Astra non è possibile.

Inserire i breadcrumb in WordPress con OceanWP

OceanWP viene spesso citato come un tema che supporta i breadcrumb, ma non offre funzionalità gratuite paragonabili a quelle di Astra.

In effetti la versione base di OceanWP visualizza di default dei percorsi di navigazione nella barra orizzontale sotto la testata, ma non permette di editarli. 

Inoltre dà la possibilità di inserire i breadcrumb in punti del sito a scelta con uno shortcode che funziona solo dopo l’installazione del plugin Ocean Extra:

 [oceanwp_breadcrumb]

Per abilitare lo shortcode, dalla barra laterale di WordPress vai su Aspetto > OceanWP e scorri la pagina fino a trovare il pulsante Installa Ocean Extra. 

Dopo averlo installato vai in Plugin, cercalo e attivalo.

A questo punto puoi inserire lo shortcode nei contenuti o nelle aree widget del tema con un semplice copia-incolla. 

Per aggiungere i breadcrumb al footer, alla barra laterale o altra area del sito, vai in Aspetto > Widget. Con l’editor classico puoi scorrere i blocchi disponibili sino a trovare il testo generico e scegliere l’area che preferisci.

Poi incolla il codice all’interno del blocco di testo.

Dopodiché potrai spostarlo dove preferisci all’interno dell’area widget.

Il risultato sarà simile a questo:

Personalizzare i breadcrumb di OceanWP

Con la versione a pagamento di OceanWP invece, i breadcrumb si possono personalizzare del tutto, anche a livello locale dall’editor di articoli e pagine.

Se vuoi farti un’idea dei risultati che si possono ottenere, vai a guardare le tante demo disponibili sul sito OceanWP.

Aggiungere i breadcrumb in WordPress con un plugin SEO

Se hai intenzione di aggiungere i breadcrumb in WordPress con un plugin SEO, la scelta non può che ricadere sullo strumento che stai già usando, a meno che tu non stia valutando di cambiarlo per altri motivi. Nel qual caso le nostre guide dedicate possono aiutarti a capire in cosa si differenziano nelle loro versioni gratuite e a pagamento le principali alternative sul mercato: Rank Math, Yoast e AIOSEO.

Attivare i breadcrumb di Rank Math

Prima di inserire i breadcrumb con Rank Math SEO, ti consiglio di entrare nella bacheca del plugin e accertarti che siano attivi i dati strutturati, in modo che il markup Schema per WordPress venga associato ai percorsi di navigazione.

Qui abilita anche la modalità avanzata del plugin facendo clic su Advanced mode in alto a destra. 

Dalla barra laterale vai su Rank Math > Impostazioni generali, poi clicca sulla tab Breadcrumbs.

Attiva l’interruttore Abilita la funzione breadcrumb e vedrai comparire sotto una serie di impostazioni.

Se il tuo tema hai già rilevato i breadcrumb di Rank Math, il cursore non funzionerà e visualizzerai un avviso del plugin. Comunque non preoccuparti perché i tuoi breadcrumb di Rank Math sono attivi e da qui puoi configurarli.

Personalizzare i breadcrumb di Rank Math

Come abbiamo intravisto sopra, in Rank Math > Impostazioni generali > Breadcrumbs puoi modificare una serie di opzioni grafiche.

Sono disponibili 6 diversi caratteri separatori e un ultimo campo vuoto per configurare quello che preferisci.

Inoltre puoi decidere di mostrare o meno il link alla homepage, che di solito è il primo elemento nei breadcrumb. Se decidi di mantenerlo, potrai personalizzare l’etichetta (di default Home) e l’URL. In questo modo potrai far partire la navigazione breadcrumb da una pagina diversa dalla home: per esempio dalla pagina Blog.

Altre etichette modificabili sono quelle dell’archivio, dei risultati di ricerca e della pagina di errore 404 WordPress. In questi campi è sconsigliato eliminare il simbolo “%s”, che serve ad aggiornare dinamicamente il componente nel breadcrumb, però puoi aggiungere del testo prima o dopo se vuoi dare un tocco personale.

C’è anche la possibilità di aggiungere un prefisso ai breadcrumb, come in “Ti trovi nel percorso: Home > Categoria > Articolo”.

Ulteriori opzioni permettono di escludere dal percorso alcuni elementi mostrati di default come il titolo dell’articolo, o il nome della tassonomia primaria, cioè della categoria immediatamente superiore (anche se avrebbe poco senso eliminare un collegamento così significativo).

Per mantenere i breadcrumb sintetici si consiglia invece di lasciare nascoste eventuali categorie genitore della categoria primaria.

È possibile mostrare nel percorso di navigazione anche la pagina Blog, come in:
Home / Blog / Categoria / Articolo.

Quando hai finito di personalizzare i breadcrumb di Rank Math a livello globale ricordati di salvare le modifiche con l’apposito pulsante in fondo alla pagina.

Per accorciare il titolo del breadcrumb di Rank Math a livello di sito, puoi inserire un filtro in functions.php nel tuo tema child per impostare un numero massimo di caratteri. Il codice da usare è: 

add_filter( 'rank_math/frontend/breadcrumb/items', function( $crumbs, $class ) {

$title = get_the_title();

$max_char_limit = LIMITE_CARATTERI; //Set the limit for breadcrumb title

 if(strlen($title) > $max_char_limit){

 $RM_truncate_breadcrumb_title = substr($title, 0, $max_char_limit).'...';

 array_splice($crumbs, count($crumbs) - 1, 1); 

 $crumbs[][0] = $RM_truncate_breadcrumb_title; 

 } 

 return $crumbs;

}, 10, 2);

Devi solo sostituire “LIMITE_CARATTERI” con la cifra che preferisci prima di applicare il filtro.

In più, come vedremo dopo, Rank Math permette di modificare il testo ancora del singolo contenuto, utile per ottimizzare i breadcrumb per la SEO.

Inserire i breadcrumb di Rank Math

Ci sono 3 modi per inserire i breadcrumb di Rank Math.

• configurarli dal pannello di WordPress su un tema capace di visualizzare i breadcrumb generati dal plugin in modo nativo;
• sfruttare lo shortcode generato in automatico dal plugin;
• modificare i file PHP.

Qualunque metodo tu scelga, assicurati che nel sito non siano attivi breadcrumb di altri plugin che potrebbero creare conflitti.

Configurare i breadcrumb su un tema capace di visualizzarli in modo nativo

Come abbiamo visto sopra, Astra visualizza i breadcrumb di Rank Math su tutto il sito appena si sceglie la posizione nella schermata Aspetto > Personalizza.

Altri temi, come Neve, sono in grado di mostrare i breadcrumb di Rank Math se vengono attivati nelle impostazioni del plugin con l’apposito interruttore. Però non danno la possibilità di modificare aspetto o posizione dei percorsi di navigazione. 

La maggior parte dei temi non prevede il supporto nativo per i breadcrumb di Rank Math, che andranno aggiunti attraverso lo shortcode del plugin o modifiche ai file PHP.

Inserire i breadcrumb di Rank Math con lo shortcode

Se usi un tema che non visualizza in automatico i breadcrumb di Rank Math, puoi inserirli con lo shortcode che trovi nelle impostazioni generali del plugin:

[rank_math_breadcrumb]

Gli shortcode di WordPress infatti funzionano a prescindere dal tema usato. 

Quindi copia il codice e incollalo dove ti serve.

Se lo posizioni dentro un contenuto specifico otterrai qualcosa del genere:

Puoi fare lo stesso anche all’interno di widget e template per articoli o pagine, proprio come abbiamo visto per lo shortcode di OceanWP.

Inserire i breadcrumb di Rank Math come codice PHP

L’ultimo metodo per inserire i breadcrumb di Rank Math consiste nell’aggiungere una stringa già pronta all’interno del file functions.php.

Per iniziare, copia la riga di codice che trovi nelle impostazioni generali del plugin.

Si tratta di:

<?php if (function_exists("rank_math_the_breadcrumbs")) rank_math_the_breadcrumbs(); ?>

Dalla barra laterale di WordPress entra in Aspetto > Editor del tema. Tieni conto che se usi un tema a blocchi la stessa funzionalità potrebbe trovarsi in Strumenti > Editor del tema.

Accertati che sia selezionato per le modifiche il tuo tema child. 

A seconda del tema, può essere necessario inserire lo snippet di codice nel file single.php oppure in header.php. Se hai dubbi dovresti sentire il tuo sviluppatore o l’assistenza di Rank Math.

In ogni caso il codice va inserito in un punto diverso del file a seconda di dove vuoi che compaiano i breadcrumb. Per esempio se vuoi visualizzarlo subito dopo o subito prima del titolo, puoi usare come riferimento il tag <title>.

Attivare i breadcrumb di Yoast SEO

Se il tuo tema supporta i breadcrumb di Yoast SEO, potrai attivarli in un attimo dalle impostazioni del plugin.

Accedi al pannello di amministrazione di WordPress e vai su SEO > Impostazioni, poi apri il menù Avanzate e apri la schermata Breadcrumb.

Alla fine della pagina trovi l’interruttore che attiva i breadcrumb per il tuo tema, di solito già ‘acceso’.

A questo punto vedrai la versione predefinita dei breadcrumb di Yoast.

Inserire i breadcrumb di Yoast

Come abbiamo visto con Astra, alcuni temi che generano anche breadcrumb propri permettono di selezionare Yoast SEO come sorgente alternativa per i breadcrumb di WordPress dalla sezione Personalizza delle impostazioni.

Quando il tema non supporta nativamente i breadcrumb di Yoast, non basta abilitarli per renderli visibili. Dovrai anche inserire delle stringhe di codice:

<?php

if ( function_exists('yoast_breadcrumb') ) {

 yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );

}

?>

In generale questa modifica va fatta nei file single.php o page.php, o entrambi, prima del titolo del contenuto, oppure alla fine del file header.php.

Nella maggior parte dei temi non-WooTheme la porzione di codice non va aggiunta al file functions.php.

Se non sai quale sia il posto migliore per incollare il codice nei file del tuo tema, puoi rivolgerti allo sviluppatore oppure fare delle prove sulla copia di staging del sito.

Personalizzare i breadcrumb di Yoast

Dalla schermata SEO > Impostazioni > Avanzate > Breadcrumb è possibile personalizzare i breadcrumb di Yoast a livello globale.

Qui trovi i campi per configurare:

• il separatore dei breadcrumb
• il testo del link per l’homepage
• un eventuale prefisso per il percorso di navigazione
• un eventuale prefisso per i breadcrumb delle pagine archivio
• un eventuale prefisso per i breadcrumb della pagina di ricerca
• il testo del link per la pagina di errore 404 WordPress.

Inoltre puoi decidere se mostrare la pagina blog nei breadcrumb ed evidenziare in grassetto il titolo della pagina corrente.

Per quanto riguarda i post type Articolo e Prodotto, puoi decidere quale tassonomia di appartenenza mostrare nel percorso di navigazione: la categoria oppure il tag, il formato o nessuna.

Per quanto riguarda le tassonomie, è possibile mostrare nei breadcrumb la pagina Blog oppure nessuna sezione d’appartenenza.

In più, come vedremo dopo, Yoast permette anche qualche modifica specifica per singolo contenuto, utile per l’ottimizzazione SEO dei breadcrumb.

Aggiungere i breadcrumb con AIOSEO

Anche il terzo plugin SEO in ordine di popolarità offre una funzionalità per aggiungere i breadcrumb in WordPress. Dopo l’installazione di All in One SEO li trovi già attivi e puoi andare a configurarli a livello globale.

Nelle impostazioni generali All in One SEO (AIOSEO) c’è un menù da cui si accede alla sezione Breadcrumb. 

In questo caso puoi scegliere se inserirli tramite:

• blocco Gutenberg
• shortcode
• widget
• codice PHP.

Il blocco AIOSEO Breadcrumb è comodo per inserire i percorsi di navigazione all’interno delle singole pagine e articoli su Gutenberg, l’editor più recente di WordPress.

Anche lo shortcode di AIOSEO può essere inserito all’interno del testo proprio come il blocco. È questo:

[aioseo_breadcrumbs]

Invece nelle impostazioni del tema in Aspetto > Widget puoi inserire i percorsi di navigazione di AIOSEO in aree widget come la barra laterale o il footer, come abbiamo già visto per OceanWP, usando anche qui il blocco AIOSEO Breadcrumb.

L’ultimo metodo consiste ancora una volta nell’inserire una stringa di codice in un file del tema come single.php, header.php o qualunque altro template del tema.

In questo caso, per aggiungere i breadcrumb su tutte le pagine la porzione da aggiungere è:

<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>

Se invece vuoi escludere la home, puoi usare:

<?php if( function_exists( 'aioseo_breadcrumbs' ) && ( !is_home() ) ) aioseo_breadcrumbs(); ?>

Personalizzare i breadcrumb di AIOSEO

Trovi le opzioni per personalizzare i breadcrumb di AIOSEO nelle Impostazioni generali, sotto i metodi di inserimento.

Sono circa le stesse che abbiamo trovato in Yoast e Rank Math e permettono di configurare – con una comoda anteprima:

• il separatore
• il link alla home
• l’eventuale prefisso dei breadcrumb
• il formato di archivi, risultati della ricerca WordPress e pagina 404.

Inoltre è possibile includere o no il link alla pagina Blog. Anche il contenuto corrente (cioè la pagina su cui si trova l’utente) può essere inserito o meno, con o senza link.

La configurazione predefinita dei breadcrumb di AIOSEO segue lo schema:
Home » Blog » Articolo

Il piano a pagamento di AIOSEO comprende anche un editor con cui creare propri modelli di breadcrumb del tutto personalizzati.

Plugin breadcrumb per WordPress

I plugin breadcrumb per WordPress sono programmi specifici per gestire la visualizzazione dei percorsi di navigazione all’interno delle pagine del CMS. Tra questi il più noto è Breadcrumb NavXT.

Inserire i breadcrumb in WordPress con Breadcrumb NavXT

Breadcrumb NavXT permette di definire l’aspetto e la posizione dei percorsi di navigazione davvero nel dettaglio. Inoltre, come Rank Math, integra lo Schema markup nei suoi percorsi di navigazione.

Configurare Breadcrumb NavXT

Per installare Breadcrumb NavXT nel pannello di amministrazione di WordPress, vai su Plugin > Aggiungi nuovo e digita Breadcrumb NavXT nella barra di ricerca.

Clicca sul pulsante Installa ora e dopo qualche secondo su Attiva.

Il plugin è già configurato con impostazioni predefinite funzionanti sulla maggior parte dei siti, ma ti dà la possibilità di personalizzarlo andando in Impostazioni > Breadcrumb NavXT dalla barra laterale.

Nella sezione Generale è possibile modificare le impostazioni globali dei breadcrumb del plugin.

Puoi personalizzare il separatore, inoltre puoi decidere se inserire:

• il link alla pagina corrente
• la paginazione degli articoli
• il link alla home.

In particolare, il plugin offre dei campi per modificare il modello del breadcrumb della home via codice. 

Una sezione analoga permette di personalizzare il modello dell’elemento pagina Blog e del sito principale (in caso di WordPress multisite). 

Quando hai terminato puoi salvare le modifiche con il pulsante in fondo alla pagina.

Nella schermata Tipi di articoli è possibile modificare le impostazioni dei breadcrumb in base al tipo di contenuto:

• Articolo
• Pagina
• Media 
• Prodotto.

Lo schema di default dei breadcrumb generati da questo plugin è del tipo: 
Nome del sito > Categoria > Post.

Se decidi di mostrare la gerarchia nella navigazione breadcrumb puoi sostituire la categoria con il genitore dell’articolo – pagina o sezione di livello superiore a cui appartiene, per esempio Blog –, oppure con data, tag, marchio e classe di spedizione in caso di prodotti woocommerce, ecc. Le opzioni sono diverse a seconda della tipologia di contenuto.

Nella sezione Tassonomie si possono personalizzare i modelli dei breadcrumb in modo specifico a seconda che si tratti di pagine di categoria, di pagine tag, pagine di formato, di marchio o categorie e tag prodotti di woocommerce.

La schermata Varie ospita le stesse opzioni per le pagine autore, data, ricerca, errore 404, ecc.

Aggiungere i breadcrumb di Breadcrumb NavXT

L’aggiunta dei breadcrumb di questo plugin avviene attraverso il tema, il codice PHP oppure con un blocco Gutenberg, mentre non sono disponibili shortcode.

Inserire i breadcrumb dal tema

Se usi Astra puoi selezionare come sorgente Breadcrumb NavXT in Personalizza > Breadcrumb, proprio come abbiamo già visto per Rank Math e Yoast.

Potresti avere un risultato del genere:

Su altri temi WordPress come Neve invece, la navigazione di Breadcrumb NavXT viene visualizzata in automatico se il plugin è installato.

Inserire i breadcrumb via PHP

Se il tuo tema non visualizza in automatico i percorsi di Breadcrumb NavXT hai sempre la possibilità di inserirli modificando il codice manualmente in header.php o single.php come abbiamo già visto per Rank Math.

Inserisci questa stringa nei file dove vuoi che appaiano i breadcrumb del plugin:

<?php if(function_exists('bcn_display')) { bcn_display(); } ?>

Inserire i breadcrumb con un blocco Gutenberg

Breadcrumb NavXT offre anche il blocco Gutenberg Breadcrumb Trail per inserire la navigazione direttamente all’interno di un contenuto dall’editor di WordPress. 

Dopo averlo cercato e selezionato vedrai comparire subito il breadcrumb nel punto di inserimento.

Nel pannello a sinistra puoi modificare le impostazioni predefinite, per esempio:

• inserire un testo prima del percorso di navigazione vero e proprio;
• disattivare i link;
• invertire l’ordine degli elementi;
• nasconderlo nella pagina iniziale del sito (front page).

Inserire i breadcrumb via widget 

Breadcrumb NavXT mette a disposizione due blocchi per inserire la navigazione all’interno degli widget di WordPress. 

Puoi sfruttare il blocco Gutenberg Breadcrumb Trail che abbiamo già visto.

Dalla barra laterale di WordPress vai in Aspetto > Widget e poi fai clic sul tasto ‘+’.

Cerca il blocco Breadcrumb Trail.

Ora puoi trascinarlo all’interno di una delle aree widget del tema che vedi nell’area di lavoro sulla destra.

Per esempio qui l’ho inserito nella barra laterale del blog:

L’altro blocco disponibile per i widget si chiama Breadcrumb NavXT.

Ha il vantaggio di offrire più opzioni, che saranno accessibili se lo selezioni dopo averlo inserito in un’area widget del tema.

È possibile definire un titolo, un prefisso, eliminare i collegamenti, ignorare la cache dei breadcrumb e nasconderli in homepage: le stesse impostazioni che abbiamo visto su Gutenberg.

Aggiungere i breadcrumb via codice

Per chi non vuole usare plugin e temi c’è sempre la possibilità di aggiungere i breadcrumb attraverso il codice, nei file del tema. In questo caso dovrai modificare sia il file functions.php che header.php o single.php.

Dopo aver controllato che sia selezionato il tuo tema child, puoi aprire il file functions.php dal pannello laterale destro.

Alla fine del file, prima del tag ?> se presente, inserisci lo snippet PHP:

function get_breadcrumb() {

echo ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</a>’;

if (is_category() || is_single()){

echo “ » ”;

the_category (‘ • ‘);

if (is_single()) {

echo “ » ”;

the_title();

}

} elseif (is_page()) {

echo “ » ”;

echo the_title();

} elseif (is_search()) {

echo “ » ”;Search Results for…

echo ‘“<em>’;

echo the_search_query();

echo ‘</em>”’;

}

}

Dopodiché in header.php, single.php o page.php dovrai aggiungere la stringa:

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

Se aggiungi la funzione in header.php potrai visualizzare i breadcrumb ovunque appaia l’intestazione.

Se la aggiungi in single.php farai comparire i breadcrumb in un punto prescelto di tutti i tuoi post.

Se vuoi configurarli anche sulle pagine, devi invece modificare il file page.php.

Definire lo stile dei breadcrumb

Se inserisci i breadcrumb manualmente dovrai anche aggiungere lo stile via CSS, cosa che può esserti utile anche quando usi dei plugin per i percorsi di navigazione e vuoi modificarne l’aspetto. 

Per aggiungere il CSS, vai nelle impostazioni del tema in Aspetto > Personalizza.

Clicca su CSS aggiuntivo in fondo alla barra laterale e incolla il tuo codice nel campo che compare.

Questo è un esempio di codice che potresti usare:

.breadcrumb {

 padding: 10px 18px;

 margin-bottom: 24px;

 list-style: none;

 background-color: #f8f8f8;

 border-radius: 6px;

}

.breadcrumb a {

 color: #3366cc;

 text-decoration: none;

}

Vuoi imparare il CSS in modo facile? Puoi usare la nostra guida.

Ottimizzare i breadcrumb per la SEO

Come tutti i testi del sito, anche i breadcrumb possono essere ottimizzati per la SEO ed è consigliabile farlo per sfruttarne a pieno le potenzialità. 

Per prima cosa puoi fare in modo che il primo livello, cioè l’elemento Home, sia un termine significativo da un punto di vista SEO: in sostanza che coincida con una parola chiave rilevante per il tuo settore.

Come ancora per il primo livello puoi scegliere:

• il nome del sito o dell’azienda;
• una parola chiave transazionale per cui vorresti posizionare la pagina iniziale del sito;
• il nome dell’azienda o del sito più la keyword commerciale che hai scelto come obiettivo.

Abbiamo visto che diversi strumenti danno la possibilità di personalizzare il testo ancora della homepage semplicemente digitandolo in un campo delle impostazioni globali.

Potresti applicare questa strategia anche sugli altri livelli della navigazione breadcrumb, trattando tutte le ancore come parole chiave che possono rafforzare il significato del contenuto agli occhi dei motori di ricerca.

Con la versione gratuita di Yoast e Rank Math per ogni pagina del sito puoi configurare il testo del link che sarà visualizzato nel breadcrumb, per mantenerlo efficace e sintetico.

Yoast infatti permette di definire l’ancora per la pagina o articolo dal metabox che compare in fondo all’editor di articoli e pagine: nella sezione Avanzate trovi proprio il campo Titolo dei breadcrumb.

Allo stesso modo in Rank Math puoi personalizzare l’ancora dal pannello del plugin disponibile nell’editor di pagine e articoli WordPress, scegliendo la tab Avanzate e poi scorrendo sino a Titolo dei breadcrumb.

Rimuovere i breadcrumb da WordPress 

Non sempre i breadcrumb sono la scelta migliore per un sito.

Se decidi di rimuoverli hai a disposizione tanti metodi quanti sono quelli per aggiungerli; infatti dovrai eliminarli in modo diverso a seconda di come li hai inseriti.

Se hai usato un tema che supporta i breadcrumb, vai in Aspetto > Personalizza e disattivali. 

In Astra per esempio, basta selezionare Nessuno nel menù Posizione dell’header e i breadcrumb scompaiono.

Se li hai attivati attraverso il tuo plugin SEO, torna nelle impostazioni del plugin, cerca la sezione Breadcrumb e disabilitali. 

In Rank Math basta spegnere l’interruttore apposito. Se il tema dovesse interferire puoi provare a disattivare e riattivare il plugin SEO in modo che la funzionalità torni disponibile.

Se hai aggiunto i percorsi di navigazione con un plugin dedicato e lo disattivi, i breadcrumb non funzioneranno più, ma dovrai eliminare anche eventuali blocchi Gutenberg e shortcode che potrebbero restare visibili lato utente.

Se li hai inseriti via codice, apri i file single.php, header.php e page.php; cerca le funzioni relative ai breadcrumb e cancellale.

Conclusioni

Come abbiamo visto in questa guida ai breadcrumb in WordPress, aggiungere i percorsi di navigazione alle pagine del sito può migliorare insieme l’esperienza utente e il posizionamento sui motori di ricerca perché aiuta persone e robot a orientarsi e navigare tra le pagine web. 

Qui abbiamo esplorato i diversi metodi con cui potresti inserire i breadcrumb sul sito: sfruttando funzionalità presenti nel tuo tema e nel tuo plugin SEO o i loro shortcode, oppure installando uno strumento dedicato e infine modificando i file PHP.

Ora sappiamo come adattare alle nostre esigenze la posizione e lo stile dei percorsi di navigazione, sia all’interno dei contenuti che nelle aree widget del tema, e come renderli più efficaci per la SEO.

E tu hai provato ad aggiungere i breadcrumb in WordPress? È stato facile? Hai ottenuto i risultati che ti aspettavi? Se ti va, parliamone nei commenti.