Volete visualizzare i link di navigazione breadcrumb sul vostro sito WordPress?
La navigazione a briciole indica agli utenti dove si trovano in un sito web rispetto alla homepage. Questo percorso a briciole di pane viene visualizzato anche nei risultati di ricerca, facendo risaltare il vostro sito web.
In questo articolo vi mostreremo come visualizzare i link di navigazione breadcrumb in WordPress.
Cos’è la navigazione Breadcrumb e perché ne avete bisogno?
La navigazione a briciole è un termine usato per descrivere un menu di navigazione gerarchico presentato come una scia di link. È spesso utilizzata come navigazione secondaria che consente agli utenti di salire nella gerarchia delle pagine del sito web.
I link di navigazione breadcrumb sono diversi dal sistema di menu di navigazione predefinito di WordPress.
Lo scopo della navigazione a briciole di pane è quello di aiutare gli utenti a navigare all’interno del sito web. Inoltre, aiuta i motori di ricerca a comprendere la struttura e la gerarchia dei link di una pagina web.
Se le briciole di pane sono impostate nel modo giusto, i motori di ricerca come Google le visualizzeranno insieme al titolo della pagina nei risultati di ricerca. In questo modo il vostro sito web acquista maggiore visibilità nei risultati di ricerca e aumenta la percentuale di clic.
I metodi di questa guida vi aiuteranno a impostare correttamente le briciole di pane utilizzando il markup Schema. Schema è un codice di markup intelligente che aiuta Google a identificare le briciole di pane in modo che vengano visualizzate nei risultati di ricerca.
Detto questo, vediamo come aggiungere i link di navigazione breadcrumb in WordPress. Vi mostreremo due metodi e potrete scegliere quello che funziona meglio per voi:
Video tutorial
Se preferite le istruzioni scritte, continuate a leggere.
Metodo 1: Aggiungere la navigazione Breadcrumb in WordPress usando All in One SEO (consigliato)
Questo metodo è più semplice e consigliato a tutti gli utenti di WordPress.
Per questo metodo, utilizzeremo All in One SEO for WordPress, che è il miglior plugin SEO per WordPress sul mercato. Vi aiuta a migliorare facilmente la SEO di WordPress senza alcuna competenza tecnica. Inoltre, è dotato di una funzione di briciole di pane facile da usare.
Nota: è disponibile anche una versione gratuita di All in One SEO con funzioni limitate, tra cui le briciole di pane. Tuttavia, si consiglia di passare al plugin a pagamento per avere accesso a funzioni premium come l’assistente ai link, le sitemap avanzate e altro ancora.
Dopo l’attivazione, si accede alla procedura guidata di configurazione del plugin. È possibile seguire le istruzioni sullo schermo per configurare il plugin.
Avete bisogno di aiuto per la configurazione? Consultate il nostro tutorial passo-passo su come installare e configurare All in One SEO.
Successivamente, è necessario visitare la pagina All in One SEO ” Impostazioni generali e passare alla scheda ‘Briciole di pane’.
Il markup dello schema breadcrumbs viene aggiunto automaticamente da All in One SEO al codice del vostro sito web in modo che i motori di ricerca possano trovarlo.
Tuttavia, se si desidera visualizzare i link di navigazione breadcrumb anche sul proprio sito web, è necessario attivare l’opzione “Abilita briciole di pane”.
L’attivazione della levetta consente di visualizzare le diverse impostazioni di visualizzazione delle briciole di pane che è possibile utilizzare sul proprio sito web WordPress.
Esistono quattro modi per visualizzare il percorso di navigazione breadcrumb sul vostro sito web WordPress.
1. Aggiunta di una navigazione Breadcrumb con lo Shortcode
Il metodo shortcode è semplice e consente di visualizzare i link di navigazione breadcrumb nei post e nelle pagine di WordPress o nelle pagine dei prodotti del vostro negozio online.
È sufficiente modificare il post, la pagina o il prodotto e aggiungere il seguente shortcode nel punto in cui si desidera visualizzare il percorso di navigazione breadcrumb:
[aioseo_breadcrumbs]
Se si utilizza l’editor di blocchi predefinito, lo shortcode verrà convertito automaticamente nel blocco Shortcode.
Ora è possibile salvare il post o la pagina e visualizzarne l’anteprima per vedere il menu di navigazione breadcrumb in azione.
Ecco come appariva sul nostro sito di prova.
2. Aggiunta di una navigazione Breadcrumb con il blocco Gutenberg
Se non si vuole utilizzare l’opzione shortcode o non si ricorda lo shortcode, è possibile visualizzare la navigazione a briciole di pane utilizzando il blocco AIOSEO – Breadcrumbs.
È sufficiente modificare il post o la pagina in cui si desidera visualizzare la navigazione a briciole di pane e aggiungere il blocco AIOSEO – Briciole di pane.
Il plugin caricherà quindi un’anteprima live dei link di navigazione breadcrumb e la visualizzerà nell’area dei contenuti.
Non dimenticate di aggiornare o pubblicare le modifiche.
3. Aggiunta di una navigazione Breadcrumb tramite un widget
I due metodi precedenti richiedono l’aggiunta di uno shortcode o di un blocco in ogni post o pagina in cui si desidera visualizzare i link di navigazione breadcrumb.
E se si volesse visualizzare automaticamente le briciole di pane per ogni post o pagina?
Il widget Breadcrumbs di AIOSEO vi permette di farlo facilmente.
Basta andare alla pagina Aspetto ” Widget e aggiungere il blocco widget AIOSEO – Breadcrumbs. È possibile aggiungerlo alla barra laterale del sito, al piè di pagina o a qualsiasi area widget.
È possibile fornire un titolo per il widget o lasciarlo vuoto, se si preferisce.
Non dimenticate di fare clic sul pulsante “Aggiorna” per memorizzare le impostazioni.
Ora è possibile visitare il sito web e vedere il menu di navigazione breadcrumb su tutti i post e le pagine.
4. Aggiunta di una navigazione Breadcrumb con il codice
Questo metodo consente di visualizzare i link di navigazione delle briciole di pane esattamente dove si desidera. Tuttavia, richiede l’aggiunta di codice ai file del tema di WordPress.
Se non l’avete mai fatto prima, non dimenticate di consultare il nostro articolo su come aggiungere snippet di codice in WordPress.
Innanzitutto, è necessario decidere dove visualizzare i link breadcrumb. Il posto più comune per visualizzare i link breadcrumb è sotto il titolo del singolo post, della pagina o del prodotto.
Itemi di WordPress utilizzano file modello per visualizzare le diverse sezioni del sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php che si trova all’interno della cartella template-parts del tema.
Consultate la nostra scheda informativa per scoprire quali file modificare in un tema WordPress.
Successivamente, è necessario modificare il file del tema utilizzando un client FTP. Per le istruzioni, consultare la nostra guida su come usare FTP per caricare i file su WordPress. Quindi, inserire il seguente codice dove si desidera visualizzare i link di navigazione breadcrumb:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
Non dimenticate di salvare le modifiche e di caricare il file sul vostro sito web.
Ora potete visitare il vostro sito web per vedere i link breadcrumb in azione.
Modifica della modalità di visualizzazione dei link del Breadcrumb in AIOSEO
Per impostazione predefinita, All in One SEO utilizza un modello per visualizzare i link di navigazione. Esso contiene un link alla home, alla categoria, alla pagina madre e al titolo del post o della pagina, separati dal simbolo “”.
È possibile modificarlo visitando la pagina All in One SEO ” Impostazioni generali e dirigendosi verso la scheda “Briciole di pane”. Quindi, è sufficiente scorrere verso il basso fino alla sezione Impostazioni delle briciole di pane.
Da qui è possibile modificare il separatore, mostrare o nascondere il link alla home, aggiungere un prefisso e altro ancora.
Una volta terminato, non dimenticate di memorizzare le impostazioni.
Metodo 2: Aggiungere la navigazione a briciole di pane con Breadcrumb NavXT
Questo metodo può essere utilizzato con qualsiasi altro plugin SEO per WordPress. È facile da usare se si dispone di un tema compatibile, ma in caso contrario è necessario modificare i file del tema per visualizzare i link di navigazione breadcrumb.
La prima cosa da fare è installare e attivare il plugin Breadcrumb NavXT. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Breadcrumb NavXT per configurare le impostazioni del plugin.
Le impostazioni predefinite dovrebbero funzionare per la maggior parte dei siti web. Tuttavia, è possibile personalizzare le impostazioni in base alle esigenze.
La pagina delle impostazioni è suddivisa in diverse sezioni. Nella scheda Impostazioni generali è possibile modificare lo stile e le impostazioni delle briciole di pane.
Si noterà anche che questi modelli di link utilizzano il markup Schema.org nel tag del link.
La scheda Tipi di post nelle impostazioni del plugin consente di impostare i link breadcrumb per i post, le pagine e qualsiasi tipo di post personalizzato.
È possibile scegliere come visualizzare la gerarchia dei post. Per impostazione predefinita, il plugin utilizza la gerarchia “Titolo del sito > Categoria > Titolo del post”.
È possibile sostituire le categorie con tag, date o genitori dei post e modificare il separatore.
Le schede Tassonomie e Varie presentano modelli simili per i link di navigazione breadcrumb.
Non dimenticate di salvare le modifiche una volta terminate.
Breadcrumb NavXT offre diversi modi per visualizzare i link di navigazione breadcrumb sul vostro sito web.
1. Visualizzazione della navigazione Breadcrumb con il supporto del tema
Alcuni dei temi WordPress più diffusi sono dotati di un’opzione integrata per visualizzare la navigazione a briciole di pane, scegliendo come fonte Breadcrumb NavXT o il plugin SEO di WordPress.
Ad esempio, se si utilizza Astra, si può andare alla pagina Aspetto ” Personalizzazione e fare clic sul menu ‘Briciole di pane’.
Da qui, si sceglierà dove visualizzare le briciole di pane nel menu a tendina “Posizione dell’intestazione”.
In ‘Breadcrumb Source’, è necessario scegliere ‘Breadcrumb NavXT’.
Se state visualizzando un singolo post o una pagina, vedrete un’anteprima in tempo reale dei vostri link di navigazione breadcrumb.
Non dimenticate di fare clic sul pulsante “Pubblica” per salvare le modifiche.
2. Visualizzazione dei link di navigazione con il blocco Breadcrumb Trail
È inoltre possibile visualizzare i link di navigazione delle briciole di pane utilizzando il blocco Breadcrumb Trail.
È sufficiente andare nell’editor dei contenuti di WordPress e aggiungere il blocco Breadcrumb Trail nel punto in cui si desidera mostrare i link di navigazione.
Successivamente, è possibile aggiornare o pubblicare i contenuti.
Poi, visitate il vostro sito web per vedere i link di navigazione in azione.
3. Aggiunta della navigazione a briciole di pane tramite un widget
Il plugin fornisce anche un widget che può essere utilizzato per visualizzare la navigazione a briciole di pane nella barra laterale o in qualsiasi area predisposta per i widget.
Per prima cosa, andare alla pagina Aspetto ” Widget e aggiungere il blocco widget “Breadcrumb Trail” all’area widget del sito, come la barra laterale o il piè di pagina.
Le impostazioni predefinite dei widget vanno bene per la maggior parte dei siti web, ma è possibile modificarle se necessario. Ad esempio, si potrebbe voler nascondere il percorso nella prima pagina.
Non dimenticate di fare clic sul pulsante “Aggiorna” per memorizzare le impostazioni del widget.
4. Aggiunta di una navigazione Breadcrumb con il codice
Il plugin offre anche un metodo di codice per visualizzare i link di navigazione breadcrumb per gli utenti avanzati.
Per prima cosa, dovete collegarvi al vostro sito WordPress utilizzando un client FTP. Dopodiché, navigare nella cartella del tema corrente di WordPress, situata all’interno della directory /wp-content/themes/.
I temi di WordPress utilizzano file modello per visualizzare le diverse sezioni del sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php che si trova all’interno della cartella template-parts del tema.
Consultate la nostra scheda informativa per scoprire quali file modificare in un tema WordPress.
Aprire il file del modello per modificarlo e inserire il seguente codice nel punto in cui si desidera visualizzare il percorso delle briciole di pane:
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
Non dimenticate di salvare le modifiche e di caricare il file sul vostro sito web.
Ora potete visitare il vostro sito web per vedere il percorso dei link breadcrumb in azione.
Speriamo che questo articolo vi abbia aiutato a capire come visualizzare i link di navigazione breadcrumb in WordPress. Potreste anche voler consultare la nostra guida su come ottenere più traffico sul vostro sito WordPress o la nostra vetrina dei migliori registrar di nomi di dominio.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Steven Jæger says
I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.
My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.
WPBeginner Support says
You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.
Admin
Surjeet Kumar Verma says
Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.
WPBeginner Support says
Glad our guide was helpful
Admin
Rintesh Roy says
The plugin is not at all documented. At least, I could not find any.
WPBeginner Support says
The documentation for the plugin is linked on the plugin’s page
Admin
Elizabeth Morgan says
I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:
“Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.
syntax error, unexpected ‘<', expecting end of file"
What do I do about this?
WPBeginner Support says
There are a few possible reasons, you may want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Admin
Varun says
Thank you finally problem is solved
WPBeginner Support says
Glad our recommendations could help
Admin
Hammad Rashid says
The plugin is awesome…. Thank You!
WPBeginner Support says
Glad we could recommend it
Admin
Andres says
Hi WPBeginner,
Amazing post.
I wonder the following.
How do you make the “home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.
I mean, when you go “home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.
Thanks a lot for your time.
Editorial Staff says
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
Admin
Manish Ransubhe says
Hello, I am not using any plugin and I have never enabled Breadcrumbs.
Why my search Result showing breadcrumbs help me to disable this
Thank you
Ravi Singh says
same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.
Dua Centre says
I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?
Walter says
Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.
DUy says
Is it posible to change the font size and the font color of Breadcrumb?
thanks
Sameer says
Hello,
I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.
Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?
Joshua says
Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using “insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.
Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.
juan luis says
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
WPBeginner Support says
Hi Juan,
If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.
Admin
Nate Balcom says
By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.
Nate Balcom says
Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.
Anna says
My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.
I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?
subhan says
Just copy the header.php to the the generate press child theme forlder.
Sunil says
Thanks for great post. Cheers!
Raymond Chukwuman says
Thank you so much. It is really working on my website God bless you
Abiodun says
I followed the steps, didn’t really work for me with the posts. I just saw the ‘Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO
WPBeginner Support says
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
Admin
Abiodun says
It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?
Michelle says
Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ‘child’ of the articles page, and the articles page as ‘child’ of the homepage. you can do it in the page editor.
JOY says
Great! This is really useful! Thanks a lot!
malek says
thanks you , really usefull