Корректная разметка микроданных для панировочных сухарей

Question

Изучая, как делать микроданные для панировки веб-страницы, я нашел несколько методов, и я не уверен, что это правильно. Во-первых, мои основные сухари в HTML выглядеть следующим образом:

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

Теперь я структурировать его, как это (как я видел в 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> 

Или я структурировать как ниже, как я видел в некоторых ответах 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> 

Или другой метод, который я не знаю о еще ??

Answer 1

Второй не является частью schema.org, он использует другой словарь из словаря данных, поэтому я не могу комментировать, если он работает. Первый - это микроданные, использующие schema.org, который является типом, указанным в google's breadcrumb examples.

Только структурированные данные, включая ссылки Schema.org, используют schema.org - но вы можете использовать <div> и <span> с помощью Schema.org, если хотите. Структурированные данные дают смысл страницы и по большей части должны быть независимы от визуального представления, что означает, что не имеет значения, используете ли вы пулевые точки или <div> s для ваших панировочных сухарей, структурированные данные будут работать одинаково для обоих и имеют одинаковое значение.

Answer 2

Это может быть субъективное решение. Я бы предпочел метод Microdata от Google, как показано на https://developers.google.com/structured-data/breadcrumbs, который следует методу ol/li.

До тех пор, пока вы указываете предметы, предмет и тип продукта правильно, это не имеет большого значения, какой метод вы используете.

Answer 3

Я хотел бы сделать что-то вроде:

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

Испытано на:https://search.google.com/structured-data/testing-tool

Answer 4

Использование Schema.org в data-vocabulary.org прекращается.

Когда идея возникла, было несколько надбавок. Но с тех пор стандарт был представлен как Schema.org. Это, конечно, поддерживается Google и приводится в его примерах (один - BreadCrumbs).

Answer 5

вам нужно использовать «имя», а не «заголовок», прочитать все об этом на в документации: https://developers.google.com/search/docs/data-types/breadcrumbs