Come e perché inserire le breadcrumb sul sito


Postato in data Settembre 23rd, da Riccardo Esposito in Vita da Webmaster. No Comments

Le breadcrumb sono dei link di navigazione che riproducono il percorso disegnato dal sito web e consentono all’utente di capire dove si trova, in quale sezione del portale è situato. La similitudine usata per riferirsi a questi elementi dell’interfaccia è semplice: briciole di pane.

breadcrumb
Vuoi impostare le briciole di pane sul sito?

Come quelle che usava Pollicino per ricordarsi la via di casa. In fin dei conti le breadcrumb fanno questo: iniziano un percorso dalla home e indicano tutti i passaggi (le directory) che la struttura del sito segue per raggiungere quella posizione. Ma a cosa servono?

Cosa sono le breadcrumb di un sito: definizione

Con questo termine s’intendono i sistemi di navigazione che descrivono il percorso svolto dalla struttura del sito per raggiungere una determinata pagina.

In linea di massima queste tracce si posizionano nella parte alta della risorsa come un menu orizzontale prima del titolo. O comunque in modo che l’utente possa vedere e capire subito dove si trova.

Gli elementi di questa navigazione – alternativa rispetto al classico menu – non sono semplici etichette ed elementi testuali. Si configurano come link, collegamenti ipertestuali interni che consentono all’utente di raggiungere altre risorse del sito, divisi da una freccia o il simbolo “maggiore di” (>) che indica il livello di quella pagina rispetto ai collegamenti successivi.

Per approfondire: cos’è l’URL e come ottimizzarla

A cosa servono le breadcrumb: user experience

Hanno, in primo luogo, una funzionalità per i visitatori del sito. Consentono di capire subito dove si trovano e permettono di ridurre le azioni necessarie per raggiungere pagine specifiche.

esempio breadcrumb
Esempio breadcrumb su un sito web.

Le breadcrumb migliorano l’esperienza utente soprattutto nei grandi siti web ed ecommerce. Vale a dire i portali che hanno diverse categorie e sotto-categorie con i vari contenuti.

In sintesi, questi elementi di navigazione alternativi sono utili per ridurre la frequenza di rimbalzo: possono suggerire all’utente di fare clic su pagine di livello superiore per visualizzare gli argomenti correlati. Questo riduce il bounce rate e mantiene il pubblico sul sito.

Non dimenticare l’importanza della SEO on-page

Anche la guida SEO di Google suggerisce di aggiungere breadcrumb sul sito. E di farlo aggiungendo il markup specifico. Ma perché tutto questo? Quali sono i vantaggi in termini SEO? Gli aspetti da considerare sono diversi e riguardano aspetti differenti.

In primo luogo devi considerare che parliamo sempre di link interni che aiutano la distribuzione del Pagerank. Inoltre aiutano a Google nell’arduo compito di capire la struttura del sito.

seo breadcrumb
Ecco un esempio di breadcrumb strutturato.

Inoltre la presenza delle breadcrumb taggate con i dati strutturati consentono al motore di ricerca la visualizzazione ottimizzata nella serp: l’url scompare a favore del processo di navigazione. Questo è importante per facilitare il lavoro sul click-through rate

Quando usare e non usare le briciole di pane

Inutile mettere breadcrumb su siti che non hanno gerarchia ma un unico livello. Un sito monopagina non ha bisogno di questi elementi ma neanche un sito con 4 risorse tipo:

  • home
  • chi siamo
  • contatti
  • cosa facciamo

Questi elementi diventano interessanti, invece, con i blog che dividono gli articoli in categorie e sotto-categorie. Sono fondamentali, infine, per i grandi siti che hanno diversi livelli gerarchici.

Come inserire breadcrumb su WordPress

Prima di capire come mettere le briciole di pane sul tuo sito è giusto ricordare che non sono composte da semplici link. Possono essere indicati come entità dotate di un significato per i motori di ricerca. Schema.org, infatti, ha una definizione chiara delle breadcrumb. Ecco un esempio di come appare il codice implementato con i microdati necessari.

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://esempio.com/web-marketing">
    <span itemprop="name">Web Marketing</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://esempio.com/web-marketing/SEO">
    <span itemprop="name">SEO</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Questo significa che per attivare breadcrumb su WordPress conviene agire in modo strutturato. Quindi puoi scegliere un tema WordPress che implementi le briciole di pane.

Oppure puoi usare un plugin. WordPress SEO by Yoast consente, in teoria, di attivare questa funzione ma spesso ci sono conflitti con il template. Sarà un problema mio, ma non sono mai riuscito a far funzionare questa soluzione. Quindi mi rivolgo a un altro plugin: Breadcrumb NavXT. Funziona molto bene e lo puoi trovare sul sito che raccoglie tutte le estensioni.

Come verificare se hai inserito bene il codice

Come hai potuto ben capire, le breadcrumb non attivano semplici link di navigazione ma rappresentano degli elementi con un significato ben preciso dal punto di vista organizzativo. Per questo devi assicurarti che siano stati inseriti al meglio, con il codice giusto.

controllo breadcrumb
Verifica e controllo errori sulla Search Console.

Puoi verificare questo con lo strumento dei dati strutturati di Google, ma c’è anche un report molto interessante nella search console. In questo modo non devi controllare personalmente la correttezza del codice: è Google a indicarti eventuali problemi nel codice.

Riccardo Esposito

Blogger per Serverplan, webwriter freelance e autore di My Social Web. Scrivo ogni giorno. Ho pubblicato un libro dedicato al mondo del blogging. Ah, l'ho già detto che scrivo?




Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*

Shares