Come aggiungere il markup di tipo breadcrumb | Google Search Central | Documentazione

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 — **Nota**: l'aspetto effettivo nei risultati di ricerca potrebbe essere diverso. Puoi visualizzare l'anteprima della maggior parte delle funzionalità con il test dei risultati multimediali.

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">
 Books</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction">
 Science Fiction</a>
 <meta property="position" content="2">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 <a property="item" typeof="WebPage"
 href="https://example.com/books/sciencefiction/awardwinners">
 Award Winners</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">
 Literature</a>
 <meta property="position" content="1">
 </li>
 ›
 <li property="itemListElement" typeof="ListItem">
 Award Winners
 <meta property="position" content="2">
 </li>
 </ol>
 </body>
</html>

<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">
 Books</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">
 Science Fiction</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">
 Award Winners</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">
 Literature</a>
 <meta itemprop="position" content="1" />
 </li>
 ›
 <li itemprop="itemListElement" itemscope
 itemtype="https://schema.org/ListItem">
 Award Winners
 <meta itemprop="position" content="2" />
 </li>
 </ol>
 </body>
</html>

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

BreadcrumbList è l'elemento contenitore che include tutti gli elementi nell'elenco. La definizione completa di BreadcrumbList è disponibile all'indirizzo schema.org/BreadcrumbList.

Proprietà obbligatorie

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" }] }

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.

Proprietà obbligatorie

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.

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.

Risoluzione dei problemi

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

Se utilizzi un sistema di gestione dei contenuti (CMS) o un'altra persona si sta occupando del tuo sito, chiedile di aiutarti. Assicurati di inoltrarle gli eventuali messaggi di Search Console che illustrano il problema.
Google non garantisce che le funzionalità che utilizzano dati strutturati vengano visualizzate nei risultati di ricerca. Per un elenco delle cause comuni per cui i tuoi contenuti potrebbero non essere mostrati da Google in un risultato avanzato consulta le linee guida generali sui dati strutturati.
I tuoi dati strutturati potrebbero contenere un errore. Consulta l'elenco di errori nei dati strutturati.
Se i dati strutturati della tua pagina sono interessati da un'azione manuale, i dati strutturati sulla pagina verranno ignorati (sebbene la pagina possa ancora essere visualizzata nei risultati della Ricerca Google). Per risolvere i problemi relativi ai dati strutturati, utilizza il report Azioni manuali.
Consulta nuovamente le linee guida per verificare se i tuoi contenuti non sono conformi. Il problema può essere causato dall'utilizzo di contenuti di spam o di markup di spam. Tuttavia, il problema potrebbe non riguardare la sintassi e perciò non essere identificato dal Test dei risultati avanzati.
Consulta informazioni su come risolvere i problemi relativi a risultati avanzatimancanti/calo del numero totale di risultati avanzati.
Lascia del tempo per le nuove operazioni di scansione e indicizzazione. Ricorda che possono passare diversi giorni dopo la pubblicazione di una pagina prima che Google la rilevi e la sottoponga a scansione. Per domande generali sulla scansione e sull'indicizzazione, consulta le Domande frequenti (FAQ) relative alla scansione e all'indicizzazione della Ricerca Google.
Pubblica una domanda nel forum di Google Search Central.