Корректная разметка микроданных для панировочных сухарей
Изучая, как делать микроданные для панировок веб-страниц, я нашел несколько методов, и я не уверен, что это правильно. Во-первых, мои основные сухарики в 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 сайтах, которые я получил эту ошибку.