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

its*_*_me 27 xhtml breadcrumbs schema.org

关于使用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>
Run Code Online (Sandbox Code Playgroud)

而另一个显示这个:

<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>
Run Code Online (Sandbox Code Playgroud)

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

<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>
Run Code Online (Sandbox Code Playgroud)

谢谢!

thi*_*der 23

schema.org最终在schema.org v1.92更新(2014-12-11发布)中发布了一个新的breadcrumb标记系统.新的面包屑系统是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>
Run Code Online (Sandbox Code Playgroud)

谷歌最近重新设计的结构化数据测试工具正确解析了这个标记.但是,该工具的重新设计放弃了搜索预览,因此很难说谷歌将如何在谷歌搜索结果中显示带有此标记的面包屑(或者谷歌将使用这些数据).该linter.structured-data.org正确地解析这个新的标记为好,但因为有提到,"该预览是只显示一个什么样的搜索引擎的一个例子可能会显示,这是每一个搜索引擎提供商的自由裁量权来决定您的网页是否会在搜索结果页中显示为增强型搜索结果."

Google网站管理员工具最近添加了跟踪结构化数据索引编制情况的功能.它不显示搜索结果中使用了哪些结构化数据,但它确实显示了在哪些页面上编制索引的数据,还显示了结构化数据中的任何错误.


Sim*_*ill 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>
Run Code Online (Sandbox Code Playgroud)

结果将是"Noob Archive»HTML»最佳实践:用于在网页上设置面包屑的标记".

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

  • 上述代码不会在http://www.google.com/webmasters/tools/richsnippets中显示面包屑 (7认同)

Row*_*use 12

@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>
Run Code Online (Sandbox Code Playgroud)

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

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

  • 他问schema.org不是数据词汇.从某种意义上说你是对的,但也是错的. (5认同)
  • 数据词汇表是schema.org的过时前身 (2认同)

小智 8

根据谷歌网站管理员中心帮助论坛,专家不建议暂时使用schema.org面包屑标记,似乎"schema.org面包屑结构中存在某种故障".相反,我们需要使用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>
Run Code Online (Sandbox Code Playgroud)

  • data-vocabulary.org被放弃了.Schema.org是标准. (2认同)