Как реализовать разметку schema.org для панировки?

Немного информации о внедрении палитры, использующей разметку schema.org. До сих пор я мог получить два официальных документа: один, показывающий:

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="#" onclick="location.href='http://schema.org/WebPage'; return false;"/>
   <link itemprop="range" href="#" onclick="location.href='http://schema.org/Text'; return false;"/>
</div>

И еще один, показывающий это:

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

Две разметки совершенно разные. Они имеют какой-то смысл для вас? Если это так, как я могу заключить следующий простой код с этой разметкой - ПРАВОЙ ПУТЬ?

<body>
  <span id="breadcrumbs">
      <a rel="home" href="#" onclick="location.href='http://example.com'; return false;">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="#" onclick="location.href='http://example.com/topic/html/'; return false;">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

Спасибо!

Ответы

Ответ 1

Первый документ - это определение, поэтому не беспокойтесь об этом. Он просто говорит, что breadcrumb является текстовым свойством веб-страниц.

Пример http://schema.org/WebPage - это тот, который вы хотите использовать и понимать. Он устанавливает фрагмент палитры в одно текстовое поле с надписью "Книги > Литература и художественная литературa > Классика".

Вы сделали бы вот так:

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

В результате получится "Noob Archive" HTML "Лучшие практики: разметка для создания панировок на веб-страницах".

Вы можете использовать http://linter.structured-data.org/, чтобы проверить, как анализируются свойства вашего объекта и http://diveintohtml5.ep.io/extensibility.html, чтобы узнать больше о правилах анализа.

Ответ 2

schema.org наконец выпустила новую систему разметки в schema.org v1.92 update (выпущена 2014-12-11). Новая система пакетирования - это расширение ItemList под названием BreadcrumbList. Каждый BreadcrumbList содержит несколько элементов ListItem. Это позволяет использовать несколько маршрутов на каждой странице, разделяя каждую отдельную ссылку как отдельный ListItem и предоставляя обертку вокруг всех панировочных сухарей. Это должно удовлетворять почти все варианты использования.

Вот пример Microdata из schema.org:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Недавно обновленный Google Инструмент тестирования структурированных данных правильно анализирует эту разметку. Тем не менее, редизайн инструмента опустил предварительный просмотр, поэтому трудно сказать, как Google будет отображать панировочные сундуки с этой разметкой в ​​результатах поиска Google (или если Google будет использовать эти данные вообще). linter.structured-data.org правильно анализирует эту новую разметку, но, как упоминалось выше," этот предварительный просмотр показан только в качестве примера того, что поисковая система может. По усмотрению каждого поставщика поисковых систем решить, будет ли ваша страница отображаться в виде расширенного результата поиска или нет на страницах результатов поиска.

Инструменты Google для веб-мастеров недавно добавили возможность отслеживать, насколько хорошо индексируются ваши структурированные данные. Он не показывает, какие структурированные данные используются в результатах поиска, но он показывает, какие данные индексируются на каких страницах, а также показывает любые ошибки в ваших структурированных данных.

Ответ 3

Ответ by @somori неправильный - но это потому, что документация по правильной маркировке панировочных сухарей с microdata/schema.org широко неверна.

Каждый атрибут breadcrumb должен быть объявлен с помощью свойства itemprop, вы не можете просто обернуть их с помощью itemprop = "breadcrumb" в содержащем div или span и использовать itemprop="child" во вложенных div.

Подробнее здесь:

http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

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

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

Затем протестируйте инструмент тестирования структурированных данных google:

http://www.google.com/webmasters/tools/richsnippets

Ответ 4

Согласно Справочному форуму Центра Google для веб-мастеров, экспертам не рекомендуется использовать разметку schema.org breadcrumb на данный момент, это Кажется, что "в структуре схемы schema.org есть какой-то глюк". Вместо этого ему предлагается использовать разметку data-vocabulary.org breadcrumb, которую Google и другие поисковые системы могут легко прочитать.

A-data -vocabulary.org Пример разметки перелома:

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/" itemprop="url">
      <span itemprop="title">example</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/" itemprop="url">
      <span itemprop="title">Fashion</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/" itemprop="url">
      <span itemprop="title">Women</span>
    </a> >
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/boots/" itemprop="url">
      <span itemprop="title">Boots</span>
    </a>
  </span>
</div>

Ответ 5

   itemscope itemtype="...">

Неверно на странице xhtml.

Правильный синтаксис:

   itemscope="itemscope" itemtype="...">

Ответ 6

Ответ

@IssaBERTHE правильный. meh, нужно больше комментариев, чтобы комментировать. Для всех, кто использует wordpress, ознакомьтесь с этим плагином. Вы можете адаптировать его в соответствии с вашими потребностями и следовать стандарту Google. Он имеет встроенное позиционирование.

<Предварительно >   Здесь можно скачать здесь → плагин для патчей для кросс-карт

Он нуждается в небольшом исправлении. Файл, который нам нужно отредактировать, - это breadcrumb-trail-master\inc\breadcrumbs.php

Вам нужно отредактировать строку 213:

$breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">%3$s%4$s%5$s</%1$s>',

Мы удаляем itemprop, поэтому он должен выглядеть так:

 $breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs">%3$s%4$s%5$s</%1$s>',

Теперь прокрутите вверх и отредактируйте строку 172:

 $breadcrumb .= '<ul class="trail-items" itemscope itemtype="http://schema.org/BreadcrumbList">';

Вместо этого добавьте здесь itemprop:

 $breadcrumb .= '<ul class="trail-items" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">';

Автор думал, что вам нужно их разбить, я думаю. Теперь при проверке он должен правильно регистрироваться.

Ответ 7

Теперь это подтверждается в Инструменте тестирования Google Structured Data​​p > 

<nav role="navigation" class="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/about-us"><span itemprop="name">About Us</span></a>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
</nav>

Ответ 8

schema.org дает следующий пример:

<div itemprop="breadcrumb">
  <a href="category/books.html">Books</a> >
  <a href="category/books-literature.html">Literature & Fiction</a> >
  <a href="category/books-classics">Classics</a>
</div>

Источник: http://schema.org/WebPage (примерный раздел, вкладка микроформата)

Другой ресурс: http://www.w3.org/wiki/WebSchemas/Breadcrumbs