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

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

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

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

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

Ответ 1

Современные (2019) правильные хлебные крошки Разметка микроданных, как указано ниже.

И если вы хотите жаловаться, что лучшие практики не делают последний элемент крошки в качестве ссылки на вашей странице - вы можете использовать <span> вместо <a> таким образом:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/" itemid="/">
      <span itemprop="name">Root page</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/category" itemid="/category">
      <span itemprop="name">Category page</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/category/this-page">
      <span itemprop="name">This page</span>
    </span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

Этот код полностью соответствует BreadcrumbList (см. Также, что требуется идентификатор элемента) и проходит проверку Google на https://search.google.com/structured-data/testing-tool превосходно.

Ответ 2

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

<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

Ответ 3

Используйте Schema.org как data-vocabulary.org заброшен.

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

Ответ 4

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

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

Ответ 5

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

Пока вы указываете itemscope, itemptype и itemprop правильно, не важно, какой именно метод вы используете.

Ответ 6

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

Ответ 7

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="#" onclick="location.href='https://exampe.com/'; return false;">
<span itemprop="name">Root page</span></a>
<meta itemprop="position" content="1">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="#" onclick="location.href='https://exampe.com/category'; return false;">
<span itemprop="name">Category page</span></a>
<meta itemprop="position" content="2">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="#" onclick="location.href='https://exampe.com/category/this-page'; return false;">
<span itemprop="name">This page</span></a>
<meta itemprop="position" content="3">
</li>

</ol>

Чтобы исправить разметку "Хлебные крошки" в консоли поиска Google в связи с отсутствием поля "id", я просто удалил свойство itemscope из привязки

от

<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="..">link</a>

от

до

<a itemtype="http://schema.org/Thing" itemprop="item" href="..">

и это сработало. Я проверил и проверил это на 2 сайтах, которые я получил эту ошибку.