正确的面包屑微数据标记

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>

或者像我在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>

或者我还不知道的另一种方法??

Answer 1

我会做类似的事情：

<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 2

使用 Schema.org ，因为 data-vocabulary.org 已被放弃。

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

Answer 3

现代（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完全兼容（另请参阅该商品的ID），并通过了https://search.google.com/structured-data/testing-tool优秀的Google验证。

Answer 4

第二个不是schema.org的一部分，它使用来自数据词汇表的不同词汇表，因此我无法评论它是否有效。第一个是使用schema.org的微数据，这是google's breadcrumb examples中给出的类型。

只有包含Schema.org链接的结构化数据才会使用schema.org - 但如果您愿意，可以将for (int i = 0; i < max; i++ ) { int lowerBound = (result / i); int upperBound = (result / i + 408); //or something //...other necessary code here... } 和<div>与Schema.org一起使用。结构化数据给出了页面的含义，并且在很大程度上应该与它在视觉上的显示方式无关，这意味着对于您的面包屑，结构化数据使用项目符号或<span>是否无关紧要将以相同的方式为两者工作并具有相同的含义。

Answer 5

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

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

Answer 6

您需要使用“名称”而非“标题”，请在文档中阅读所有相关内容：https://developers.google.com/search/docs/data-types/breadcrumbs

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标记，我刚刚从锚点中删除了属性itemscope

来自

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

到

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

成功了。我在2个网站上测试并检查了该错误。