Breadcrumb GoogleとBingの両方に有効なMicrodataマークアップ

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。マークアップが正しく実装されていることを確認してください。

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

だから、GoogleとBingのために両方とも有効になりミクロ形式の階層リンクナビゲーションを作成する方法があります：

次のマークアップは、パンくずリストのための正しいBing documentationについては？限り、私はそれを理解して、あなたの目標を修正してくださいするには

Answer 1

：2つの語彙（Schema.orgとData-Vocabulary.org）

を使用してミクロ

で

• あなたのパン粉をマークアップしたいです内容を複製することなく
• BingとGoogleのテストツールで検証されます。

ミクロは難しい語彙をミックスすることができます：

• itemtypeで、あなただけの同じ語彙から型を使用することができます。

• itempropでは、異なるボキャブラリのプロパティを混在させることができますが、他のすべてのボキャブラリのプロパティを絶対URIとして指定する必要がありますが、1つのボキャブラリのプロパティを短い文字列フォームで指定できます。

  （消費者が認識性質のために、絶対URIの形式をサポートしている場合これは問題ではありません。）

（ちなみに、RDFaのはずっといい語彙を混合サポートし、あなたは検討する必要がありますRDFa instead of Microdataを使用してください。）

問題を回避する方法、多分。

Bing と GoogleでData-Vocabulary.orgを使用してください。

ボキャブラリーData-Vocabulary.orgは廃止され、削除されていますが（私はBingが依然としてそれを推薦しているのだろうと思うのですが）、Googleはまだそれをサポートしているようですが（当時の多くのウェブサイトそれもお勧めします）。

実際に動作するかどうかわかりませんが、少なくともGoogle’s SDTTはあなたのデータボキャブラリーに警告/エラーを与えません。orgのスニペット。

解決策、おそらく。

残念ながら、（アカウントが必要なので）Bingのツールではテストできませんので、次のスニペットは必ずしも機能しません。 Data-Vocabulary.orgのtitle

このスニペット用

itemref +絶対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> 

それはGoogleのSDTT（Breadcrumb/titleが認識されないという警告を無視して問題ないはずです。それは絶対URIとして指定されていますので、それはどこでも使用することができます）で動作します。

Bingのテストツールで動作するかどうかは、Bingがtitleプロパティとしてhttp://data-vocabulary.org/Breadcrumb/titleを認識するかどうかによって異なります。

語彙が削除されると、http://data-vocabulary.org/titleの代わりに実際にhttp://data-vocabulary.org/Breadcrumb/titleだったかどうかはわかりませんが、正しく覚えていれば最初のものだったはずです。

itemref +上記のスニペットのようSchema.orgのname

同じ考えの絶対URIは、しかしSchema.orgのBreadcrumbListが空divで作成される一方で、この時間はData-Vocabulary.orgは、主要な語彙だろう。

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として指定されていますので、それはどこでも使用することができます）で動作します。