パンくずリストとは
パンくずリストは自分がサイト内のどの位置にいるのかを示すナビゲーションの一種です。
英語では「breadcrumbs」と呼ばれており、童話の「ヘンゼルとグレーテル」で、兄妹が道しるべの為にパンくずを森の中に点々とおいていったエピソードが名前の由来になっています。ページ数が少ないシンプルな構造のWEBサイトでは、自分がどのページを見ているか分からなくなるケースは少ないですが、大規模なECサイト等では自分がどのような商品カテゴリーページを見ているかが分からなくなるケースがあります。このような場合にパンくずリストの存在が役に立ちます。
基本的には以下のようなページの階層ごとにリンクされます。
- HOME > トップス > Tシャツ > 商品A
- HOME > パンツ > ジーンズ > 商品B
このように、自分がどのカテゴリのページを閲覧しているのかが視覚的にわかりやすくなっています。
パンくずリストの種類
基本的なパンくずリストを紹介しましたが、パンくずリストにはその役割や機能によって3つのタイプに分けて呼ばれることがあります。
位置型パンくずリスト
先述した基本的なタイプで現在WEB上で最も見るパンくずリストです。
サイトのディレクトリ構造に沿ったリストになっており、サイトにどのページから流入しても、そのページがサイトのどこに位置しているのかを一目で見ることができます。静的なリンクになっている為、「いつ」「どこから」流入しても同じ構造になっている点がポイントで、ディレクトリ構造が深く、多くの記事コンテンツを保有しているメディアサイト等に向いているパンくずリストです。
属性型パンくずリスト
大規模なECサイト等で採用されることのあるパンくずリストです。
位置型のようにディレクトリ構造に沿ったナビゲーションではなく、そのページがどのような属性（カテゴリー）に関するページなのかが動的に表示されるタイプです。フィルターのような機能も持っている為、理想の商品を捜しているユーザーに便利なパンくずリストです。
位置型パンくずリストと合わせて使用されることもあります。
パス型パンくずリスト
位置型や属性型のように位置やカテゴリーを示すパンくずリストではなく、サイト内での行動履歴が表示されるタイプのパンくずリストです。
ブラウザの「戻る」と同等の機能を持っている為、現在ではほとんど見ることのなくなったパンくずリストです。このことから、現在パンくずリストと言えば基本的には位置型パンくずリストを差しています。
パンくずリストのメリット
自分がどの位置にいるかがすぐにわかるパンくずリストですが、メリットはそれだけではありません。
クローラビリティ―の向上
階層ごとにリンクが設置されているパンくずリストは、必然的にbotがサイトをクロールする際のヒントになり、クローラービリティが向上します。
サイト全体に必ずパンくずリストを設置することで、意図せずサイト内リンクが全くないページが発生してしまうことも防ぐ事ができます。
サイト構造の理解
パンくずリストは基本的にディレクトリ構造に沿った形をしている為、クローラーにサイト構造を伝えることができる要素の一つになります。
クローラーはサイト構造からそのページがどのようなページなのかを理解しようとする為、サイト構造がわかりやすく、クロールがしやすいサイトは検索エンジンからより正確にページの内容を理解してもらうことができます。
ユーザビリティーの向上
サイト内での自分の位置がわかるだけでなく、同じカテゴリーの記事や商品をみたい際に簡単にほかページに移動できるナビゲーションとしての機能を持っている為、ユーザビリティーの向上を図ることが可能です。
特にECサイトにおいては、パンくずリストを使用してサイトを回遊するユーザーが多い為、必須ともいえるナビゲーションの一つです。
CTRの向上
パンくずリストはサイトないだけでなく、そのページに設置されているパンくずリストが検索結果にも表示されます。
検索結果でそのサイトにどのようなカテゴリーやページがあるのかがわかりやすくなるため、クリック率が高まる可能性があります。その為、パンくずリストに設定するリンク、アンカーテキストも非常に重要です。
パンくずリストのSEO効果
多くのメリットを持っているパンくずリストですが、特にSEOへの効果という点で語られることが多い要素です。
結論、パンくずリストがあるから評価を上げる、パンくずリストが無いから評価を下げるといったパンくずリストの有無による直接的なSEOへの効果はありません。正し、ここまで紹介したようにクローラビリティーの向上や、サイト構造の理解向上等、検索エンジンへ影響する要素の為、間接的なSEO効果は非常に期待できます。パンくずリストはその構造から、自ずと綺麗なツリー構造になりやすくディレクトリ階層が高いページに内部リンクが集まりやすくなります。
その為、SEOで注力したいキーワードに当たることが多いカテゴリーページに内部リンクが集まりサイト内での重要度が高まり、SEO効果が期待できるのです。
パンくずリストの設置方法
パンくずリストは基本的に<li>タグと<a>タグで構成されています。
<body>タグ内に下記のコードを記載します。
<ul>
<li><a href=”https://smple.com/”>TOP</a></li>
<li><a href=”https://smple.com/tops/”>トップス</a></li>
<li><a href=”https://smple.com/tops/tshirt/”>Tシャツ</a></li>
<li>商品A</li>
</ul>
上記のように基本的に現在のページにはリンクを設定しません。
構造化データマークアップについて
パンくずリストとしての機能自体は上記のHTMLの実装だけでも問題ありませんが、検索エンジンにパンくずリストであることを伝える為には、更に構造化データが必要になります。
検索エンジンはテキスト自体は読み取ることはできますが、そのテキストがどのような意味を持っているかを理解することはできません。つまり、先ほどのHTMLはユーザーはパンくずリストとして使用できますし、内部リンクとしての機能を果たしますが、検索エンジンはそれがパンくずリストであるとは認識できません。構造化データはHTMLにメタデータとしてマークアップしていくことで、そのテキストがどのような意味を持っているのかを検索エンジン伝えることが可能になります。
この構造化データを利用して、上記のHTMLがパンくずリストであることを検索エンジンに理解させるのです。
構造化データはボキャブラリーという何についての情報なのかを定義する規格が２種類あります。
- data-vocabulary.org
- schema.org
このうち現在Googleがサポートしている規格は「schema.org」です。
「data-vocabulary.org」を使用しているサイトはサポートされていないので変更することを推奨します。また、構造化データをマークアップする方法は３つあります。
ここではよく使用される２つを紹介します。
JSON-LD形式のパンくずリスト
JSON-LDはパンくずリスト部分のHTMLとは別に下記記述を追加します。
内でも内でも問題ありません。パンくずリストのHTMLとは別に記述する為、コードが複雑にならないメリットがあります。反対に、HTMLを変更した際は構造化データも修正する必要があるため、修正漏れが発生しやすいデメリットもあります。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "TOP",
"item": "https://smple.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "トップス",
"item": "https://smple.com/tops/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Tシャツ",
"item": "https://smple.com/tops/tshirt/"
}
]
}
</script>
microdata形式のパンくずリスト
microdataはパンくずリストのHTMLに属性を使用して追記していきます。
HTMLに直接追記する為、構造化データを一致させやすいメリットがあります。反対にHTMLコードが煩雑化しやすくメンテナスしにくいデメリットがあります。
<ul class=”breadcrumb__list” itemscope itemtype=”https://schema.org/BreadcrumbList”>
<li class=”breadcrumb__item” itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”><a itemprop=”item” href=”https://smple.com/”><span itemprop=”name”>TOP</span></a><meta itemprop=”position” content=”1″ /> </li> <li class=”breadcrumb__item” itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”> <a itemprop=”item” href=”https://smple.com/tops/”><span itemprop=”name”>トップス</span></a><meta itemprop=”position” content=”2″ /> </li> <li class=”breadcrumb__item” itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”> <a itemprop=”item” href=”https://smple.com/tops/tshirt/”><span itemprop=”name”>Tシャツ</span></a><meta itemprop=”position” content=”3″ />
</li> <li class=”breadcrumb__item”>>商品A</li> </ul>
構造化データを設定した後は必ず、Googleが提供しているリッチリザルトテストを行い記述にミスがないか確認しましょう。
パンくずリスト設置時の注意点
ではパンくずリストを設置する際の注意点を解説します。
ディレクトリ構造ではなくリンク構造にする
基本的にディレクトリ構造に沿ったパンくずリストを設置することが基本ですが、サイトによっては必ずしもディレクトリ構造とパンくずリストが一致する訳ではありません。
例として以下のような構造のサイトがったとします。
- カテゴリーページのURL
- 靴の大カテゴリー内のスニーカーの一覧ページ
- https://smple.com/shoes/sneaker/
- ハイカットスニーカーの商品ページ
- https://smple.com/item01/
このような仕様のサイトの場合、ディレクトリ構造に沿ったパンくずリストを設定してしまうと、商品ページのパンくずリストはTOPの直下に商品ページが表示されてしまい、パンくずリストとしては不十分になります。
TOP > ハイカットスニーカー
その為、ディレクトリ構造ではなく、下記のようなリンク構造に沿ったパンクリストを設置する必要があります。
TOP > 靴 > スニーカー > ハイカットスニーカー
なるべく詳細なパンくずリストを設置する
リンク構造での注意点と類似しますが、パンくずリストは省略せずに、準ずるカテゴリーを詳細に設定することをおすすめします。
上記の例では、「TOP > 靴 > ハイカットスニーカー」などように、カテゴリーを省略せず「TOP > 靴 > スニーカー > ハイカットスニーカー」と詳細に記載しましょう。
キーワードを含める
SEOに考慮してパンくずリスト設置する場合は、キーワードを含めることが重要です。
その為、サイトを設計する時点でどのようなカテゴリーが必要になるのかを考える必要があります。重要なキーワードは必ずカテゴリーに設定し、それに沿ったパンくずリストを設置するようにしましょう。
パンくずリストのよくある質問
最後にパンくずリストに関するよくある質問に回答していきます。
上の方に設置する必要がある？
パンくずリストは必ずサトの上の方に設置する必要があると思われる方も多いですが、特に決まりはなく、ページの下部に設置しても問題なくパンくずリストとして認識されます。
ただし、パンくずリストはページ上部に設置されているケースが多く、それに慣れているユーザーも多いと考えられる為、特に下部にしなければいけない理由がなければ上部に設置する方がベターでしょう。
複数設置できる？
大規模なECサイトなどの場合、一つの商品に複数のカテゴリーが紐づいているケースも多いでしょう。
この場合、複数パンくずリストを設置することが可能です。ただし、複数パンくずリストがある場合Googleは一番上にあるパンくずリストを採用します。複数設置することで悪影響を受けることはありませんが、もっとも重要なパンくずリストは一番上に設置するようにしましょう。
まとめ
SEOに良い影響を与えるパンくずリストは、検索エンジンだけでなくユーザーにとっても便利なナビゲーションの一種です。
よりわかりやすく、使いやすいパンくずリストを作成するためには、サイトの設計段階でどのようなカテゴリーやページが必要なのかを決めておくことが重要です。特に動的に作成されるパンくずリストはサイト設計の段階できっちりとURL構造を決めておかないと設置方法が複雑になるだけでなく、利便性の低いパンくずリストになりやすくなります。
