正确的面包屑微数据标记

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>

或者我是否像我在一些 Whosebug 答案中看到的那样构建它：

<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

这可能是一个主观决定。我更喜欢 Google 中的微数据方法，如 https://developers.google.com/structured-data/breadcrumbs 所示，它遵循 ol/li 方法。

只要您正确提及 itemscope、itemptype 和 itemprop，使用哪种方法都无关紧要。

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因为数据-vocabulary.org被放弃。

当这个想法出现时，有一些标记。但从那时起，标准就出现了 Schema.org。它当然得到 Google 的支持并在其示例中给出（一个是 BreadCrumbs）。

Answer 5

您需要使用 "name" 而不是 "title"，请阅读文档中的所有相关信息：https://developers.google.com/search/docs/data-types/breadcrumbs

Answer 6

现代 (2019) 正确的面包屑微数据标记如下所示。

如果您想抱怨最佳做法，请不要将 最后一个面包屑项 作为页面上的 link - 您可以改用 <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（另请参阅该项目的 ID 是必需的）并通过了 Google 验证 https://search.google.com/structured-data/testing-tool 非常好。

Answer 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="https://exampe.com/">
<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="https://exampe.com/category">
<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="https://exampe.com/category/this-page">
<span itemprop="name">This page</span></a>
<meta itemprop="position" content="3">
</li>

</ol>

为了修复 Google Search Console 中有关缺失字段 "id" 的 Fix Breadcrumbs 标记，我刚刚从 anchor

中删除了属性 itemscope

来自

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

到

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

它奏效了。我在 2 个网站上测试并检查了这个错误。

正确的面包屑微数据标记

Correct microdata markup for breadcrumbs

html

seo

microdata

schema.org