Dati strutturati di breadcrumb (BreadcrumbList)

Una traccia di breadcrumb in una pagina indica la posizione della pagina nella gerarchia del sito e può semplificare la comprensione e la navigazione del sito da parte degli utenti. Un utente può navigare completamente nella gerarchia del sito, un livello alla volta, a partire dall'ultimo breadcrumb nella traccia di breadcrumb.

Breadcrumb visualizzato in una pagina web

Come aggiungere dati strutturati

I dati strutturati sono un formato standardizzato per fornire informazioni su una pagina e classificarne i contenuti. Se non li hai mai utilizzati, scopri di più su come funzionano i dati strutturati.

Ecco una panoramica su come creare, testare e rilasciare i dati strutturati. Per una guida passo per passo su come aggiungere dati strutturati a una pagina web, consulta il codelab sui dati strutturati.

  1. Aggiungi le proprietà obbligatorie. In base al formato che utilizzi, scopri dove inserire i dati strutturati nella pagina.
  2. Segui le linee guida.
  3. Convalida il codice utilizzando lo strumento di Test dei risultati avanzati e correggi eventuali errori critici. Prendi in considerazione anche la possibilità di correggere eventuali problemi non critici che potrebbero essere segnalati nello strumento, in quanto possono contribuire a migliorare la qualità dei tuoi dati strutturati (tuttavia, questo non è necessario per l'idoneità per i risultati avanzati).
  4. Implementa alcune pagine che includono dati strutturati e utilizza lo strumento Controllo URL per verificare come Google vede la pagina. Assicurati che la pagina sia accessibile per Google e che non venga bloccata da file robots.txt, tag noindex o requisiti di accesso. Se la pagina non presenta problemi, puoi chiedere a Google di ripetere la scansione degli URL.
  5. Per tenere Google informata delle future modifiche, ti consigliamo di inviare una Sitemap. Puoi automatizzare questa operazione con l'API Search Console Sitemap.

Esempi

La Ricerca Google utilizza il markup di tipo breadcrumb nel corpo di una pagina web per classificare le informazioni dalla pagina nei risultati di ricerca. Spesso, come illustrato nei seguenti casi d'uso, gli utenti possono arrivare a una pagina da tipi molto diversi di query di ricerca. Se da un lato ogni ricerca può restituire la stessa pagina web, dall'altro il breadcrumb classifica i contenuti nel contesto della query della Ricerca Google. L'elemento ancillaryjustice.html della pagina potrebbe visualizzare tracce di breadcrumb diverse a seconda del contesto di ricerca.

Traccia di breadcrumb singola

Una query di ricerca relativa a un anno e un premio dedicato a un genere specifico, ad esempio "romanzo premio Nebula 2014", può generare il seguente breadcrumb:

Libri › Fantascienza › Vincitori del premio

JSON-LD

Ecco un esempio in formato JSON-LD per supportare il breadcrumb:


<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>

RDFa

Ecco un esempio in formato RDFa per supportare il breadcrumb:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Microdati

Ecco un esempio in formato Microdati per supportare il breadcrumb:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

Di seguito è riportato un esempio di blocco di breadcrumb all'interno della pagina HTML come parte del design visivo.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Tracce di breadcrumb multiple

Se esistono diversi modi per accedere a una pagina del tuo sito, puoi specificare tracce di breadcrumb multiple per una singola pagina. Ecco una traccia di breadcrumb che porta a una pagina di libri vincitori di premi:

Libri › Fantascienza › Vincitori del premio

Ecco un'altra traccia di breadcrumb che porta alla stessa pagina:

Letteratura › Vincitori di premi

JSON-LD

Ecco un esempio in formato JSON-LD che supporta tracce di breadcrumb multiple:


<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>

RDFa

Ecco un esempio in formato RDFa che supporta tracce di breadcrumb multiple:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Microdati

Ecco un esempio in formato Microdati che supporta tracce di breadcrumb multiple:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

Di seguito è riportato un esempio di blocco di breadcrumb all'interno della pagina HTML come parte del design visivo.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Linee guida

Devi seguire queste linee guida affinché i tuoi contenuti siano idonei per la visualizzazione con i breadcrumb nella Ricerca Google.

Ti consigliamo di fornire i breadcrumb che rappresentano un percorso utente tipico di una pagina, anziché riprodurre la struttura dell'URL. Alcune parti del percorso dell'URL non aiutano gli utenti a capire come si inserisce la pagina nel tuo sito web. Ad esempio, considerato l'URL https://example.com/pages/books/catcher_in_the_rye.html, non aggiungono informazioni né il percorso pages nell'URL né l'elemento di primo livello example.com.

Definizioni dei tipi di dati strutturati

Per specificare i breadcrumb, definisci un BreadcrumbList che contenga almeno due ListItems. Affinché i tuoi contenuti siano idonei per essere visualizzati con i breadcrumb, devi includere le proprietà obbligatorie.

BreadcrumbList è l'elemento contenitore che include tutti gli elementi nell'elenco. La definizione completa di BreadcrumbList è disponibile all'indirizzo schema.org/BreadcrumbList. Le proprietà supportate da Google sono le seguenti:

Proprietà obbligatorie
itemListElement

ListItem

Un array dei breadcrumb elencati in un ordine specifico. Specifica ogni breadcrumb con un elemento ListItem. Ad 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"
  }]
}

