Question

使用schema.org标记实现面包屑的信息不多。到目前为止，我可以得到两份正式文件 - one showing：

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="http://schema.org/WebPage"/>
   <link itemprop="range" href="http://schema.org/Text"/>
</div>

And another显示了这一点：

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

这两个加价完全不同。他们对你有意义吗？如果他们这样做，我如何用该标记包含以下简单面包屑代码 - 正确的方式？

<body>
  <span id="breadcrumbs">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

谢谢！

Answer 1

schema.org最终在schema.org v1.92 update（2014-12-11发布）中发布了一个新的痕迹标记系统。新的面包屑系统是名为ItemList的BreadcrumbList的扩展。每个BreadcrumbList包含多个ListItem元素。这允许每页有多个面包屑路径，将每个链接分离为单独的ListItem，并提供围绕整个面包屑的包装器。这几乎应该满足每个用例。

以下是schema.org的Microdata示例：

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Google最近重新设计的Structured Data Testing Tool正确解析了这个标记。但是，该工具的重新设计放弃了搜索预览，因此很难说谷歌将如何在谷歌搜索结果中显示带有此标记的面包屑（或者谷歌将使用这些数据）。 linter.structured-data.org也正确地解析了这个新标记，但正如那里所提到的，“此预览仅作为搜索引擎可能显示的示例显示。这是由每个标记自行决定的。搜索引擎提供商决定您的网页是否会在搜索结果页中显示为增强型搜索结果。“

Google Webmaster Tools最近添加了跟踪结构化数据索引编制程度的功能。它不会显示搜索结果中使用了哪些结构化数据，但它确实显示了哪些数据在哪些页面上被编入索引，并且还显示了结构化数据中的任何错误。

Answer 2

第一个文件是定义，所以不要担心。它只是说breadcrumb是WebPages的文本属性。

http://schema.org/WebPage上的示例是您要使用和理解的示例。它将面包屑片段设置为单个文本字段，标题为“Books＆gt; Literature＆amp; Fiction＆gt; Classics”。

你会这样做：

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

结果将是“Noob Archive»HTML»最佳实践：用于在网页上设置面包屑的标记”。

您可以使用http://linter.structured-data.org/检查商品属性的解析方式，并使用http://diveintohtml5.ep.io/extensibility.html了解有关解析规则的更多信息。

Answer 3

@somori的答案不正确 - 但这是因为使用microdata / schema.org正确标记面包屑的文档大致不正确。

每个面包屑都需要用itemprop属性声明，你不能用包含div或span中的itemprop =“breadcrumb”包装它们，并在嵌套的div中使用itemprop="child"。

更多信息：

http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

这样做，让您的面包屑显示在SERP中：

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

然后在Google结构化数据测试工具中进行测试：

http://www.google.com/webmasters/tools/richsnippets

Answer 4

根据Google Webmaster Central Help Forum，专家不建议暂时使用schema.org breadcrumb标记，似乎“schema.org breadcrumb结构中存在某种故障”。相反，我们需要使用data-vocabulary.org痕迹标记，谷歌和其他搜索引擎也可以轻松阅读。

data-vocabulary.org面包屑标记示例：

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/" itemprop="url">
      <span itemprop="title">example</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/" itemprop="url">
      <span itemprop="title">Fashion</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/" itemprop="url">
      <span itemprop="title">Women</span>
    </a> >
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/boots/" itemprop="url">
      <span itemprop="title">Boots</span>
    </a>
  </span>
</div>

Answer 5

   itemscope itemtype="...">

在xhtml页面中无效。

正确的语法是：

   itemscope="itemscope" itemtype="...">

Answer 6

现在在Google的结构化数据测试工具中验证

<nav role="navigation" class="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/about-us"><span itemprop="name">About Us</span></a>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
</nav>

Answer 7

@ IssaBERTHE的回答是正确的。嗯，需要更多的代表评论，对于任何使用wordpress的人来看看这个插件。您可以根据自己的需要定制它，并遵循谷歌标准。它内置了定位。

    Can Download here -> breadcrumb-trail plugin

确实需要一点修改。我们需要编辑的文件是breadcrumb-trail-master \ inc \ breadcrumbs.php

您需要编辑第213行：

$breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb">%3$s%4$s%5$s</%1$s>',

我们正在删除itemprop，因此它应该如下所示：

 $breadcrumb = sprintf('<%1$s role="navigation" aria-label="%2$s" class="breadcrumb-trail breadcrumbs">%3$s%4$s%5$s</%1$s>',

现在向上滚动并编辑第172行：

 $breadcrumb .= '<ul class="trail-items" itemscope itemtype="http://schema.org/BreadcrumbList">';

在此处添加itemprop：

 $breadcrumb .= '<ul class="trail-items" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">';

作者认为你必须打破它们。现在检查时，它应该正确注册。

Answer 8

采用面包屑架构可能会对您网站页面的搜索点击率（CTR）产生重大影响。

下面是示例如何在页面上实现面包屑列表架构

1。通过HTML

<ul itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/"><span itemprop="name">Services</span></a>
        <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/structured-data.php"><span
                itemprop="name">Structured Data</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ul>

2。通过JSON-LD

您还可以在google结构化数据测试工具上检查实现的模式是否正确，并且是否正确。

例如：https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

<html>
<head>
<title>The title of the page</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>
</head>
<body>
</body>
</html>

Answer 9

schema.org给出了以下示例：

<div itemprop="breadcrumb">
  <a href="category/books.html">Books</a> >
  <a href="category/books-literature.html">Literature & Fiction</a> >
  <a href="category/books-classics">Classics</a>
</div>

来源：http://schema.org/WebPage（示例部分，微格式标签）

其他资源：http://www.w3.org/wiki/WebSchemas/Breadcrumbs

如何为breadcrumb实现schema.org标记？

9 个答案: