xhtml - 如何为面包屑实现 schema.org 标记？

Question

没有太多关于使用 schema.org 标记实现面包屑的信息。到目前为止，我可以获得两份官方文件——一份展示了这一点：

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

另一个展示了这一点：

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

谢谢！

score 24 · Accepted Answer

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

这是来自 schema.org 的微数据示例：

<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 最近重新设计的结构化数据测试工具可以正确解析此标记。但是，该工具的重新设计放弃了搜索预览，因此很难说 Google 将如何在 Google 搜索结果中显示带有此标记的面包屑（或者 Google 是否会使用此数据）。linter.structured-data.org也正确解析了这个新标记，但正如那里所提到的，“此预览仅作为搜索引擎可能显示的示例显示。由每个搜索引擎提供商自行决定您的页面是否会在他们的搜索结果页面中显示为增强的搜索结果。”

谷歌网站管理员工具最近增加了跟踪结构化数据被索引的能力。它不会显示搜索结果中使用了哪些结构化数据，但会显示哪些数据在哪些页面上被编入索引，并且还会显示结构化数据中的任何错误。

score 16 · Accepted Answer

第一个文档是定义，所以不用担心。它只是说面包屑是网页的文本属性。

http://schema.org/WebPage上的示例是您想要使用和理解的示例。它将面包屑片段设置为单个文本字段，显示“书籍 > 文学与小说 > 经典”。

你会这样做：

<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 » Best Practices: Markup for Setting up Breadcrumbs on Web Pages”。

您可以使用http://linter.structured-data.org/检查您的项目属性是如何解析的，并使用http://diveintohtml5.ep.io/extensibility.html来了解有关解析规则的更多信息。

score 11 · Accepted Answer

@somori的答案是不正确的——但那是因为有关使用 microdata / schema.org 正确标记面包屑的文档广泛不正确。

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

更多信息在这里：

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

score 7 · Accepted Answer

根据Google Webmaster Central Help Forum的说法，专家暂时不建议使用 schema.org 面包屑标记，似乎“schema.org 面包屑结构存在某种故障”。相反，建议使用 data-vocabulary.org 面包屑标记，Google 和其他搜索引擎也可以轻松阅读该标记。

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

score 4 · Accepted Answer

   itemscope itemtype="...">

Is invalid in an xhtml page.

The correct syntax is:

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

设置面包屑模式会对您的网站页面的搜索点击率 (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>

score -1 · Accepted Answer

@IssaBERTHE 的回答是正确的。嗯，需要更多代表发表评论，对于使用 wordpress 的任何人，请查看此插件。您可以对其进行定制以满足您的需求并遵循谷歌标准。它具有内置的定位。

    可以在这里下载 ->面包屑跟踪插件

它确实需要一点纠正。我们需要编辑的文件是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">';

我猜作者认为您必须将它们分解。现在检查时，它应该正确注册。

score -4 · Accepted Answer

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

xhtml - 如何为面包屑实现 schema.org 标记？

9 回答 9

Related

Reference