Markup corretto dei microdati per breadcrumb

Question

Nella ricerca su come eseguire i microdati per i breadcrumb delle pagine Web, ho trovato un paio di metodi e non sono sicuro di quale sia corretto. In primo luogo, le mie briciole di base nel codice HTML simile a questa:

<div> 
    <a href="/">Root page</a> 
    <a href="/category">Category page</a> 
    <a href="/category/this-page">This page</a> 
</div> 

Ora, faccio a strutturare in questo modo (come ho visto in un example on SchemaOrg:

<ol itemscope itemtype="http://schema.org/BreadcrumbList"> 
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
    <a href="/" itemprop="item"> 
     <span itemprop="name">Root page</span> 
    </a> 
    </li> 
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
    <a href="/category" itemprop="item"> 
     <span itemprop="name">Category page</span> 
    </a> 
    </li> 
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
    <a href="/category/this-page" itemprop="item"> 
     <span itemprop="name">This page</span> 
    </a> 
    </li> 
</ol> 

o devo strutturare piace il seguito come ho visto in alcune risposte StackOverflow:

<div> 
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
    <a href="/" itemprop="url"> 
     <span itemprop="title">Root page</span> 
    </a> 
    </span> 
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
    <a href="/category" itemprop="url"> 
     <span itemprop="title">Category page</span> 
    </a> 
    </span> 
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
    <a href="/category/this-page" itemprop="url"> 
     <span itemprop="title">This page</span> 
    </a> 
    </span> 
</div> 

O un metodo diverso che non so ancora ??

Answer 1

Il secondo non fa parte di schema.org, utilizza un vocabolario diverso dal vocabolario dei dati quindi non posso commentare se funziona. Il primo è microdati usando schema.org, che è il tipo dato in google's breadcrumb examples.

Solo i dati strutturati, inclusi i collegamenti Schema.org, utilizzano schema.org, ma se lo si desidera è possibile utilizzare e <span> con Schema.org. I dati strutturati forniscono il significato della pagina e per la maggior parte dovrebbero essere indipendenti dal modo in cui appare visivamente, il che significa che non importa se usi i punti elenco o <div> s per il tuo breadcrumb, i dati strutturati funzioneranno allo stesso modo per entrambi e hanno lo stesso significato.

Answer 2

Potrebbe essere una decisione soggettiva da prendere. Preferirei il metodo Microdata di Google come mostrato allo https://developers.google.com/structured-data/breadcrumbs che segue il metodo ol/li.

Finché si menziona itemscope, itemptype e itemprop correttamente, non dovrebbe importare molto quale metodo si utilizza.

Answer 3

vorrei fare qualcosa di simile:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
    <a href="#" itemprop="url"><span itemprop="title">Homepage</span></a> 
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"><span itemprop="title">Child-A</span></a> 
    </div> 
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 
     <a href="#" itemprop="url"><span itemprop="title">Child-B</span></a> 
    </div> 
</div> 

Testato su:https://search.google.com/structured-data/testing-tool

Answer 4

Usa Schema.org come data-vocabulary.org è abbandonato.

Ci sono stati alcuni commenti al momento dell'ideazione. Ma da allora lo standard si è evoluto come Schema.org. Naturalmente è supportato da Google e fornito nei suoi esempi (uno è BreadCrumbs).

Answer 5

è necessario usare "nome" non "titolo", leggete tutte su nella documentazione: https://developers.google.com/search/docs/data-types/breadcrumbs