Breadcrumb

Breadcrumb visualizzato in una pagina web

Una traccia di breadcrumb in una pagina indica la posizione della pagina nella gerarchia del sito e può aiutare gli utenti a capire e navigare il sito in modo efficace. Un utente può navigare completamente nella gerarchia del sito, un livello alla volta, a partire dall'ultimo breadcrumb nella traccia di breadcrumb.

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, leggi ulteriori informazioni su come funzionano i dati strutturati.

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

  1. Aggiungi le proprietà richieste. Per informazioni su dove inserire i dati strutturati nella pagina, guarda il video JSON-LD structured data: Where to insert on the page.
  2. Segui le linee guida.
  3. Convalida il codice utilizzando il test dei risultati multimediali.
  4. Esegui il deployment di 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 sembra presentare 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

Ricerca Google utilizza markup di 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 di Ricerca Google. La pagina ancillaryjustice.html potrebbe visualizzare tracce di breadcrumb diverse a seconda del contesto di ricerca.

Un modo comune per implementare i breadcrumb è utilizzare la parte del percorso dell'URL come traccia di breadcrumb. Tieni presente che 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/pagine/libri/il_giovane_holden.html", "pagine" non aggiunge alcuna informazione e neanche l'elemento di primo livello "example.com". Ti consigliamo di fornire i breadcrumb che rappresentano un percorso utente tipico di tale pagina web, anziché eseguire il mirroring della struttura dell'URL.

Traccia di breadcrumb singola

Una query di ricerca relativa a un anno e un premio basato sul genere, ad esempio "miglior 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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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 del premio:

Libri › Fantascienza › Vincitori del premio

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

Letteratura > Vincitori del premio

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://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 il breadcrumb nella Ricerca Google.

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 nei breadcrumb, devi includere le proprietà obbligatorie.

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

Proprietà obbligatorie
itemListElement

ListItem

Un array dei breadcrumb elencati in un ordine specifico. Consente di specificare ogni breadcrumb con un valore 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
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 nell'ultimo articolo, 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 multimediali 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 rapporto sullo stato dei risultati multimediali pertinente. Idealmente, dovresti notare un aumento delle pagine e nessun aumento di errori o avvisi. Se riscontri problemi nei dati strutturati:

  1. Correggi gli errori.
  2. Controlla un URL pubblicato per verificare se il problema persiste.
  3. Richiedi la convalida utilizzando il rapporto sullo stato.

Dopo aver rilasciato nuovi modelli o aggiornato il codice

Quando apporti modifiche significative al tuo sito web, monitora l'aumento degli errori e degli avvisi relativi ai dati strutturati.
  • Se vedi un aumento di errori, forse hai implementato 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 degli errori), 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 in Ricerca, la frequenza con cui gli utenti fanno clic su di essa e qual è la posizione media che visualizzi nei risultati di ricerca. Puoi anche estrarre automaticamente questi risultati con l'API Search Console.

Risolvere i problemi

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