Cerchi un modo semplice per aggiungere la navigazione breadcrumb al tuo sito?
Ci sono vantaggi SEO e per l'utente nell'aggiungere la navigazione breadcrumb.
In questo tutorial, imparerai come aggiungere la navigazione breadcrumb e alcune opzioni per personalizzare i tuoi percorsi di breadcrumb.
In questo articolo
Cos'è la Navigazione Breadcrumb?
I breadcrumb sono piccoli link che mostrano agli utenti il percorso che hanno seguito per raggiungere la pagina corrente.
Questi link sono anche chiamati percorso di breadcrumb.
Il termine deriva dalla fiaba di Hansel e Gretel. Hansel lascia una scia di briciole di pane mentre lui e sua sorella entrano nel bosco. Spera di usare quelle briciole per ritrovare la strada di casa.
Vantaggi dei Breadcrumb
I breadcrumb aiutano i motori di ricerca a comprendere l'argomento della tua pagina e la gerarchia del tuo sito.
Questi breadcrumb possono aiutare la tua pagina a posizionarsi per le sue parole chiave target o correlate.
E poiché i percorsi di breadcrumb sono link interni, possono anche aiutare i motori di ricerca a scansionare il tuo sito.
Schema Markup
C'è anche un vantaggio SEO nell'aggiungere breadcrumb schema markup alle tue pagine web. Questo tipo di codice HTML aiuta Google a comprendere meglio la tua pagina.
I plugin SEO per WordPress, come All in One SEO (AIOSEO), aggiungeranno automaticamente questo codice per te.
Esperienza utente migliorata
I breadcrumb aiutano anche gli utenti a navigare in un sito senza utilizzare il pulsante indietro del browser. Per questo motivo, i breadcrumb possono offrire una migliore esperienza utente, ridurre i tassi di rimbalzo e aumentare l'engagement.
Siti complessi, inclusi negozi di e-commerce con gerarchie nidificate, beneficiano in modo significativo della navigazione breadcrumb.
In questo tutorial, ti mostreremo come aggiungere breadcrumb e come visualizzarli e personalizzarli.
Utilizzeremo il plugin All in One SEO (AIOSEO).
Passaggio 1: Scarica e installa All in One SEO (AIOSEO)
Innanzitutto, scarica e installa All in One SEO (AIOSEO).
Questo plugin include un generatore di breadcrumb. Ha anche tutto ciò di cui hai bisogno per la SEO. Ed è facile da usare per i principianti.
All in One SEO (AIOSEO) è un plugin consolidato con migliaia di recensioni a 5 stelle su WordPress.org. Attualmente, oltre 3 milioni di proprietari di siti utilizzano il plugin.
Passaggio 2: Abilita Breadcrumbs
Dopo aver installato il plugin, vai su AIOSEO » Impostazioni generali » Breadcrumbs.
Attiva il pulsante Abilita Breadcrumbs.
Sotto, vedrai 4 opzioni per aggiungere breadcrumb al tuo sito.
Passaggio 3: Scegli un'opzione di visualizzazione
Ecco le 4 opzioni disponibili
- Blocco Gutenberg o shortcode: usali per aggiungere breadcrumb a singole pagine.
- Widget: usalo per aggiungere breadcrumb alla sidebar o al footer del tuo post del blog.
- Codice PHP: usalo per aggiungere istantaneamente breadcrumb a tutto il sito (a tutte le pagine).
Tutti questi metodi sono facili da usare. Esaminiamoli passo dopo passo.
Metodo 1: Blocco Gutenberg
Come forse saprai, WordPress viene fornito con l'editor di Gutenberg, che utilizza blocchi cliccabili per aggiungere elementi a una pagina.
Questi elementi possono essere un paragrafo, un elenco puntato, un'immagine o una tabella.
All in One SEO ti fornisce alcuni blocchi Gutenberg speciali, incluso il blocco AIOSEO – Breadcrumbs.
Per utilizzare questo blocco, apri una pagina e posiziona il cursore dove desideri aggiungere i breadcrumb.
- Fai clic sul segno nero "+" per aggiungere un nuovo blocco.
- Nella finestra popup, cerca "breadcrumbs" e apparirà il blocco AIOSEO – Breadcrumbs.
- Fai clic su di esso per aggiungere i breadcrumb alla tua pagina.
Metodo 2: Shortcode
Esiste anche uno shortcode esclusivo di AIOSEO per aggiungere breadcrumb.
Gli shortcode di WordPress sono piccoli frammenti di testo che copi e incolli su una pagina per aggiungere un elemento, come un indice.
Come i blocchi Gutenberg, gli shortcode sono veloci e facili da usare.
Torna su AIOSEO » Impostazioni generali » Breadcrumbs per ottenere lo shortcode dei breadcrumb.
- Fai clic sull'icona Shortcode.
- E copia lo shortcode dei breadcrumb di AIOSEO sottostante.
Ora, naviga su una pagina del tuo sito a cui desideri aggiungere i breadcrumb.
Quindi incolla lo shortcode nel tuo articolo.
Quando visualizzi in anteprima la tua pagina web, puoi vedere che i breadcrumb sono stati aggiunti.
Metodo 3: Widget
I widget di WordPress ti consentono di aggiungere funzionalità a parti permanenti del tuo sito, come barre laterali e piè di pagina.
I widget includono calendari, caselle di ricerca e archivi.
Per aggiungere breadcrumb al tuo sito utilizzando l'opzione widget, vai su Aspetto » Widget.
(Se il tuo tema supporta aree widget, la vedrai nel menu.)
Si aprirà una nuova finestra. Vedrai una replica scorrevole della tua barra laterale sul lato destro.
Ora, fai clic sull'icona "+" accanto alla parola Widget.
Si aprirà una casella di ricerca. Inizia a digitare "breadcrumbs" e apparirà il widget AIOSEO breadcrumbs.
Trascina il widget dove vuoi che appaia nella barra laterale.
Nel nostro esempio, lo trascineremo nell'area del footer.
Ora i nostri breadcrumbs appariranno nel footer della barra laterale.
Naturalmente, puoi avere i breadcrumbs nella barra laterale e nella parte superiore delle tue pagine.
Metodo 4: Codice PHP
Puoi aggiungere facilmente i breadcrumbs su tutto il sito usando uno snippet di codice PHP.
Copia e incolla questo snippet proprio come faresti con del testo normale.
Il vantaggio di usare questa opzione è che aggiungerà automaticamente i breadcrumbs a tutte le tue pagine e non dovrai mai ripetere questa azione.
Questi sono i passaggi:
- Copia lo snippet di codice.
- Apri l'editor del tema.
- Fai clic su header.php.
- Incolla lo snippet di codice.
Esaminiamo questi passaggi.
1. Copia lo snippet di codice
Nella pagina AIOSEO Breadcrumbs,
- Fai clic su Codice PHP. Questo farà apparire una piccola riga di codice.
- Fai clic sulla piccola icona di copia a destra dello snippet di codice.
Ora che hai copiato quella riga di codice, incollala nel tuo tema.
2. Apri l'editor del tema.
- Nella navigazione a sinistra di WordPress, vai su Aspetto » Editor file del tema.
Si aprirà una nuova finestra come questa:
3. Fai clic su header.php
- Nella colonna di destra (File del tema), scorri per trovare header.php e fai clic su di esso.
Questo farà apparire una nuova finestra di codice a sinistra.
4. Incolla il codice.
- Cerca il tag </head>.
- Sotto di esso, incolla lo snippet di codice PHP.
- Quindi fai clic su Aggiorna file per salvare le modifiche.
Ecco un'immagine ravvicinata del tag </head> e dello snippet di codice PHP per il breadcrumb.
Dopo aver fatto clic su Aggiorna file, a tutte le tue pagine web verranno aggiunti i breadcrumb.
E anche i nuovi post o le nuove pagine li avranno.
Attenzione: Prima del tag </head>, c'è un tag <head> (senza la barra). Lo snippet di codice PHP deve andare dopo il tag </head>.
Ora che sai come aggiungere la navigazione con breadcrumb al tuo sito WordPress, ti mostreremo come personalizzarne l'aspetto.
Impostazioni dei breadcrumb
La modifica delle impostazioni dei breadcrumb altererà l'aspetto dei tuoi percorsi di breadcrumb.
Queste impostazioni includono opzioni per:
- Includere o omettere la tua homepage.
- Utilizzare diversi stili di separatore.
- Includere o omettere la pagina corrente (titolo della pagina) in cui si trova l'utente.
Innanzitutto, vedrai l'anteprima nella parte superiore dell'area Impostazioni breadcrumb.
Man mano che regoli le impostazioni, questa anteprima cambierà.
Sotto l'anteprima, puoi sperimentare con diversi stili di separatore.
E puoi disattivare il link alla homepage o dargli un'etichetta diversa. ("Home" è l'etichetta predefinita).
Scorri un po' verso il basso.
Qui hai altre 2 opzioni di personalizzazione.
- Prefisso breadcrumb: Se desideri che del testo venga visualizzato all'inizio del tuo percorso di breadcrumb, inseriscilo qui.
- Mostra homepage blog: Disattiva su "Off" se non desideri che il nome del tuo blog appaia nel percorso di breadcrumb.
Scopri di più sulle Impostazioni breadcrumb.
Utilizzo di modelli Pro Breadcrumb
Se stai utilizzando la versione Pro di All in One SEO (AIOSEO), vedrai le opzioni del modello breadcrumb in fondo a AIOSEO » Impostazioni generali » Breadcrumbs.
I modelli consentono di modificare l'aspetto dei breadcrumb. Puoi scegliere opzioni diverse per diversi tipi di post.
Scopri di più sui modelli di breadcrumb.
Tipi di navigazione con breadcrumb
Oltre ai breadcrumb basati sulla gerarchia trattati sopra, ci sono altri 2 tipi di navigazione con breadcrumb.
I breadcrumb basati sulla gerarchia sono anche chiamati breadcrumb basati sulla posizione.
Breadcrumb basati sulla cronologia (Breadcrumb basati sul percorso)
Questo tipo di navigazione visualizza le pagine che hai visitato su un sito.
Può diventare ingombrante quando gli utenti visitano molte pagine.
Breadcrumb basati sugli attributi
Alcuni siti web di e-commerce includono attributi del prodotto, come colore, finitura o taglia, nei loro percorsi di navigazione (breadcrumb).
Questi possono essere combinati con breadcrumb basati sulla gerarchia.
Migliori pratiche
Google raccomanda che i tuoi breadcrumb corrispondano alla gerarchia del tuo sito.
Detto questo, non dovrebbero replicare o sostituire le voci di navigazione principali.
Riepilogo
I breadcrumb possono migliorare l'usabilità del tuo sito web e aiutare le tue pagine a posizionarsi meglio nei risultati di ricerca di Google.
I siti di e-commerce con molte pagine di prodotti e i siti ricchi di informazioni beneficeranno in modo significativo della navigazione con breadcrumb. Ma qualsiasi proprietario di sito può aggiungerla.
E adesso?
Ora che hai imparato come aggiungere i breadcrumb, cosa c'è dopo?
Imparare come aggiungere una sitemap HTML al tuo sito WordPress è facile. Ed esplora i nostri progetti SEO fai-da-te per principianti.
Se hai trovato utile questo articolo, iscriviti al nostro Canale YouTube. Troverai molti altri tutorial utili lì. Puoi anche seguirci su X (Twitter), LinkedIn o Facebook per rimanere aggiornato.
Vuoi Provare AIOSEO Gratuitamente?
Inserisci l'URL del tuo sito web WordPress per installare AIOSEO Lite.
Divulgazione: I nostri contenuti sono supportati dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Raccomandiamo solo prodotti che crediamo aggiungeranno valore ai nostri lettori.
Questo articolo inizia bene ma poi non c'è abbastanza spiegazione per me sul perché (e come) dovrei intraprendere determinate azioni relative ai breadcrumb sul mio sito web – l'autore presuppone conoscenze che non possiedo. Quindi non sono sicuro di intraprendere alcuna azione. Nel complesso, questo articolo non è sufficientemente adatto ai principianti.