微数据面包屑的 HTML5 验证

Question

我试图让我的页面进行验证，它现在抛出的唯一错误是：

此时元素 a 上不允许属性 itemprop 。

我的代码如下：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a>
</div>  

这遵循 Google 在以下页面上提供的电子邮件：

面包屑

这里似乎也遵循 HTML5 微数据规范：

HTML5 Microdata

有什么想法为什么这不能验证吗？我错过了什么，或者这对于验证者目前无法验证来说太新了？

Answer 1

要让面包屑显示在 SERP 中，请像这样编码您的 schema.org 标记。请注意 div 嵌套和“child”属性：

<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

许多关于面包屑 schema.org 标记的文档都非常不正确。有一些关于此的线索。以上是我的工作解决方案，希望对您有所帮助。

Answer 2

您使用的是哪个验证器？有些尚不支持 HTML5 的最新功能，有些则支持，但由于您声明的文档类型而不会触发对文档的正确验证。

不过，新发布的Nu验证器应该不会出现这些问题。您可以在 .net 杂志上阅读相关内容。

Answer 3

schema.org 已取代 data-vocabulary.org。 Schema.org 架构得到主要搜索引擎的认可。 Schema.org 的架构中没有 itemprop=url 。因此，可能是 Google 的工具或其搜索引擎机器人已停止遵循 data-vocabulary.org 模式。无论如何，最好转向 Schema.org 面包屑。

项目类型 - 网页是网页的默认类型。因此，即使您不提供 itemtype - WebPage 并提供 BreadCrumb 类型，那么 Google 也会将其理解为面包屑。我在 Schema.org 页面上读到了这篇文章。我已经给了你这个链接。

使用此 Google 的工具进行验证。

Answer 4

    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.example.com">
        <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://www.example.com/category1">
      <span itemprop="name">Category 1</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.example.com/category1/subcategory">
      <span itemprop="name">SubCategory</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

这会将有关面包屑的许多数据暴露给爬虫。如果您将列表项设为内联，则输出将如下所示：

1.Home > 2.类别> 3.子类别