【Schema.org・microdata】検索結果にパンくずリストを表示させる方法｜Google・Yahooなど
今回はGoogleやYahooなどの検索結果に、サイト内のパンくずリストを表示させる方法となります。
GoogleやYahooなどの検索結果にパンくずリストを表示させる方法
GoogleやYahooなどの検索結果にパンくずリストを表示させるには、サイト内のパンくずリストを検索エンジンに認識させるために、パンくずリストを構造化データで定義する必要があります。
構造化データを利用する方法はいくつかありますが、今回の例ではSchema.orgとmicrodataを利用して構造化データを定義します。
また、構造化データのマークアップ後、検索結果にパンくずリストが表示されるタイミングは、検索エンジンがサイトをクロールするタイミングによって異なります。
Schema.orgとmicrodataを利用した例
例えば、次のようなパンくずリストをマークアップするとします。
書籍>Web制作>WordPress
その場合、Schema.orgとmicrodataを利用して構造化データを定義するには、以下のような例となります。
<ul itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/books">
<span itemprop="name">書籍</span>
</a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/books/web">
<span itemprop="name">Web制作</span>
</a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<span itemprop="name">WordPress</span>
<meta itemprop="position" content="3" />
</li>
</ul>パンくずリストを定義するSchema.orgについて
Schema.orgなどの構造化データでは、データに意味を付加するため「ボキャブラリー（語彙）」を利用します。
そのボキャブラリー（語彙）では、扱うデータによって異なる「タイプ」「プロパティ」を利用して構造化データを定義します。また、利用できるプロパティはタイプによって異なります。
パンくずリストの場合には上記例のように、2つ以上の ListItemsタイプ を含む BreadcrumbListタイプ を使い構造化データを定義する必要があります。
BreadcrumbListタイプとプロパティ
BreadcrumbList タイプは、パンくずリスト内のすべての項目を含む、パンくずリスト全体を定義します。
また、次の必須プロパティを指定する必要があります。
itemListElementプロパティ
itemListElementプロパティは、パンくずリストの項目を定義します。
ListItemタイプとプロパティ
ListItem タイプは、パンくずの項目を定義します。また、次の必須プロパティを指定する必要があります。
itemプロパティ
itemプロパティは、パンくずリストの項目の URLを定義します。
また、パンくずリストの最後の項目では、itemプロパティは必須ではありません。
nameプロパティ
nameプロパティは、パンくずリストの項目のページ名を定義します。
positionプロパティ
positionプロパティは、パンくずリストの項目の階層を定義します。
その他のプロパティ
パンくずリストで利用できるその他のプロパティについては、以下のリンク先を参考にしてみてください。
breadcrumb - schema.org Property
microdataについて
Webページのコンテンツに対して、Schema.orgを利用する方法は、いくつかありますが、今回の例では、HTMLタグの属性値として扱うmicrodata（マイクロデータ）を利用しています。
microdataでは、指定した要素内をアイテムとして定義し、そのアイテムに対してSchema.orgのタイプ・プロパティを指定します。
以下、今回の例で利用したmicrodataの属性となります。
itemscope属性
itemscope属性は、指定した要素内をアイテムとして定義します。
また、itemscope属性を指定した場合、itemtype属性も同じ要素に指定します。それにより、そのitemtype属性で指定したタイプの有効な範囲がアイテム内となります。
itemtype属性
itemtyp属性の値には、ボキャブラリー（語彙）のタイプのURLを指定します。
例えば、Schema.orgのBreadcrumbListタイプを指定する場合には、次のURLを指定します。
https://schema.org/BreadcrumbList
itemprop属性
itemprop属性の値には、アイテム内で有効なタイプのプロパティを指定します。
その他の属性
microdataのその他の属性については、以下のリンク先を参考にしてみてください。
マイクロデータ - HTML: HyperText Markup Language | MDN
定義した構造化データをテスト
定義した構造化データが正しいかどうかは、以下のGoogleのサイトから確認できます。