Html 面包屑的正确微数据标记

在研究如何为网页面包屑制作微数据时，我发现了几种方法，但我不确定哪种方法是正确的。首先，HTML中的基本面包屑如下所示：

<div>
  <a href="/">Root page</a>
  <a href="/category">Category page</a>
  <a href="/category/this-page">This page</a>
</div>

现在，我是这样构造它的吗（正如我在一篇文章中看到的：

还是像我在一些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>

---

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

第二种方法不是schema.org的一部分，它使用了与数据词汇表不同的词汇表，因此我无法评论它是否有效。第一种方法是使用schema.org的微数据，这是中给出的类型

---

只有包含Schema.org链接的结构化数据才使用Schema.org，但如果愿意，您可以将

和

与Schema.org一起使用。结构化数据给出了页面的含义，并且在很大程度上应该独立于页面的视觉显示方式，这意味着无论您是使用项目符号还是

，都不重要你的面包屑，结构化数据将以同样的方式为两者工作，并具有相同的含义。

这可能是一个主观决定。我更喜欢谷歌的微数据方法，如图所示，它遵循ol/li方法

---

只要您正确地提到itemscope、itemptype和itemprop，您使用哪种方法应该无关紧要。

我会这样做：

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

测试日期：

使用因为数据词汇表.org被放弃

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

你需要使用“名称”而不是“标题”，阅读文档中的所有内容：

现代（2019）正确的面包屑微数据标记如下所示

如果您想抱怨最佳做法，请不要将最后一个面包屑项目作为页面上的链接-您可以使用

而不是

本页

此代码完全符合

BreadcrumbList

（另请参见该项目的id是必需的），并通过了卓越的Google验证。

<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搜索控制台中关于缺少字段“id”的面包屑标记，我刚刚从锚中删除了属性itemscope

从

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

到

---

我在两个网站上测试并检查了这个错误。

你想知道应该使用哪个HTML结构（

ol

vs.

div

），或者哪个词汇表（Schema.org vs.Data词汇表.org）如何使用？这是两个独立的问题。如果您决定使用第一个示例，您可以将

ol

替换为

div

，而

li

可以替换为

span

，以保持页面外观不变。可以使用vocbulary或vocbulary，尽管Schema.org似乎使用得更频繁一些。这两个选项都是Schema.org不是吗？我不知道为什么他们会创建两种完全相同的方法。当然每种方法都有正确的用法吗？另请参阅此答案，对Schema.org代码进行一些小的更正

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

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

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