I dati strutturati breadcrumb sono informazioni che possono aiutare sia Google che gli utenti a comprendere qual è la gerarchia delle pagine del proprio sito.
Inserire i dati strutturati, sul proprio sito è tra le best pratice di Google per gli e-commerce in quanto sono informazioni aggiuntive che permettono al motore di ricerca di comprendere di più riguardo il proprio sito.
In questo modo Google ha la possibilità di mostrare risultati avanzati agli utenti.
Per quanto riguarda le tracce di breadcrumb, queste possono essere utili agli utenti per capire quali sono le pagine più importanti del sito, semplificando in questo modo la navigazione.
In questo articolo vedremo più nel dettaglio alcuni esempi di breadcrumb, quali sono i markup da utilizzare e le linee guida da rispettare affinché Google li riconosca correttamente.
Indice
Esempi
Come abbiamo detto la traccia breadcrumb è utile al motore di ricerca per comprendere quale sia la gerarchia delle pagine sul proprio sito.
Naturalmente anche per gli utenti queste informazioni sono utilissime e semplificano di molto la loro navigazione e in generale l’esperienza sul sito. C’è da dire a tal proposito che gli utenti possono giungere sul sito in modi diversi e attraverso diverse query di ricerca.
Di seguito vediamo alcuni esempi di breadcrumb in formato JSON-LD.
Questa indica una query di ricerca che fa riferimento a un evento e a un anno ben specifici. Google nello specifico fa l’esempio di “romanzo premio Nebula 2014”
| <html>
<head> <title>Award Winners</title> <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “BreadcrumbList”, “itemListElement”: [{ “@type”: “ListItem”, “position”: 1, “name”: “Books”, “item”: “https://example.com/books” },{ “@type”: “ListItem”, “position”: 2, “name”: “Science Fiction”, “item”: “https://example.com/books/sciencefiction” },{ “@type”: “ListItem”, “position”: 3, “name”: “Award Winners” }] } </script> </head> <body> </body> </html> |
Se c’è la possibilità di accedere a un contenuto del tuo sito in modi diversi, hai la possibilità di specificare anche delle breadcrumb multiple per quella singola pagina.
Riprendendo lo stesso esempio di prima, ovvero “romanzo premio Nebula 2014”
| <html>
<head> <title>Award Winners</title> <script type=”application/ld+json”> [{ “@context”: “https://schema.org”, “@type”: “BreadcrumbList”, “itemListElement”: [{ “@type”: “ListItem”, “position”: 1, “name”: “Books”, “item”: “https://example.com/books” },{ “@type”: “ListItem”, “position”: 2, “name”: “Science Fiction”, “item”: “https://example.com/books/sciencefiction” },{ “@type”: “ListItem”, “position”: 3, “name”: “Award Winners” }] }, { “@context”: “https://schema.org”, “@type”: “BreadcrumbList”, “itemListElement”: [{ “@type”: “ListItem”, “position”: 1, “name”: “Literature”, “item”: “https://example.com/literature” },{ “@type”: “ListItem”, “position”: 2, “name”: “Award Winners” }] }] </script> </head> <body> </body> </html> |
Linee guida
Affinché i contenuti del proprio sito web siano accettati da Google, e quindi idonei per la visualizzazione con breadcrumb nei risultati di ricerca, è fondamentale seguire alcune linee guida.
In linea di massima le best pratice a tal proposito riguardano la struttura dei breadcrumb. Nello specifico il consiglio è di fornire i breadcrumb che rappresentano un percorso utente tipico di una pagina, anziché riprodurre la struttura dell’URL.
La struttura dell’URL, infatti, non sempre fornisce informazioni chiare agli utenti sulla gerarchia delle varie pagine.
Tipi di dati strutturati e definizioni
Dopo aver capito cosa sono i dati strutturati breadcrumb e aver compreso a cosa servano, è giunto il momento di vedere nel dettaglio come utilizzare i vari markup.
Per specificare i breadcrumb è necessario definire un BreadcrumbList che contenga al suo interno minimo due ListItems.
Vediamo più nello specifico i vari markup e le loro proprietà obbligatorie e/o consigliate.
BreadcrumbList
Come detto, l’elemento BreadcrumbList è una sorta di elemento contenitore che, per l’appunto, contiene al suo interno tutti gli elementi dell’elenco.
Per poterlo inserire correttamente è necessario rispettare le proprietà obbligatorie, ovvero quelle che ne regolano il corretto funzionamento di base.
Vediamo quali sono le proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| itemListElement | ListItem
Indica un array dei breadcrumb elencati in un ordine specifico. Ricorda che ogni breadcrumb deve essere specificato con un elemento ListItem. Ecco un esempio: { “@context”: “https://schema.org”, “@type”: “BreadcrumbList”, “itemListElement”: [{ “@type”: “ListItem”, “position”: 1, “name”: “Books”, “item”: “https://example.com/books” },{ “@type”: “ListItem”, “position”: 2, “name”: “Authors”, “item”: “https://example.com/books/authors” },{ “@type”: “ListItem”, “position”: 3, “name”: “Ann Leckie”, “item”: “https://example.com/books/authors/annleckie” }] } |
Per quanto riguarda questo elemento non sono presenti proprietà consigliate.
ListItem
Il markup ListItem indica invece i dettagli relativi un singolo elemento presente in elenco.
Vediamo quali sono le proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| item | URL o un sottotipo di Thing
Indica l’URL della pagina che rappresenta il breadcrumb. In particolare esistono due modi distinti per rappresentare item. Vediamoli:
|
| name | Text
Indica il titolo del breadcrumb che visualizzerà l’utente. |
| position | Integer
Indica la posizione del breadcrumb nella traccia di breadcrumb e in cui il numero 1 sta a indicare l’inizio della traccia. |
Anche in questo caso l’elemento non prevede proprietà consigliate.
In questo articolo siamo andati ad approfondire i dati strutturati breadcrumb, per comprendere quale sia la loro utilità e il loro utilizzo.
Come abbiamo visto, questi dati possono fornire informazioni preziose, sia a Google che agli utenti, per comprendere quale sia la gerarchia delle pagine del proprio sito.
In questo modo, soprattutto per ciò che riguarda la user experience, l’utilizzo del sito e la navigazione risultano molto più semplici, comodi e intuitivi.
Tutto questo si traduce in una maggiore usabilità del sito e in maggiori vendite per qualsiasi e-commerce.
Hai bisogno di inserire i dati strutturati breadcrumb sul tuo sito?
Siamo un team altamente qualificato con una squadra di sviluppatori ed esperti pronti a intervenire. Analizzeremo il tuo sito e ti forniremo la migliore soluzione per integrare i dati strutturati e rendere comoda e confortevole l’esperienza di acquisto dei tuoi clienti.
Non rischiare di commettere errori mettendo mano al tuo sito, affidati agli esperti!
