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

问题描述 投票:26回答:8

关于使用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>

谢谢!

xhtml breadcrumbs schema.org
8个回答
19
投票

schema.org最终在schema.org v1.92 update发布了一个新的breadcrumb标记系统(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>

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

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


17
投票

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

http://schema.org/WebPage上的示例是您要使用和理解的示例。它将breadcrumb片段设置为单个文本字段“Books> Literature&Fiction> 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查找有关解析规则的更多信息。


12
投票

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

然后在谷歌结构化数据测试工具中测试:

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


8
投票

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

3
投票
   itemscope itemtype="...">

在xhtml页面中无效。

正确的语法是:

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

1
投票

现在,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>

0
投票

@ 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">';

作者认为你不得不打破它们。现在检查时,它应该正确注册。


-3
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.