Photo by Olenka Kotyk via Unsplash
パンくずリスト（Breadcrumbs）の構造化データをマークアップする方法を紹介します。
Googleは検索結果にパンくずリスト（Breadcrumbs）を表示することがあります。
パンくずリストは構造化データを設定していなくても、Googleがページを解析して表示することがありますが、パンくずリストの構造化データをマークアップすると、Googleにより正確に情報を伝えることができます。
構造化データはJSON-LD、もしくはMicrodata、RDFa形式でマークアップします。
JSON-LDでマークアップする
パンくずリストをJSON-LDでマークアップする方法です。JSON-LDはページのどこに記載しても問題ありませんが、通常は<head>タグの中に記載します。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/recipes",
"name": "レシピ",
"image": "http://example.com/images/icon-recipe.png"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/recipes/japanese",
"name": "和食",
"image": "http://example.com/images/icon-japanese.png"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/recipes/japanese/stew",
"name": "煮物",
"image": "http://example.com/images/japanese-stew.png"
}
}]
}
</script>
Microdataでマークアップする
パンくずリストををMicrodataでマークアップする方法です。MicrodataはHTMLタグ内に直接マークアップします。
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes">
<span itemprop="name">レシピ</span>
<img itemprop="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes/japanese">
<span itemprop="name">和食</span>
<img itemprop="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes/japanese/stew">
<span itemprop="name">煮物</span>
<img itemprop="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
RDFaでマークアップする
RDFaもMicrodataと同じようにHTMLタグ内に直接マークアップします。
<ol vocab="http://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/recipes">
<span property="name">レシピ</span>
<img property="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></a>
<meta property="position" content="1">
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/recipes/japanese">
<span property="name">和食</span>
<img property="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></a>
<meta property="position" content="2">
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/recipes/japanese/stew">
<span property="name">煮物</span>
<img property="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
<meta property="position" content="3">
</li>
</ol>
属性の解説
パンくずリスト（Breadcrumbs）の構造化データの属性は次のようになります。
| 属性 | 必須 | 説明 |
|---|---|---|
| position | 必須 | パンくずの位置 |
| item | 必須 | パンくず JSON-LD形式は@idでURLを指定 |
| item.name | 必須 | パンくずのタイトル |
| item.image | 任意 | パンくずを表す画像 |
複数のパンくずリストをマークアップする
サイトの構成によっては、1つのページが複数のカテゴリに属する場合があります。
例えば、肉じゃがの作り方のページが、「煮物」と「じゃがいも」の2つのカテゴリに属する場合です。
レシピ > 和食 > 煮物 食材 > じゃがいも
複数パンくずリストをMicrodataでマークアップすると、次のようになります。パンくずリストの構造化データを複数セット用意すればOKです。
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes">
<span itemprop="name">レシピ</span>
<img itemprop="image" src="http://example.com/images/icon-recipe.png" alt="レシピ"/></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes/japanese">
<span itemprop="name">和食</span>
<img itemprop="image" src="http://example.com/images/icon-japanese.png" alt="和食"/></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/recipes/japanese/stew">
<span itemprop="name">煮物</span>
<img itemprop="image" src="http://example.com/images/japanese-stew.png" alt="煮物"/></a>
<meta itemprop="position" content="3" />
</li>
</ol>
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/foodstuff">
<span itemprop="name">食材</span>
<img itemprop="image" src="http://example.com/images/icon-foodstuff.png" alt="食材"/></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing"
itemprop="item" href="https://example.com/foodstuff/potato">
<span itemprop="name">じゃがいも</span>
<img itemprop="image" src="http://example.com/images/icon-potato.png" alt="じゃがいも"/></a>
<meta itemprop="position" content="2" />
</li>
</ol>