html - 正确的面包屑微数据标记

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

现代(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 验证非常好。