ListItem

ListItem contiene i dettagli su un singolo elemento nell'elenco. La definizione completa di ListItem è disponibile all'indirizzo schema.org/ListItem. Le proprietà supportate da Google sono le seguenti:

Proprietà obbligatorie
item

URL o un sottotipo di Thing

L'URL della pagina web che rappresenta il breadcrumb. Esistono due modi per specificare item:

  • URL: specifica l'URL della pagina. Ad esempio: 
    "item": "https://example.com/books"
  • Thing: utilizza un ID per specificare l'URL in base al formato di markup che stai utilizzando:
    • JSON-LD: utilizza @id per specificare l'URL.
    • Microdati: puoi utilizzare href o itemid per specificare l'URL.
    • RDFa: puoi utilizzare about, href o resource per specificare l'URL.

Se il breadcrumb è l'ultimo elemento della traccia di breadcrumb, item non è obbligatorio. Se item non è incluso per l'ultimo elemento, Google utilizza l'URL della pagina che lo contiene.

name

Text

Il titolo del breadcrumb visualizzato per l'utente. Se utilizzi Thing con name invece di URL per specificare item, name non è obbligatorio.
position

Integer

La posizione del breadcrumb nella traccia di breadcrumb. La posizione 1 indica l'inizio della traccia.

Monitor rich results with Search Console

Search Console is a tool that helps you monitor how your pages perform in Google Search. You don't have to sign up for Search Console to be included in Google Search results, but it can help you understand and improve how Google sees your site. We recommend checking Search Console in the following cases:

  1. After deploying structured data for the first time
  2. After releasing new templates or updating your code
  3. Analyzing traffic periodically

After deploying structured data for the first time

After Google has indexed your pages, look for issues using the relevant Rich result status report. Ideally, there will be an increase of valid items, and no increase in invalid items. If you find issues in your structured data:

  1. Fix the invalid items.
  2. Inspect a live URL to check if the issue persists.
  3. Request validation using the status report.

After releasing new templates or updating your code

When you make significant changes to your website, monitor for increases in structured data invalid items.
  • If you see an increase in invalid items, perhaps you rolled out a new template that doesn't work, or your site interacts with the existing template in a new and bad way.
  • If you see a decrease in valid items (not matched by an increase in invalid items), perhaps you are no longer embedding structured data in your pages. Use the URL Inspection tool to learn what is causing the issue.

Analyzing traffic periodically

Analyze your Google Search traffic using the Performance Report. The data will show you how often your page appears as a rich result in Search, how often users click on it and what is the average position you appear on search results. You can also automatically pull these results with the Search Console API.

Risoluzione dei problemi

Se hai difficoltà con l'implementazione o il debug dei dati strutturati, ecco alcune risorse che potrebbero esserti utili.