Панировочные сухари с использованием богатых фрагментов Schema.org

9

У меня возникли проблемы с реализацией фрагментов кода с schema.org. Когда я создаю свою хлебную крошку с использованием документации и запускаю ее с помощью инструмента тестирования Google Rich Snippet , эта хлебная крошка определяется, но не отображается в предварительном просмотре.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">     
      <strong>You are here: </strong>
      <div itemprop="breadcrumb">
        <a title="Home" href="/">Home</a> >
        <a title="Test Pages" href="/Test-Pages/">Test Pages</a> >
      </div>
  </body>
</html>

Если я перейду к использованию фрагментов из data-vocabulary.org, расширенные фрагменты будут правильно отображаться в предварительном просмотре.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body>
      <strong>You are here: </strong>
      <ol itemprop="breadcrumb">
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/" itemprop="url">
            <span itemprop="title">Home</span>
          </a>
        </li>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/Test-Pages/" itemprop="url">
            <span itemprop="title">Test Pages</span>
          </a>
        </li>
      </ol>
  </body>
</html>

Я хочу, чтобы хлебные крошки отображались в результатах поиска, а не в URL-адресе страницы.

Учитывая, что Schema.org является рекомендуемым способом использования расширенных фрагментов, я бы предпочел использовать это, однако, поскольку хлебные крошки не отображаются в предварительном просмотре результатов поиска с использованием этого метода, я не уверен, что это работает правильно.

Я делаю что-то не так в разметке для примера Schema.org?

— Адам Дженкин
источник

Google рекомендует использовать формат микроданных поверх других. Панировочные сухари поддерживают микроданные и RDFa support.google.com/webmasters/bin/… Я бы использовал их рекомендованный формат, если вы хотите, чтобы он появлялся в результатах поиска.

— Анагио

Связанный: Schema.org или Data-Vocabulary.org для панировочных сухарей?

— ОООНР

3

С этой реализацией:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

В Google у вас будет следующая крошка:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
источник

1

Я бы +1 за ваш отзыв о Barenaked Ladies, но, к сожалению, я думаю, что злоупотребил бы системой голосования :-) ТАК, я вместо этого +1 вам за реально работающее решение.

— Поль д'Ауст

1

Мне кажется, что проблема связана с самой документацией schema.org. Вот несколько обучающих ссылок:

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

Жаль, потому что html оказывается сложнее, чем на самом деле, но мы здесь.

Надеюсь, это поможет!

— Стюарт Берроуз
источник

1

Я недавно провел некоторое исследование по этому вопросу.

Оказывается, то, что Google рекомендует для панировочных сухарей, не работает. Когда я посмотрел пару недель назад, в Rich Rich Snippet Tool не удалось найти их собственный пример. Похоже, что Google немного отстает, но все еще впереди других.

Data-vocabulary.org - это принятый и де-факто стандарт, хотя, как говорят, Schema.org заменил его на Data-vocabulary.org как устаревший. Однако реальность не соответствует риторике. Намерение состояло в том, что Schema.org заменит Data-vocabulary.org, и, возможно, это произойдет. Тем не менее, я нашел где-то фрагмент (предназначенный для каламбура), в котором упоминалось, что Google еще не модифицировал их код для распознавания Schema.org.

Сказав это, я нашел пример, который работает в Google и Bing, хотя в последнее время Bing немного изменил ситуацию, поэтому будьте осторожны, если Bing важен для вас.

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

Надеюсь это поможет.

— closetnoc
источник

1

(Оставляя в стороне поддержку потребителей.)

Словарь Schema.org предлагает два способа предоставления крошек для WebPage(и его подтипов):

breadcrumbсвойство с текстовым значением
breadcrumbсвойство со BreadcrumbListзначением

Использование текста легко, но не структурировано (сложнее разобрать для потребителей).
Использование BreadcrumbListболее сложное, но позволяет явно указать все, что нужно (проще для пользователя).

Принимая ваш пример, использование BreadcrumbListможет выглядеть так:

<body itemscope itemtype="http://schema.org/WebPage">     
  <strong>You are here: </strong>
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
    </span> 

    &gt;

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a itemprop="item" href="/Test-Pages/">
        <span itemprop="name">Test Pages</span>
      </a>
    </span>

  </div>
</body>

(Возможно, вам придется переместить элементы, если пробел является проблемой.)

— ОООНР
источник