パンくずリストとは?設置方法とSEO効果を解説
WEBマーケティングやSEOでよく用いられる用語の中から、今回は「パンくずリスト」の意味やSEOに効果的な理由、そしてパンくずリストの作り方のポイントについて解説します。「パンくずリスト」の設置は、ユーザーが閲覧しているページがWEBサイト全体のどこの階層にいるのかを伝えるために重要です。
パンくずリストとは
「パンくずリスト」とは、ユーザーが閲覧しているWEBページが、WEBサイト全体のどの階層にいるのかをハイパーリンクで視覚的に提示するナビゲーションのことを指します。
画像のように、パンくずリストは通常ページの上部に設置されユーザビリティを向上させる役割を持ちます。
例えば、ECサイトや求人サイトなど、サイト内を回遊する事が多いWEBサイトを見ていると、自分がWEBサイト内のどこにいるのかが分からなくなる事があります。
この時、「パンくずリスト」があればサイト内での現在の位置を示すため、ユーザーは自分がサイト内のどこにいるのかを容易に理解し、リンクをクリックする事で1つ前の階層やTOPページへ戻ることができます。
パンくずリストの由来は童話『ヘンゼルとグレーテル』
「パンくずリスト」の名前の由来は、童話「ヘンゼルとグレーテル」に由来しています。この物語では、主人公のヘンゼルとグレーテルが森の中で迷わないようにパンくずを道に撒いていきます。このパンくずが後に戻る道を示す目印となります。
この童話を元に、WEBサイト上でユーザーが現在どの位置にいて、どのような経路でそのページにたどり着いたかを示す仕組みが「パンくずリスト」と名付けられました。
尚、英語ではパンくずリストを 「Breadcrumb Navigation」または「Breadcrumbs」と言うのが一般的です。
パンくずリストの種類
パンくずリストには主に「位置型」「属性型」「パス型」という3つの種類があります。それぞれ異なる目的と機能を持ち、WEBサイトの構造に応じて選択します。
この項目ではパンくずリストの種類ごとに特徴と利用例を解説します。
位置型パンくずリスト
位置型パンくずリストは、WEBサイト内でユーザーが現在どの位置にいるかを示すために使用される一般的なタイプのパンくずリストです。
位置型パンくずリストはWEBサイトの階層構造を示し、その構造はユーザーのナビゲーションパスに依存せず、誰が見ても同じ構造を表示します。
■ 位置型パンくずリストの例
「ホーム > メンズ服 > ジャケット > レザージャケット」
上記の例が位置型パンくずリストの場合、ユーザーがどのような経路を辿ったかに関わらず、レザージャケットの商品ページにアクセスした全てのユーザーに対して同じ形で表示されます。
位置型パンくずリストの利点は、サイトの階層構造を直感的に理解できることと、ユーザーがサイト内で簡単に他の関連カテゴリーやページに遷移できるようにすることです。
属性型パンくずリスト
属性型パンくずリストは、ユーザーが辿った経路を元にどのカテゴリに属しているのかを示します。WEBサイト内でユーザーが行う選択やフィルタリングの操作に応じて、パンくずリストが動的に更新され、辿ってきたカテゴリを表示します。
属性型パンくずリストの例 ①
- パンくずリスト:「ホーム > IT・エンジニア > ソフトウェア開発 > Java開発者」
- パンくずリスト:「ホーム > 東京 > IT・エンジニア > Java開発者」
上記の例では、ユーザーは異なる方法で同じ求人情報にアクセスしています。一つのシナリオでは職種から始めており、もう一つでは地域から入っています。属性型パンくずリストはこのようなユーザーの選択を反映し、ユーザーが辿ったカテゴリを表示します。
属性型パンくずリストの例 ②
- 初期のパンくずリスト:「ホーム > メンズ服 > ジャケット」
- 属性選択後のパンくずリスト:「ホーム > メンズ服 > ジャケット > 黒 > Lサイズ」
上記の例では、ユーザーがジャケットの中から「黒色」および「Lサイズ」を選択すると、パンくずリストがこの選択を反映して「黒 > Lサイズ」が追加されます。
このように属性型パンくずリストの特徴は、ユーザーがサイト内で行った特定の選択やフィルタリングを視覚的に追跡できることです。このような特徴から属性型パンくずリストは主にECサイトや不動産のサイト・求人サイトなど動的なページを持つWEBサイトで利用されます。
パス型パンくずリスト
パス型パンくずリストは、ユーザーがWEBサイト内で実際に訪れたページの履歴を表示するタイプのパンくずリストです。
パス型パンくずリストの例
例えば、WEBサイトの特定のセクションをブラウジングしているユーザーが、さまざまなページを経由して特定の製品ページに到達した場合、パス型パンくずリストはそのナビゲーションの経路を示します。
■ ユーザーの行動履歴
- ユーザーが「ホームページ」を訪れる
- 次に「ニュース記事」セクションをクリック
- 「特集記事」を読む
- 記事内のリンクから「製品レビュー」に移動
- 最終的に「製品購入ページ」に到達
■ 表示されるパンくずリスト
「ホーム > ニュース記事 > 特集記事 > 製品レビュー > 製品購入」
一見便利に見えますが、パス型パンくずリストはサイトの階層構造を直接反映するわけではないため、サイトの全体的な構造を理解するためにあるパンくずリストとしては適していません。
パンくずリストのメリット
▼ パンくずリストの設置には以下のメリットがあります。
- SEOに効果的な内部リンクを構築できる
- ユーザビリティが向上する
- 自然検索からのクリック率が高くなる
- ユーザーの離脱率を低下させる
パンくずリストがもたらすこれらの具体的なメリットについて、詳しく解説します。
SEOに効果的な内部リンクを構築できる
パンくずリストはハイパーリンクのため、他の内部リンクと同じように検索エンジンがサイトの構造を理解するのに役立ちます。検索エンジンはWEBサイト内でリンクが多く集まっているぺージを重要なページと理解するため、パンくずリストによって内部リンクが集まるトップページや第2階層のページを評価します。
つまりパンくずリストを設置する事で、SEO対策で重要な内部リンクの構築を自然におこなう事ができます。
また、パンくずリストは、検索エンジンの「クローラーの巡回を助ける」といった役割を担っています。GoogleのクローラーはWEBサイト上のリンクを読み取ってサイト内のページを発見します。
パンくずリストを設置する事で内部リンクがサイト全体に張り巡らされるため、クローラーが新しいページを発見する可能性が高まり、インデックスされるページが増える可能性があります。
ユーザビリティが向上する
パンくずリストを利用すると、WEBサイト内でページを遷移する際のクリック数を減らす事が出来ます。
例えば、TOPぺージから入ったユーザーが様々なページを経由して商品ページに入ったとします。パンくずリストがある場合、このユーザーがトップページや一つ上の階層に戻る場合は、パンくずリストから遷移先をワンクリックすれば戻る事が出来ます。
これに対して、パンくずリストがない場合、ユーザーはブラウザの「戻る」ボタンを繰り返し押すか、ナビゲーションメニューを再度使用する必要があります。
特にサイトの階層が深い場合は、ワンクリックで戻る事ができるパンくずリストがある事でユーザビリティが大きく改善します。
自然検索からのクリック率が高くなる
パンくずリストは、検索結果にURL・ページタイトル・説明文と一緒に表示される可能性があります。表示された場合は表示されていない場合と比べてクリック率が高くなる傾向があります。
パンくずリストを検索結果に表示させるには、パンくずリストを構造化データでマークアップするとGoogleのリッチリザルト機能によって検索結果にパンくずリストが表示されます。
構造化データでマークアップすると、Googleなどの検索エンジンがWEBページの内容を理解し、検索結果においてより豊富な情報を提供できるようになります。
パンくずリストを構造化データでマークアップする方法については、後程解説します。
ユーザーの離脱率を低下させる
パンくずリストを設置する事でユーザーに別のページを促し、離脱を防止する事が出来ます。
例えば、あるユーザーがニューバランスの特定の製品ページにアクセスしたとします。しかし、ユーザーが求めているアイテムがそのページには見つからなかったとしましょう。この時、ユーザーサイトを離れるかもしれませんが、ここでパンくずリストが重要になります。
パンくずリストが表示しているのは、その製品が属している「ランニングシューズ」のカテゴリーです。ユーザーはこのパンくずリストを見て、「ランニングシューズ」の他の製品を探すことを決めるかもしれません。
その結果、彼らは別の製品を見つけて購入することになり、サイトの回遊率と売上が向上します。
このように、パンくずリストはユーザーにサイト上の他のセクションやページへの移動を促す事ができます。
パンくずリストを設置する際のポイント7選
▼ パンくずリストを実際に設置する際のポイントは以下になります。
- サイトの構造を予め整理しておく
- ページの内容を表すキーワードを含める
- 階層の間には区切り文字を使用する
- 現在のページへのリンクを含めない
- パンくずリストは全てのページに設置する
- パンくずリストをグローバルナビゲーションの代わりにしない
- パンくずリストはサイトの上部に設置する
それぞれ詳しく解説します。
サイトの構造を予め整理しておく
パンくずリストを設置する際は、事前にサイトの構造を整理しておく必要があります。
WEBサイトの構造が明確かつ論理的であれば、パンくずリストはその構造を反映し、ユーザーにとって直感的で分かりやすいナビゲーションを提供できます。
一方で、サイト構造が不明確または複雑すぎる場合、パンくずリストはその混乱を反映してしまい、ユーザーがサイト内で迷いやすくなり、求めている情報にアクセスするのが難しくなる可能性があります。
▼ 以下は、整理されていないサイト構造を元にパンくずリストを作成した場合の例です。
- 深すぎる階層構造の例
「ホーム > カテゴリー > サブカテゴリー1 > サブカテゴリー2 > サブカテゴリー3 > 製品ページ」 - 整合性の無い構造の例
パンくずリスト1:「ホーム > 家電製品 > 美容家電 > コーヒーメーカー」 - 断絶されたナビゲーションパスの例
「ホーム > 特別キャンペーンページ」
このように、サイト構造が論理的に整理されていない場合は、ユーザーにとって混乱を招くパンくずリストになります。パンくずリストを設置する場合は予めサイトの構造を論理的に整理した上で作成しましょう。
ページの内容を表すキーワードを含める
パンくずリストにはぺージの内容を表すキーワードを含めましょう。パンくずリストに適切なキーワードを含める事で、ユーザーはサイト内の現在位置を容易に理解し、必要な情報に迅速にアクセスできるようになります。
また、検索エンジンはサイトの構造とコンテンツの関連性をより明確に把握できるためページの評価が高くなります。
例えば、オンラインストアで「メンズ > シューズ > ランニングシューズ」というパンくずリストを使用する場合、各カテゴリー名がページの内容を具体的に反映しています。このように、パンくずリストに適切なキーワードを含めることで、サイトのナビゲーションが改善され、SEO効果も期待できます。
【○】例1:SEOトップぺージ>SEOコンサルティング> 内部対策
【×】例2:ホーム>サービス>内部対策
ただし、キーワードを含む事を意識しすぎるあまり、不自然にキーワードを入れるのは逆効果になるためやめましょう。
階層の間には区切り文字を使用する
パンくずリストの階層の間には区切り文字を使用します。パンくずの間に区切り文字が無い場合は、文字が繋がって見えてしまいユーザビリティを低下させてしまう可能性があります。
区切り文字は「>」や「│」「/」などの文字を使用して、階層がユーザーに分かりやすく伝わるようにしましょう。
【区切り文字パターン① >(不等号)】
【区切り文字パターン② /(スラッシュ)】
現在のページへのリンクを含めない
パンくずリストには、現在のページへのリンクを含めてはいけません。
例えば、オンラインショップでのパンくずリストは以下のようになります。
ホーム > カテゴリー > サブカテゴリー > 製品ページ
この場合、「製品ページ」は現在のページであり、他のすべての項目にはリンクが設定されていますが、「製品ページ」自体へのリンクは設定しません。これにより、ユーザーは自分がどこにいるのか、そしてどのようにしてそこに辿り着いたのかを簡単に把握することができます。
また、現在いるページへのリンクを含めた場合、ユーザーがリンクをクリックしても画面が変わらないためサイトがエラーを起こしていると勘違いする可能性があります。
パンくずリストは全てのページに設置する
パンくずリストは、全ページに設定するのが基本です。ユーザビリティの高いWEBサイトを構築するためには、ユーザーがどのページにいても、WEBサイト内のどこにいるかを把握できるようにパンくずリストを全ぺージに設置する必要があります。
ただし、もともとWEBサイトの階層構造をユーザーに知らせる必要がないトップページ(ホーム)や、ランディングページのようなコンバージョン率の向上が優先されるページに対しては、パンくずリストを設定する必要はありません。
パンくずリストをグローバルナビゲーションの代わりにしない
パンくずリストは、グローバルナビゲーションの代わりにしてはいけません。パンくずリストとグローバルナビゲーションは、WEBサイト内で異なる目的と機能を持っています。
グローバルナビゲーションは、サイトの主要なセクションやカテゴリーへのアクセスを提供し、ユーザーがサイト内で自由に移動できるように設計されています。これに対し、パンくずリストはユーザーが現在サイト内のどこにいるかを示し、訪れたページへの簡単なナビゲーションパスを提供します。
したがって、グローバルナビゲーションの代わりにパンくずリストを使用すると、ユーザーはサイト内で迷いやすくなり、サイト全体の使い勝手が低下する可能性があります。
パンくずリストはサイトの上部に設置する
基本的に、パンくずリストはサイトの上部に設置します。サイト上部に設置する事でサイト訪問者はすぐに自分の位置を確認でき、必要な情報へ迅速にアクセス可能になります。
ただし、ランディングページのようにページが長い場合には、パンくずリストをWEBサイトの下部に配置するケースもあります。
ランディングページの場合、ユーザーがページの最下部まで到達した時に、再び上部にスクロールするのに手間がかかるため、パンくずリストを下部に設置し他のセクションへ簡単に移動できるようにします。
パンくずリストの設定方法
パンくずリストを設定するための具体的な方法を詳しく解説します。
本記事では、HTMLを用いた基本的な書き方とWordPressのプラグインを使った設定方法をそれぞれ紹介します。
HTMLでパンくずリストの設定する方法
HTMLでパンくずリストを設定するには「navタグ」「ulタグ」「liタグ」「aタグ」を使います。
▼ それぞれのタグの役割と記述例は、以下になります。
- navタグ
パンくずリストを囲むために<nav>タグを使用します。このタグはナビゲーションの意味合いを持ち、aria-label属性を使ってパンくずリストであることを明示します。 - ulタグ
パンくずリストの各項目を<ul>タグでリスト化します。 - liタグ
各ナビゲーションポイントは<li>タグで個別にマークアップします。 - aタグ
ユーザーが過去に訪れたページへ戻れるように、<a>タグを使用してリンクを設定します。ただし、現在のページは通常リンクを設定せず、aria-current="page"属性を使用して現在のページであることを示します。
【記述例】
<nav aria-label="Breadcrumb">
<ul>
<li><a href="/">TOPページ</a></li>
<li><a href="/category">SEOコンサルティング</a></li>
<li><a href="/category/subcategory">内部対策</a></li>
<li aria-current="page">現在のページ</li>
</ul>
</nav>
※ パンくずリストの見え方については、CSSの変更を変えて調節することができます。
WordPressのプラグインで設定する方法
WordPressを用いてWEBサイトを運営している場合は、「Breadcrumb NavXT」というプラグインを使うと簡単にパンくずリストを設定することができます。
- WordPressにログインする
- 管理画面の【プラグイン】をクリック
- 【新規追加】をクリック
- 検索窓に「Breadcrumb NavXT」と入力して検索
- 【今すぐインストール】をクリック
- 【有効化】をクリック
- 【外観】>【テーマの編集】>画面右下の【ヘッダー(header.php)】をクリック
- パンくずリストを表示させたい位置に以下のコードを記述する
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div> - 「ファイルを更新」をクリック
- パンくずリストの設定完了
※ Breadcrumb NavXTの設定はデフォルトのままでも使用可能ですが、工夫次第でさまざまな設定を行うことができます。
例えば、管理画面の「Breadcrumb NavXT」をクリックすると設定を変更することができます。初期設定の場合はパンくずリストの先頭がWEBサイト名になっているため、「ホーム」や「トップページ」などの表記に変更することをお勧めします。
この場合、ホームページテンプレートという項目内の「%htitle%」部分を他の表記に変更します。
パンくずリストを構造化データでマークアップする方法
Googleの検索エンジン最適化スターターガイドではパンくずリストの設定を推奨していますが、中でも「構造化マークアップ」という方法を用いた設定方法が最も適切であるとされています。
その理由は、構造化データを用いてマークアップすることで、Googleの検索結果にパンくずリストを表示させることができるためです。
ここでは、JSON-LD(ジェイソンエルディー)を使ってパンくずリストの構造化マークアップを行う方法を紹介します。
▼ 以下のようなコードを記述します。
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “BreadcrumbList”,
“itemListElement”:
[
{
“@type”: “ListItem”,
“position”: 1,
“item”:
{
“@id”: “(ページのURL)”,
“name”: “(トップページ名)”
}
},
{
“@type”: “ListItem”,
“position”: 2,
“item”:
{
“@id”: “(ページのURL)”,
“name”: “SEO用語集”
}
},
{
“@type”: “ListItem”,
“position”: 3,
“item”:
{
“@id”: “(ページのURL)”,
“name”: “パンくずリストとは?”
}
}
]
}
</script>
構造化データでマークアップしたら、正しく設定できているかをGoogleの「リッチリザルト テスト」もしくは「スキーマ マークアップ検証ツール」を用いてチェックしましょう。
まとめ
今回は、パンくずリストについて「由来」「種類」「メリット」「設定する際のポイント」「設置方法」などを解説しました。パンくずリストはユーザビリティの向上に加え、SEOに関しても効果があります。
パンくずリストをまだ設置できていないサイトの運営者は、パンくずリストを正しく設置していきましょう。
RECOMMENDED ARTICLES
ぜひ、読んで欲しい記事