Come inserire le Breadcrumbs sul tuo sito è molto semplice ma prima vediamo assieme cosa sono e che tipo di migliorie possono portare. Hai mai visitato un sito web e ti sei perso tra le pagine come in un labirinto? È qui che entrano in gioco le “breadcrumbs”.
In questa guida, ti spiegherò tutto, da cosa sono le breadcrumbs a come aiutano gli utenti a navigare e perché sono fondamentali per migliorare l’indicizzazione del tuo sito web.
Cosa sono le Breadcrumbs?
Immagina le breadcrumbs come briciole di pane virtuali che segnano il percorso che hai seguito sul sito. Di solito, si trovano in alto o in basso su di una pagina web e mostrano la struttura gerarchica del sito. Ad esempio:
Home > Blog > None Articolo
Questo ti dice che sei partito dalla pagina principale, sei andato al blog e infine hai aperto un articolo specifico. Se clicchi su “Blog” o “Home”, puoi tornare indietro facilmente.
Aiutano la navigazione
Le breadcrumbs rendono la vita di un utente più facile e permettono di arrivare o tornare indietro in modo semplice ed intuitivo. Ti danno un senso di posizione, consentendoti di sapere dove ti trovi e come sei arrivato lì. Questo è fantastico per siti web con molte pagine o categorie.
Utilità per l’indicizzazione SEO
Oltre ad aiutare gli utenti, le breadcrumbs sono una benedizione per i motori di ricerca come Google. Quando Google analizza il tuo sito, le breadcrumbs forniscono un chiaro percorso da seguire. Questo è particolarmente utile per siti web con una struttura complessa.
Facciamo un esempio pratico
Immagina di avere un negozio di abbigliamento online con diverse categorie: uomo, donna e bambino. Ogni categoria ha sottocategorie come “Magliette”, “Pantaloni” e “Scarpe”. Senza breadcrumbs, un cliente che sta cercando una maglietta per uomo potrebbe sentirsi perso.
Ma grazie alle breadcrumbs, il cliente sa esattamente dove si trova: “Home > Uomo > Magliette“. Con questa semplice gerarchia è più probabile che l’utente trovi il prodotto che sta cercando ed allo stesso tempo, Google apprezzerà la chiarezza della struttura del tuo sito.
Come aggiungerle al tuo sito
L’implementazione delle breadcrumbs varia a seconda del CMS che utilizzi (WordPress, Joomla, Prestashop, etc.). Per WordPress, ci sono due modi per inserirle:
1 Tramite plugin (modo semplice)
2 Implementando il codice (modo da esperto)
1. Tramite plugin
Ecco una lista di plugin per WordPress che ti consentono di aggiungere facilmente le breadcrumbs al tuo sito web:
Yoast SEO: Yoast è uno dei plugin SEO più popolari per WordPress ed include anche una funzionalità per abilitare le breadcrumbs.
Link al sito – Link al plugin
Breadcrumb NavXT: Questo plugin offre una serie di opzioni di personalizzazione per le breadcrumbs e ti consente di adattarle al tuo sito web.
Link al plugin
Rank Math: Un altro plugin SEO all-in-one che include la funzione delle breadcrumbs tra le sue caratteristiche.
Link al sito – Link al plugin
SEOPress: Un plugin SEO potente che include funzionalità di breadcrumbs e altre opzioni per ottimizzare il tuo sito.
Link al sito – Link al plugin
All In One Schema Rich Snippets: Questo plugin non solo aggiunge le breadcrumbs, ma aiuta anche a migliorare l’aspetto dei tuoi risultati sui motori di ricerca con snippet ricchi.
Link al sito – Link al plugin
Prima di scegliere un plugin, assicurati di verificare se è compatibile con la tua versione di WordPress e se offre le funzionalità e l’aspetto desiderati per le breadcrumbs sul tuo sito.
2. Tramite codice
Se invece sei un purista è possibile aggiungere le breadcrumbs a WordPress utilizzando il codice. Puoi farlo direttamente nel tuo tema WordPress, ma è consigliato procedere a queste modifiche su di un tema figlio per evitare di sovrascriverle al successivo aggiornamento del tema padre. In questo modo potrai aggiornare il tema padre senza perdere le modifiche fatte al tema figlio. Ecco come aggiungere le breadcrumbs al tuo sito WordPress utilizzando il codice:
1. Creazione di una Funzione nel tema figlio nel file functions.php:
Aggiungi il seguente codice al tuo file functions.php nel tuo tema WordPress. Questo è solo un esempio di base e dovrai personalizzarlo in base alle tue esigenze.
function custom_breadcrumbs() {
echo ‘<ul class=”breadcrumbs”>’;
if (!is_home()) {
echo ‘<li><a href=”‘ . get_home_url() . ‘”>Home</a></li>’;
if (is_category() || is_single()) {
echo ‘<li>’;
the_category(‘ </li><li> ‘);
if (is_single()) {
echo ‘</li><li>’;
the_title();
echo ‘</li>’;
}
} elseif (is_page()) {
echo ‘<li>’;
echo the_title();
echo ‘</li>’;
}
}
echo ‘</ul>’;
}
2. Chiamata alla Funzione nel Tuo Template:
Dopo aver definito la funzione nel file functions.php, ora devi chiamarla nel tuo modello (template) di pagina o post dove desideri visualizzare le breadcrumbs.
Per esempio, puoi inserire questo codice nel tuo file page.php o single.php:
<?php custom_breadcrumbs(); ?>
3. Personalizzazione delle Breadcrumbs:
Il codice sopra è un esempio di base. Puoi personalizzarlo ulteriormente per adattarlo al tuo design e alle tue esigenze specifiche. Puoi anche aggiungere stili CSS per migliorare l’aspetto delle tue breadcrumbs.
Ricorda sempre di effettuare il backup del tuo sito prima di apportare modifiche al codice del tema, in modo da poter ripristinare la versione precedente in caso di problemi.
Conclusioni
Le breadcrumbs non sono solo utili per gli utenti, ma anche per il miglioramento dell’indicizzazione SEO del tuo sito web. Aiutano a semplificare la navigazione e a rendere il tuo sito più user-friendly. La prossima volta che navigando su di un sito web che utilizza le breadcrumbs, sarai sicuro di apprezzarne il valore. E se gestisci un sito web, potresti voler aggiungerlper migliorare l’esperienza dei tuoi visitatori e la visibilità del tuo sito sui motori di ricerca.
