Se stai cercando un modo per rendere il tuo sito web WordPress più facile da navigare, allora ti consigliamo di aggiungere i link breadcrumb.
La navigazione breadcrumb indica agli utenti dove si trovano su un sito web rispetto alla homepage. Questo percorso breadcrumb viene quindi visualizzato anche nei risultati di ricerca, il che fa risaltare il tuo sito web.
Utilizziamo i breadcrumb sui nostri siti web e abbiamo scoperto che questa funzionalità rende più facile per i lettori spostarsi tra le diverse pagine. E in questo articolo, ti mostreremo come visualizzare i link di navigazione breadcrumb in WordPress.
Cos'è la navigazione breadcrumb e perché ne hai bisogno?
La navigazione breadcrumb è un termine usato per descrivere un menu di navigazione gerarchico presentato come un percorso di link. Viene spesso utilizzata come navigazione secondaria che consente agli utenti di risalire la gerarchia delle pagine del sito web.
I link di navigazione breadcrumb sono diversi dal sistema di menu di navigazione predefinito in WordPress.
La navigazione breadcrumb aiuta gli utenti a navigare nel tuo sito web e aiuta i motori di ricerca a comprendere la struttura e la gerarchia dei link su una pagina web.
Se i tuoi breadcrumb sono impostati nel modo giusto, i motori di ricerca come Google li visualizzeranno insieme al titolo della pagina nei risultati di ricerca. Questo conferisce al tuo sito web maggiore visibilità nei risultati di ricerca e aumenta il tuo tasso di clic.
I metodi in questa guida ti aiuteranno a impostare correttamente i breadcrumb utilizzando lo schema markup. Schema è un codice di markup intelligente che aiuta Google a identificare i tuoi breadcrumb in modo che vengano visualizzati nei risultati di ricerca.
Detto questo, diamo un'occhiata a come aggiungere link di navigazione breadcrumb in WordPress. Ti mostreremo due metodi, e puoi scegliere quello che funziona meglio per te:
- Method 1: Adding Breadcrumb Navigation in WordPress Using All in One SEO (Recommended)
- Metodo 2: Aggiungere la navigazione breadcrumb con Breadcrumb NavXT
- Tutorial video
Metodo 1: Aggiungere la navigazione breadcrumb in WordPress utilizzando All in One SEO (Consigliato)
Questo metodo è più semplice ed è consigliato a tutti gli utenti WordPress.
Per questo metodo, utilizzeremo All in One SEO per WordPress, che è il miglior plugin SEO per WordPress sul mercato. Ti aiuta a migliorare facilmente la tua SEO su WordPress senza alcuna competenza tecnica. Viene inoltre fornito con una funzionalità di breadcrumb facile da usare.
Nota: Esiste anche una versione gratuita di All in One SEO disponibile con funzionalità limitate, inclusi i breadcrumb. Tuttavia, consigliamo di passare al plugin a pagamento per accedere a funzionalità premium come un assistente di link, sitemap avanzate e altro ancora.
Dopo l'attivazione, verrai indirizzato alla procedura guidata di configurazione del plugin. Puoi seguire le istruzioni sullo schermo per configurare il plugin.
Hai bisogno di aiuto con la configurazione? Consulta il nostro tutorial passo passo su come installare e configurare All in One SEO.
Successivamente, devi visitare la pagina All in One SEO » Impostazioni generali e passare alla scheda ‘Breadcrumbs’.
Il markup dello schema breadcrumbs viene aggiunto automaticamente da All in One SEO al codice del tuo sito web in modo che i motori di ricerca possano trovarlo.
Tuttavia, se desideri visualizzare anche i link di navigazione breadcrumbs sul tuo sito web, devi attivare l'opzione ‘Abilita Breadcrumbs’.
Attivando l'interruttore puoi vedere le diverse impostazioni di visualizzazione dei breadcrumbs che puoi utilizzare sul tuo sito web WordPress.
Ci sono quattro modi per visualizzare il percorso di navigazione breadcrumbs sul tuo sito web WordPress.
1. Aggiungere la navigazione Breadcrumb utilizzando lo Shortcode
Il metodo dello shortcode è semplice e ti permette di visualizzare i link di navigazione breadcrumb nei tuoi post e pagine di WordPress o nelle pagine dei prodotti sul tuo negozio online.
Modifica semplicemente il post, la pagina o il prodotto e aggiungi il seguente shortcode dove vuoi visualizzare il percorso di navigazione breadcrumb:
[aioseo_breadcrumbs]
Se stai usando l'editor a blocchi predefinito, lo shortcode verrà automaticamente convertito nel blocco Shortcode.
Ora puoi salvare il tuo post o pagina e visualizzarlo in anteprima per vedere il menu di navigazione breadcrumb in azione.
Ecco come appariva sul nostro sito di prova.
2. Aggiungere la navigazione breadcrumb utilizzando il blocco Gutenberg
Ora, se non vuoi usare l'opzione shortcode o non ricordi lo shortcode, puoi visualizzare la navigazione breadcrumb utilizzando il blocco AIOSEO – Breadcrumbs.
Modifica semplicemente il post o la pagina in cui desideri visualizzare la navigazione breadcrumb e aggiungi il blocco AIOSEO – Breadcrumbs.
Il plugin caricherà quindi un'anteprima live dei tuoi link di navigazione breadcrumb e li visualizzerà nell'area del contenuto.
Non dimenticare di aggiornare o pubblicare le tue modifiche.
3. Aggiungere la navigazione breadcrumb utilizzando il widget
I due metodi sopra descritti richiedono di aggiungere uno shortcode o un blocco in ogni post o pagina in cui si desidera visualizzare i link di navigazione breadcrumb.
E se volessi visualizzare i breadcrumb automaticamente per ogni post o pagina?
Il widget AIOSEO Breadcrumbs ti permette di farlo facilmente.
Vai semplicemente alla pagina Aspetto » Widget e aggiungi il blocco widget AIOSEO – Breadcrumbs. Puoi aggiungerlo alla barra laterale del tuo sito, al footer o a qualsiasi area widget.
Puoi fornire un titolo per il widget o lasciarlo vuoto se preferisci.
Non dimenticare di fare clic sul pulsante 'Aggiorna' per salvare le tue impostazioni.
Ora puoi visitare il tuo sito web e vedere il menu di navigazione breadcrumb su tutti i post e le pagine.
4. Aggiungere la navigazione breadcrumb tramite codice
Questo metodo ti permette di visualizzare i link di navigazione breadcrumb esattamente dove li desideri. Tuttavia, richiede l'aggiunta di codice ai file del tuo tema WordPress.
Se non l'hai mai fatto prima, non dimenticare di consultare il nostro articolo su come aggiungere snippet di codice in WordPress.
Innanzitutto, devi decidere dove visualizzare i link breadcrumb. Il posto più comune è sotto il titolo del singolo post, pagina o prodotto.
I temi WordPress utilizzano file di template per visualizzare diverse sezioni del tuo sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php situato all'interno della cartella template-parts del tuo tema.
Consulta il nostro foglio di riferimento per trovare quali file modificare in un tema WordPress.
Dopodiché, devi modificare il file del tuo tema utilizzando un client FTP. Consulta la nostra guida su come usare FTP per caricare file su WordPress per le istruzioni.
Quindi, inserisci il seguente codice dove desideri visualizzare i link di navigazione breadcrumb:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
Non dimenticare di salvare le modifiche e caricare nuovamente il file sul tuo sito web.
Ora puoi visitare il tuo sito web per vedere i link breadcrumb in azione.
Modificare come vengono visualizzati i link breadcrumb in AIOSEO
Per impostazione predefinita, All in One SEO utilizza un template per visualizzare i tuoi link di navigazione breadcrumb. Contiene un link alla tua home, categoria, pagina genitore e titolo del post o della pagina separati dal simbolo '»'.
Puoi cambiarlo visitando la pagina All in One SEO » Impostazioni generali e andando alla scheda 'Breadcrumbs'. Successivamente, scorri semplicemente verso il basso fino alla sezione Impostazioni Breadcrumb.
Da qui, puoi cambiare il separatore, mostrare o nascondere il link home, aggiungere un prefisso e altro ancora.
Una volta terminato, non dimenticare di salvare le tue impostazioni.
Metodo 2: Aggiungere la navigazione breadcrumb con Breadcrumb NavXT
Questo metodo può essere utilizzato con qualsiasi altro plugin SEO per WordPress. È facile da usare se hai un tema compatibile, ma se non ce l'hai, dovrai modificare i file del tuo tema per visualizzare i link di navigazione breadcrumb.
La prima cosa da fare è installare e attivare il plugin Breadcrumb NavXT. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.
Dopo l'attivazione, devi 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, puoi personalizzare le impostazioni secondo necessità.
La pagina delle impostazioni è divisa in diverse sezioni. Nella scheda delle impostazioni generali, puoi cambiare lo stile e le impostazioni dei tuoi breadcrumb.
Noterai anche che questi template di link utilizzano il markup Schema.org nel tag del link.
La scheda dei tipi di post nelle impostazioni del plugin ti consente di impostare i link breadcrumb per post, pagine e qualsiasi tipo di post personalizzato.
Puoi scegliere come vuoi visualizzare la gerarchia dei tuoi post. Per impostazione predefinita, il plugin utilizzerà la gerarchia 'Titolo del sito > Categoria > Titolo del post'.
Puoi sostituire categorie con tag, date o genitore del post e cambiare il separatore.
Le schede Tassonomie e Varie hanno modelli simili per i tuoi link di navigazione breadcrumb.
Non dimenticare di salvare le modifiche al termine.
Breadcrumb NavXT offre molteplici modi per visualizzare i link di navigazione breadcrumb sul tuo sito web.
1. Visualizza la navigazione breadcrumb con il supporto del tema
Alcuni dei temi WordPress più popolari includono un'opzione integrata per visualizzare la navigazione breadcrumb scegliendo Breadcrumb NavXT o il tuo plugin SEO di WordPress come sorgente.
Ad esempio, se stai utilizzando il tema Sydney, puoi andare alla pagina Aspetto » Personalizza. Successivamente, fai clic sul menu ‘Generale’ e poi fai clic sull’opzione ‘Breadcrumbs’.
Da lì, dovrai scegliere ‘Breadcrumb NavXT’ nel menu a discesa ‘Generatore di breadcrumb’.
Puoi anche scegliere dove vuoi che vengano visualizzati i tuoi breadcrumb selezionando un’opzione dall’elenco a discesa ‘Posizione’.
Se stai visualizzando un singolo post o pagina, vedrai un’anteprima live dei tuoi link di navigazione breadcrumb.
Non dimenticare di fare clic sul pulsante 'Pubblica' per salvare le modifiche.
2. Visualizza i link di navigazione con il blocco Breadcrumb Trail
Puoi anche visualizzare i link di navigazione breadcrumb utilizzando il blocco Breadcrumb Trail.
Dirigiti semplicemente al tuo editor di contenuti di WordPress e quindi aggiungi il blocco Breadcrumb Trail dove desideri mostrare i link di navigazione.
Successivamente, puoi aggiornare o pubblicare il tuo contenuto.
Dopodiché, visita il tuo sito web per vedere i link di navigazione in azione.
3. Aggiungere la navigazione a breadcrumb utilizzando un widget
Il plugin fornisce anche un widget che puoi utilizzare per visualizzare la navigazione a breadcrumb nella barra laterale o in qualsiasi area pronta per i widget.
Innanzitutto, vai alla pagina Aspetto » Widget e aggiungi il blocco widget 'Breadcrumb Trail' all'area widget del tuo sito, come la barra laterale o il piè di pagina.
Le impostazioni predefinite del widget funzionerebbero per la maggior parte dei siti web, ma puoi modificarle se necessario. Ad esempio, potresti voler nascondere il percorso nella pagina principale.
Non dimenticare di fare clic sul pulsante 'Aggiorna' per salvare le impostazioni del widget.
4. Aggiungere la navigazione breadcrumb tramite codice
Il plugin offre anche un metodo di codice per visualizzare i link di navigazione a breadcrumb per utenti avanzati.
Innanzitutto, è necessario connettersi al proprio sito WordPress utilizzando un client FTP. Successivamente, navigare nella cartella del tema WordPress corrente situata nella directory /wp-content/themes/.
I temi WordPress utilizzano file di template per visualizzare diverse sezioni del tuo sito web. Ad esempio, molti temi utilizzano un file chiamato content-single.php situato all'interno della cartella template-parts del tuo tema.
Consulta il nostro foglio di riferimento per trovare quali file modificare in un tema WordPress.
Apri il file di template per modificarlo, quindi inserisci il seguente codice dove desideri visualizzare il percorso dei breadcrumb:
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
Non dimenticare di salvare le modifiche e caricare nuovamente il file sul tuo sito web.
Ora puoi visitare il tuo sito web per vedere il percorso dei link dei breadcrumb in azione.
Tutorial video
Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare i link di navigazione dei breadcrumb in WordPress. Potresti anche voler consultare la nostra guida su come mostrare menu diversi agli utenti connessi in WordPress o come aggiungere un mega menu sul tuo sito WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Il mio tema aveva un problema con la funzione breadcrumbs, non mi permetteva di cliccare sull'elemento breadcrumb, mostrava solo il breadcrumb.
Non so se fosse codificato così o fosse un errore.
Ma dato che avevo AIOSEO, ho usato la sua funzione breadcrumbs e mi è stato facile risalire la gerarchia del sito.
AIOSEO ha risolto il mio problema.
Dayo Olobayo
Grazie per questo articolo informativo. Ho aggiunto il widget breadcrumb di aioseo e mostra automaticamente i breadcrumb per i miei post del blog. Tuttavia, ho notato che visualizza i breadcrumb sulla home page, cosa che non mi piace. C'è un modo per risolvere questo problema per favore?
Inoltre, noto dallo screenshot qui sopra che i tuoi breadcrumb sembrano accattivanti rispetto a quelli che ho sul mio blog. C'è un modo per personalizzarli?
PS: Uso il plugin aioseo lite.
Supporto WPBeginner
Dipenderebbe dal metodo utilizzato per aggiungere i breadcrumb al tuo sito per come rimuoverli specificamente dalla homepage. Per i nostri breadcrumb, questi sono attualmente qualcosa che abbiamo stilizzato specificamente con il nostro tema.
Amministratore
Dayo Olobayo
Riguardo ai breadcrumb che appaiono sulla mia homepage, ho contattato il supporto di aioseo e mi hanno fornito un codice CSS che ha risolto il problema. Grazie per la tua risposta.
Steven Jæger
Ho provato diverse varianti di breadcrumb, anche NavXT. I breadcrumb appaiono e tutto sembra a posto.
Il mio menu principale si basa su pagine. I miei articoli sono creati come post, li aggiungo nelle categorie. È quando visito un articolo e provo a usare un link nel breadcrumb per tornare indietro di un passo che le cose vanno storte.
Supporto WPBeginner
Potresti voler salvare nuovamente i tuoi permalink per assicurarti che non ci sia stato un intoppo, altrimenti, dovresti contattare il supporto del plugin che stai attualmente utilizzando affinché possano dare un'occhiata.
Amministratore
Surjeet Kumar Verma
Grazie per aver condiviso contenuti preziosi sui breadcrumb in WordPress. Mi piace molto.
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Rintesh Roy
Il plugin non è affatto documentato. Almeno, non ho potuto trovarne.
Supporto WPBeginner
The documentation for the plugin is linked on the plugin’s page
Amministratore
Elizabeth Morgan
Sto usando il plugin Breadcrumb NavXT e ho aggiunto il codice che hai suggerito al mio file header.php e mi ha dato questo errore:
“Le modifiche al tuo codice PHP sono state annullate a causa di un errore alla riga 68 del file wp-content/themes/generatepress/header.php. Correggi e prova a salvare di nuovo.
errore di sintassi, '<' inatteso, previsto fine del file"
Cosa devo fare a riguardo?
Supporto WPBeginner
Ci sono alcune possibili ragioni, potresti voler dare un'occhiata al nostro articolo qui: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Amministratore
Varun
Grazie, finalmente il problema è risolto
Supporto WPBeginner
Glad our recommendations could help
Amministratore
Hammad Rashid
Il plugin è fantastico... Grazie!
Supporto WPBeginner
Glad we could recommend it
Amministratore
Andres
Ciao WPBeginner,
Post incredibile.
Mi chiedo quanto segue.
Come fai a far apparire il breadcrumb "home" (nel tuo caso WPBEGINNER) nei blog e nei post ma non nella tua pagina HOME.
Voglio dire, quando vai "home" non vedo il breadcrumb, ma quando clicco su un'altra pagina vedo il breadcrumb.
Grazie mille per il tuo tempo.
Staff editoriale
Nel nostro tema, lo abbiamo impostato per aggiungere breadcrumb solo nelle pagine singole e non nel modello della homepage.
Amministratore
Manish Ransubhe
Ciao, non sto usando alcun plugin e non ho mai abilitato i Breadcrumb.
Perché i miei risultati di ricerca mostrano breadcrumb, aiutami a disabilitarli
Grazie
Ravi Singh
è successo lo stesso problema anche a me. Quindi ho controllato il pannello del mio tema e il mio tema aveva abilitato i breadcrumb. puoi anche controllare il pannello del tuo tema per maggiori informazioni a riguardo. e stavo usando il tema Newspaper. Quindi, se stai anche tu usando questo tema, è quello che ti crea difficoltà. Disabilitalo da lì.
Dua Centre
Ho usato il plugin Yoast SEO. I breadcrumb vengono visualizzati sulle mie pagine web ma non nei risultati di ricerca di Google. Quando inizieranno a essere visualizzati anche nei risultati di ricerca di Google?
Walter
Ciao! Sai se è possibile inserire i breadcrumb all'interno del menu? Devo progettare un sito web con un menu laterale verticale e il cliente vuole avere i breadcrumb in fondo al menu.
DUy
È possibile cambiare la dimensione e il colore del font dei Breadcrumb?
grazie
Sameer
Salve,
Sto usando i breadcrumb con il metodo Yoast SEO, ma vengono visualizzati solo sulla homepage e non su Google Search.
Ad es. la struttura ideale dovrebbe essere Dominio.com>Categoria ma viene visualizzato come Dominio.com/Categoria. puoi dirmi come implementarlo?
Joshua
Ciao.. Sto usando breadcrumb navxt e il suo widget funziona. Ho inserito il codice per header.php usando il plugin “insert header and footer” ma non vedo alcuna modifica sul mio sito anche dopo aver salvato e aggiornato.
Ti prego di aiutarmi, perché l'area widget funziona ma nessun breadcrumb viene visualizzato nell'header del mio sito.
juan luis
Ciao. Ho paura di manipolare i codici. Nel caso qualcosa vada storto, posso semplicemente eliminare il codice inserito senza conseguenze?
Supporto WPBeginner
Ciao Juan,
Se non vuoi usare il metodo del codice, allora puoi provare il metodo del plugin. In questo modo sarai in grado di annullare le modifiche semplicemente disattivando il plugin.
Amministratore
Nate Balcom
A proposito, sto usando il codice Yoast che hai sopra e non visualizza la gerarchia corretta. Omette un link per categorie, progetti, gallerie. Tutto ciò che non è un post viene gestito allo stesso modo. Ci si avvicina, ma non è corretto.
Nate Balcom
Grazie per aver pubblicato questo. Stavo cercando un modo per visualizzare correttamente il mio percorso di breadcrumb per i crawler. Diventa un po' complicato con categorie, progetti, gallerie e simili. Stavo codificando manualmente i miei, ma il php gestisce la gerarchia nell'ordine errato. Questo è un grande aiuto.
Anna
Il mio child theme (GeneratePress, scaricato dal loro sito) non ha un file header.php.
Ho aggiunto il codice nel file header.php del tema padre GP e i breadcrumb ora funzionano. Ma quando aggiorno GP...?
subhan
Copia semplicemente il file header.php nella cartella del child theme di GeneratePress.
Sunil
Grazie per l'ottimo post. Saluti!
Raymond Chukwuman
Grazie mille. Sta funzionando davvero sul mio sito web, Dio ti benedica
Abiodun
Ho seguito i passaggi, ma non ha funzionato davvero per i post. Ho visto solo 'Breadcrumbs Home' sulla mia homepage. Come faccio a farli apparire per i miei post per favore? Sto usando Yoast SEO
Supporto WPBeginner
I breadcrumbs dovrebbero apparire automaticamente. Se non lo fanno, contatta il supporto del tuo tema.
Amministratore
Abiodun
Ha funzionato... ma la categoria non appare prima dei miei post, ottengo solo Home>>titolo del post. Come faccio a far apparire le categorie prima dei post?
Michelle
Ehi! Devi impostare una pagina genitore per la pagina che stai pubblicando. La mia mostrava solo home > pagina corrente finché non ho impostato la pagina corrente come 'figlia' della pagina degli articoli, e la pagina degli articoli come 'figlia' della homepage. Puoi farlo nell'editor di pagine.
JOY
Great! This is really useful! Thanks a lot!
malek
grazie, molto utile