麪包屑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我receved以下消息：

我們沒有看到這個頁面上的任何標記。請確保標記已正確實施。

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

那麼，有沒有一種方法來創建使用微格式的麪包屑導航這將既爲谷歌和必應是有效的？

Answer 1

重組你的目標，據我的理解：你想標記您的麪包屑

• 用微用兩個詞彙
• （Schema.org和Data-Vocabulary.org）
• 而不會複製您的內容
• 這樣Bing和Google的測試工具仍然會對其進行驗證。

微觀數據使得它很難混的詞彙：

• 在itemtype，你只能使用從類型相同的詞彙。

• 在itemprop中，可以混合來自不同詞彙表的屬性，但只能以較短的字符串形式指定一個詞彙表中的屬性，而必須將所有其他詞彙表中的屬性指定爲絕對URI。

  （這不是一個問題，如果消費者支持他們認識到性能的絕對URI形式）。

（順便說一句，RDFa的支持方式更好的混合詞彙，所以你可能要考慮使用RDFa instead of Microdata。）

也許是一種避免這個問題的方法。

使用Data-Vocabulary.org代替Bing 和 Google。

當詞彙Data-Vocabulary.org被棄用和刪除（我想知道爲什麼Bing還在推薦它），谷歌似乎也支持它（可能是因爲它仍然在很多網站上使用，當時谷歌也推薦它）。

我不知道它是否真的有效，但至少Google’s SDTT不會爲您的數據詞彙表提供任何警告/錯誤。org snippet。

解決方案，也許。

不幸的是，我不能在Bing的工具中測試它（因爲需要帳戶），所以下面的代碼片段不一定有效。

itemref +爲Data-Vocabulary.org的title

這個片段絕對URI使用Schema.org作爲主要的詞彙。 Schema.org的BreadcrumbList以外的空div用於爲Data-Vocabulary.org的Breadcrumb創建項目。此項目通過itemref引用a元素。它重新使用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> 

它可以在谷歌的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 +絕對URI爲Schema.org的name

同樣的想法就像在上面的代碼片段，但這次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> 

它可以在谷歌的SDTT（應該沒事忽略name無法識別的警告;它指定爲絕對URI，所以到處都可以使用）。