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.

Monitorare i risultati avanzati con Search Console

Search Console è uno strumento che consente di monitorare il rendimento delle tue pagine in Ricerca Google. Registrarsi in Search Console non è obbligatorio per essere inclusi nei risultati di Ricerca Google, ma può aiutarti a capire e migliorare il modo in cui Google vede il tuo sito. Ti consigliamo di controllare Search Console nei seguenti casi:

  1. Dopo aver effettuato il deployment dei dati strutturati per la prima volta
  2. Dopo aver rilasciato nuovi modelli o aggiornato il codice
  3. Analisi periodica del traffico

Dopo aver effettuato il deployment dei dati strutturati per la prima volta

Dopo che Google ha indicizzato le tue pagine, cerca i problemi utilizzando il report sullo stato dei risultati avanzati pertinente. L'ideale sarebbe un aumento degli elementi validi e nessun aumento di quelli non validi. Se riscontri problemi nei dati strutturati:

  1. Correggi gli elementi non validi.
  2. Controlla un URL pubblicato per verificare se il problema persiste.
  3. Richiedi la convalida utilizzando il report sullo stato.

Dopo aver rilasciato nuovi modelli o aggiornato il codice

Quando apporti modifiche significative al tuo sito web, monitora l'aumento degli elementi non validi dei dati strutturati.
  • Se vedi un aumento di errori, forse hai reso disponibile un nuovo modello non funzionante oppure il tuo sito interagisce con il modello esistente in modo nuovo, ma non corretto.
  • Se noti una diminuzione degli elementi validi (non associata a un aumento di quelli non validi), forse non stai più incorporando dati strutturati nelle tue pagine. Utilizza lo strumento Controllo URL per scoprire la causa del problema.

Analisi periodica del traffico

Analizza il traffico di Ricerca Google utilizzando il rapporto sul rendimento. I dati mostrano la frequenza con cui la pagina viene visualizzata nei risultati multimediali nella Ricerca, la frequenza con cui gli utenti fanno clic e qual è la posizione media che visualizzi nei risultati di ricerca. Puoi anche estrarre automaticamente questi risultati con l'API Search Console.

Risoluzione dei problemi

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