Breadcrumb Microdata标记对Google和Bing都有效

Question

我想用Microdata格式创建面包屑导航。

所以我使用了以下BreadcrumbList标记并且Google Structured Data Testing Tool认出了它：

<ol itemscope itemtype="http://schema.org/BreadcrumbList">                  
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/home">
            <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://example.com/home/fashionn">
            <span itemprop="name">Fashion</span>
        </a>
        <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">Coats</span>
        <meta itemprop="position" content="3">
    </li>
</ol>

但是从Bing Markup Validator我收到了以下消息：

  

我们在此页面上没有看到任何标记。请确保标记已正确实施。

关于Bing documentation，以下标记对于痕迹导航是正确的：

<ol>                    
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="https://example.com/home">
            <span itemprop="title">Home</span>
        </a>
    </li>

    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="https://example.com/home/fashion">
            <span itemprop="title">Fashion</span>
        </a>
    </li>

    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <span itemprop="title">Coats</span>                 
    </li>
</ol>

那么有没有办法用Microdata格式创建面包屑导航，这对Google和Bing都有效？

Answer 1

根据我的理解，重新定义您的目标：您想要标记您的面包屑

• with Microdata
• 使用两个词汇表（Schema.org和Data-Vocabulary.org）
• 不重复您的内容
• 以便Bing和Google的测试工具仍在验证它。

Microdata使词汇混合变得困难：

• 在itemtype中，您只能使用同一词汇表中的类型。

• 在itemprop中，您可以混合来自不同词汇表的属性，但只能使用较短的字符串形式指定一个词汇表中的属性，而所有其他词汇表中的属性必须指定为绝对值的URI。

  （如果消费者支持他们识别的属性的绝对URI表单，这不是问题。）

（顺便说一句，RDFa支持更好地混合词汇表，因此您可能需要考虑使用RDFa instead of Microdata。）

可能是一种避免这个问题的方法。

使用Data-Vocabulary.org for Bing 和 Google。

虽然词汇表Data-Vocabulary.org已被弃用和删除（我想知道为什么Bing还在推荐它），谷歌似乎仍然支持它（可能是因为当时谷歌推荐它仍在许多网站上使用）它也是。）

我不知道它是否真的有效，但至少Google’s SDTT没有为您的Data-Vocabulary.org代码段提供任何警告/错误。

解决方案，也许。

不幸的是，我无法在Bing的工具中测试它（因为需要一个帐户），因此以下代码段不一定有用。

itemref + Data-Vocabulary.org的title

的绝对URI

此代码段使用Schema.org作为主要词汇表。 Schema.org div之外的空BreadcrumbList用于为Data-Vocabulary.org的Breadcrumb创建项目。此项通过a引用itemref元素。它重用url属性（因为它在两个词汇表中的名称相同），并提供Data-Vocabulary.org的title属性作为绝对URI。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b1 b2">
</div>

<ol itemscope itemtype="http://schema.org/BreadcrumbList">                  

  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
      <span itemprop="name">
        <a itemprop="url" href="https://example.com/" id="b1">
          <span itemprop="http://data-vocabulary.org/Breadcrumb/title">Home</span>
        </a>
      </span>
    </span>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="item" itemscope itemtype="http://schema.org/WebPage">
      <span itemprop="name">
        <a itemprop="url" href="https://example.com/fashion" id="b2">
          <span itemprop="http://data-vocabulary.org/Breadcrumb/title">Fashion</span>
        </a>
      </span>
    </span>
    <meta itemprop="position" content="2" />
  </li>

</ol>

它适用于Google的SDTT（忽略Breadcrumb/title无法识别的警告应该没问题;它被指定为绝对URI，因此可以在任何地方使用。）

Bing的测试工具是否有效取决于Bing是否将http://data-vocabulary.org/Breadcrumb/title识别为title属性。

由于词汇表已被删除，我不确定它是否真的是http://data-vocabulary.org/Breadcrumb/title而不是http://data-vocabulary.org/title，但如果我没记错，那应该是第一个。

itemref + Schema.org的name

的绝对URI

与上面的代码段相同，但这次Data-Vocabulary.org将成为主要词汇，而Schema.org的BreadcrumbList则以空div创建。

这更难，因为Schema.org的结构需要更多属性，因此您必须创建更多空元素。

<div itemscope itemtype="http://schema.org/BreadcrumbList">

  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b1">
    </span>
    <meta itemprop="position" content="1" />
  </div>

  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemprop="item" itemscope itemtype="http://schema.org/WebPage" itemref="b2">
    </span>
    <meta itemprop="position" content="2" />
  </div>

</div>

<ol itemscope itemtype="http://data-vocabulary.org/Breadcrumb">                  

  <li itemprop="title">
    <a itemprop="url" href="https://example.com/" id="b1">
      <span itemprop="http://schema.org/name">Home</span>
    </a>
  </li>

  <li itemprop="title">
    <a itemprop="url" href="https://example.com/fashion" id="b2">
      <span itemprop="http://schema.org/name">Fashion</span>
    </a>
  </li>

</ol>

它适用于Google的SDTT（忽略name无法识别的警告应该没问题;它被指定为绝对URI，因此可以在任何地方使用。）