Question

哪一个是正确的面包屑结构？

示例1：

  <a href="http://example.com/topic" itemprop="url">
  <span itemprop="title">Topic Archive</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
    <a href="http://example.com/topic/parent-category" itemprop="url">
    <span itemprop="title">ParentCategory</span></a>
  </div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;">
    <a href="http://example.com/child-category" itemprop="url">
    <span itemprop="title">Child Category</span></a>
  </div>

  <span>Post Title Goes Here</span>

</div>

示例2：

<div id="breadcrumb">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›

        <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://www.example.com/topic/parent-category/" itemprop="url"><span itemprop="title">Parent Category</span></a> ›

          <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://www.example.com/topic/child-category/" itemprop="url"><span itemprop="title">Child Category</span></a> ›
            </span>

        <span>Post Title Goes Here</span>
        </span>
  </span>
</div>

示例3：

<div id="breadcrumb">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a rel="home" href="http://www.example.com/topic" itemprop="url"><span itemprop="title">Topic Archive</span></a> ›

        <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://www.example.com/topic/parent-category/" itemprop="url"><span itemprop="title">Parent Category</span></a> ›

          <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://www.example.com/topic/child-category/" itemprop="url"><span itemprop="title">Child Category</span></a> ›


          <h1 itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="http://www.example.com/topic/child-category/current-post-link" itemprop="url"><span itemprop="title">Current Post Title</span></a> ›
            </h1>          

          </span>
        </span>
  </span>
</div>

在此处测试代码：Google Testing Tool

例如3号，是否将当前页面包含在breadcrumb模式中？我违反了任何规定吗？

Answer 1

如果您想使用data-vocabulary.org（已经过时），示例3是最正确的。将当前页面包含在痕迹中是标准的。示例1不正确，因为您没有嵌套元素。在这种情况下，您需要添加itemref属性并为您的div提供ID。 itemref属性应该等于下一个孩子的id。 https://developers.google.com/structured-data/breadcrumbs?rd=1

你绝对应该考虑转移到schema.org，因为这是主要搜索引擎几乎肯定会同意的格式。根据schema.org，这些都不是正确的实现。您的整体列表应标记为BreadcrumbList，每个项目都标记为ListItem。是的，按照惯例，当前页面是列表中的最后一项。

https://schema.org/BreadcrumbList

正确的面包屑结构与孩子

1 个答案: