パンくずリストとは、Webページのナビゲーションの一種で、ユーザーがWebサイトの階層や現在ページを把握できるようにするものだ。
多くの場合、Webページの左上部に配置され、
「ホーム ＞ 大カテゴリ名 ＞ 小カテゴリ名 ＞ 現在ページ」
というように、テキスト1行で表示される。
パンくずリストは、ユーザーエクスペリエンスやSEOの観点で好影響があり、Webサイトに不可欠なナビゲーションといっても過言ではない。
本記事ではパンくずリストの基礎知識を丁寧に解説したうえで、実装（構造化データ）および注意したいエラーについても説明する。
「パンくずリストって何？」という初心者の方はもちろん、すでにWordPressなどでサイト運営中の方も、構造化データなどを含む情報アップデートとして役立ててほしい。
1. パンくずリストとは？基本の知識
最初にパンくずリストとは何か、基本情報からお伝えする。
1-1. ページの左上部などに1行で配置される内部リンク
パンくずリストとは、通常、ページの左上部に1行のテキストで配置される内部リンク（自サイト内のリンク）のことである。
Webサイトのナビゲーションリンクの一種で、ユーザーはパンくずリストを利用して、前のセクションやホームページ（トップページ）に素早く戻ることができる。
特徴1：右側にいくほど具体的
パンくずリストは、左端にホームページを配置し、右側に向けてより具体的なセクションを配置するのが特徴だ。
| （←全般的）ホーム ＞ SEO ＞ 初心者向けSEO ＞ ナビゲーション ＞ パンくずリストとは？（→具体的） |
特徴2：現在地がわかる
グローバルナビゲーション（全ページに共通されて表示されるメニュー）では、「自分がサイト内のどこにいるか」はわからない。
パンくずリストがあることで、ユーザーは今閲覧中のWebページがサイト内のどこに位置するのか、把握できる。
| ホーム ＞ SEO ＞ 初心者向けSEO ＞ ナビゲーション ＞ パンくずリストとは？（＝現在のページ） |
1-2. なぜパンくずリストというのか
「パンくずリスト」という不思議な名称に疑問を持つ方も多いだろう。
パンくずリストを俗称と考え、正式名称を知りたい方もいるかもしれないが、パンくずリストは正式な呼び方だ。
パンくずリストの語源となっているのはグリム童話の『ヘンゼルとグレーテル』である。
森の中に連れられるシーンでヘンゼルが機転を利かせ、道しるべとしてパンくずを撒いたエピソードに由来する。
英語でパンくずのことを「bread crumbs（ブレッドクラム）」というが、ユーザーが迷子にならないように設置するリストのことを「Breadcrumb List（ブレッドクラムリスト）」と呼ぶようになった。
ブレッドクラムリストを日本語に訳した用語が「パンくずリスト」となる。
1-3. ヘンゼルのように経路をさかのぼって帰れるようにする
ここで押さえておきたいのは、「ヘンゼルが森でパンくずの軌跡をたどって帰り道を探そうとしたこと」である。
ヘンゼルが森の入口から奥へと入っていくとき、迷子にならないようにするのと同じ役割を、パンくずリストが果たす。
つまり、ユーザーがWebサイトの入口（ホームページ）からサイト内に入っていくとき、いつでも経路をさかのぼって、もと来た道を帰れるようにするのが、パンくずリストの根源的な役割だ。
1-4. パンくずリストの種類
パンくずリストには、「ロケーション / アトリビュート / パス」の3種類がある。
1：ロケーション型（位置）
ロケーション型は「位置」を示すパンくずリストだ。「階層型」と呼ばれることもある。
最も一般的なパンくずリストで、通常のオウンドメディアであれば「パンくずリスト＝ロケーション型」と覚えておけば問題ない。
| 例：ホーム ＞ SEO ＞ 初心者向けSEO ＞ ナビゲーション ＞ パンくずリストとは？ |
2：アトリビュート型（属性）
アトリビュート型は「属性」を示すパンくずリストだ。複数のフィルターで絞り込みができるサイトなどで使われる。
たとえば、ECサイトでユーザーが商品を探しやすくするために、アトリビュート型が採用されることがある。
| 例：ホーム ＞ 商品 ＞ カテゴリー ＞ 性別 ＞ サイズ ＞ カラー |
3：パス型（履歴）
パス型は、ユーザーがWebサイト内を移動した履歴を、動的に示すパンくずリストだ。現在地までの閲覧経路が、表示される。
パス型は、現在ではほとんど使用されていない。閲覧経路はルールに沿わずに蛇行的になるため、ナビゲーションとしてロケーション型に劣るという見解が一般的だ。
パス型については、「そういったものもある」と知識として覚えておく程度でよいだろう。
本記事では「ロケーション型（位置）」のパンくずリストを主として扱う。
2. パンくずリストが重要な理由（1）UX上の優れたメリット
パンくずリストは、すべてのWebサイトに絶対不可欠といっても過言ではない。
なぜ重要なのか、その理由をあらためてまとめておこう。まずはUX（ユーザーエクスペリエンス）上のメリットを3つ、ご紹介する。
|
2-1. 現在地がわかりやすい
1つめのメリットは「現在地がわかりやすい」である。
ユーザーの、
「ここは、どこ？」
という問いに、いつでも明確に答えるのがパンくずリストだ。
前章でパンくずの語源を解説したが、しっくり来ない方は「パンくずリストとは住所表示」と捉えよう。
知らない街で現在地がわからないと不安になったり、歩き回ってイライラしたりする。
パンくずリストは、サイトの階層構造内でのユーザー現在地を視覚的に示し、ユーザーのストレスを軽減する効果がある。
2-2. ほかのページを発見しやすい
2つめのメリットは「ほかのページを発見しやすい」である。
オフラインの住所表示はクリックできないが、パンくずリストはクリックできる。
パンくずリストがあると、現在地がわかるのみならず、（ユーザーにとって）有益なページを見つける手助けとなる。
2-3. “1行テキスト”という最小限のスペース・負荷で設置できる
3つめのメリットは「“1行テキスト”という最小限のスペース・負荷で設置できる」である。
パンくずリストが、ユーザーへの大きな恩恵とまるでパンくずのような「軽さ」を両立しているのは、特筆すべき点だ。
テキスト1行なので読み込み時に負荷がないという意味で軽い。スペースをとらないコンパクトさで、ページ閲覧中に視覚的に邪魔になる重さもない。
3. パンくずリストが重要な理由（2）SEO上の優れたメリット
次にSEO上の影響を見ていく。
前述のとおり「UXに好影響ならSEOにも（間接的に）好影響」という原則にくわえ、直接的なメリットが2つ、挙げられる。
|
3-1. 検索結果ページにパンくずリストが表示される
1つめのメリットは「検索結果ページにパンくずリストが表示される」ことだ。
出典：https://www.google.com/search?q=パンくずリスト
詳細は後述するが、パンくずリストを構造化データにしておけば、Googleのリッチリザルト機能※1 で検索結果がリッチになる。
※1：リッチリザルトとは？
リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス（Google 検索など）での検索結果です。リッチリザルトには、カルーセル、画像などテキスト以外の要素を含めることができます。
長くてわかりにくいURLが表示されるよりも、パンくずリストが表示されたほうが、クリック率の向上が期待できる。
ユーザーはパンくずリストを見て、そのWebページがどのカテゴリに属しているのか、どんな期待ができるのか、事前に知ることができるからだ。
3-2. 良質な内部リンクを形成する
2つめのメリットは「良質な内部リンクを形成する」である。
内部リンクとは自サイト内のページ同士を結ぶリンクのことで、SEO戦略上、重要な意味を持つ（詳しくは「内部リンクとは？SEOでの重要性と効果が出る張り方のコツ」にて解説している）。
パンくずリストは、極めて高品質な内部リンクを、自然発生的に形成してくれる。
結果として、検索エンジンのクローラーは効率的にサイト内を巡回し、インデックスの速度を高め、SEOの成果が上がりやすくなるのだ。
4. 構造化データとパンくずリストのエラーに関する注意喚起
パンくずリストの重要性が理解できたら、実装の話に移ろう。
パンくずリストは1行のテキストリンクであり、設置自体は容易だ。ただし、パンくずリストの成果を最大化するためには「構造化データ」にする必要がある。
WordPress利用者であれば、テーマが自動的にパンくずリストの構造化データを出力しているケースが多いのだが、注意点もある（後述するが、気づかぬうちにエラーが出ているかもしれない）。
構造化データの基礎知識から説明していこう。
4-1. そもそも構造化データとは？
構造化データとは、簡単にいえば、
「検索エンジンに、『その文字列が何を意味するのか？』についての情報を与える仕組み」
である。
構造化データの目的は「検索エンジンがより知的に、ユーザーニーズに応えたコンテンツを提供できるようにすること」だ。
例を挙げると、HTMLタグの目的は要素を特定することにあり、その“文字列の意味”は伝えない。
<h1>アバター</h1>
上記の記述なら、テキスト文字列「アバター」がh1の要素だと特定し、見出しの形式で表示するようブラウザに指示する。
検索エンジンは、「アバター」の文字列が何を意味するのか（SF映画のタイトル名のアバターなのか？分身の意味のアバターなのか？ etc.）を、理解できない。
これでは、検索エンジンがユーザーニーズに応えた検索結果を、知的に表示することは難しい。
そこで、文字列の意味を検索エンジンに説明するために、構造化データのタグを追加する。
<h1 itemprop=”name”>アバター</h1>
たとえば上記では「itemprop=”name”（これは名前です）」を追加している。
参考：schema.org
※ ここでは簡略化して説明したが、詳しくは「構造化データとは？実装するとできることや3つの実装方法を解説」を参照してほしい。
パンくずリストの実装において覚えておきたいポイントは、
| 「これは、パンくずリストです」とGoogleにわかるようにパンくずリストを構造化データで記述すると、リッチリザルトで検索結果ページでの可視性が上がるし、Googleのクロールにも好影響 |
…ということである。
4-2. data-vocabulary.org のサポートは2021年1月に終了
構造化データがややこしいのは、HTMLやCSSのように1つの統一された規格があるわけではないことだ。
構造化データの「形式」と「共通スキーマ」の2つの概念があり、それぞれに選択肢があって、任意で組み合わせて使う。
わかりづらいと思うが、ひとまずここでは「形式＝書き方」×「共通スキーマ＝辞書」と捉えてほしい。
|
なぜこの話をしたのかといえば、共通スキーマ（辞書）のひとつである「data-vocabulary.org」のサポートを、Googleが2021年1月29日に終了したことを、重要な注意事項として頭に入れてほしいからだ。
参考：Google Developers「data-vocabulary のサポート終了」
これから構造化データを扱うときには、data-vocabulary.orgではなく、Googleが推奨するschema.orgを使う必要がある。
4-3. 構造化データを自動出力するWordPressテーマはエラーを要確認
「構造化データのことは、よくわからない」という方がWordPressを運用している場合、自サイトの構造化データがどうなっているか、今まで無頓着だったかもしれない。
data-vocabulary.org（Googleサポート終了）を出力するWordPressテーマを使っていて、かつその後テーマの更新もされていない場合、Search Consoleでエラーが出ているはずなので、確認してみてほしい。
▼ Search Consoleでエラーが出ている事例
たとえば上記サイトの場合、data-vocabulary.orgを生成するテーマを更新せずに利用し続けた結果、
「data-vocabulary.org スキーマのサポートは終了します」
のエラーが出ている。
エラーが出ていたらどうする？
もし同じエラーが出ていたら、まずはWordPressの管理画面にアクセスし、「利用中のテーマが最新版に更新されているか？」を確認しよう。
更新が続けられているテーマの多くは、Googleのサポート終了に対応して、パンくずリストの構造化データをdata-vocabulary.orgからschema.orgへアップデートしているからだ。
テーマを最新版に更新しているにもかかわらずエラーが出ている場合、テーマの作者に問い合わせるなどして、現状を確認する。
構造化データの修正がされていないテーマや更新自体が終了しているテーマの場合には、次章を参考にschema.orgでの実装を行ってほしい。
5. パンくずリストの実装方法
先に重要な注意喚起であるdata-vocabulary.org のエラーから伝えたため話が前後したが、ここからは構造化データでパンくずリストを実装する方法を解説する。
5-1. WordPressでの実装方法
まずはWordPress利用者向けの方法を2つ、紹介する。
1：schema.orgに基づくパンくずリストを生成するテーマを利用する（推奨）
1つめの方法はschema.orgに基づく構造化データ用のパンくずリストを生成するテーマを選択することだ。特別な事情がない限り、この方法が推奨される。
サイト運営者がパンくずリストや構造化データの設定をする必要はなく、テーマがすべて自動的に行ってくれる。
具体例として、バズ部が開発した無料のWordPressテーマ『Xeory』がある。
Xeoryでも、元はdata-vocabulary.orgを利用していたが、Googleのサポート終了にともない、schema.orgへ修正済みだ。
2：プラグインを導入しテンプレートを改造する
もうひとつの方法は、パンくずリストを生成できるプラグインを導入することだ。
こちらの方法の問題点は、サイト全体にパンくずリストを実装するには、single.phpなどのテンプレートファイルを改造する必要があることである。
それがよくわからない場合はおすすめできない方法なので、前述のテーマ利用を検討してほしい。
パンくずリストを生成できるプラグインとしては『Yoast SEO』がある。
［プラグイン］＞［新規追加］の画面から『Yoast SEO』と検索してインストール・有効化する。
※注：WordPressにプラグインをインストールする方法がわからない方は、先に「WordPress プラグインのインストールと停止・削除・更新の方法」を確認してほしい。
『Yoast SEO』がメニューに追加されたら、［検索での見え方］→［パンくずリスト］の画面で詳細の設定ができる。
テーマにパンくずリストを挿入する方法について、以下のとおり記載されている。
テーマにパンくずリストを挿入する方法
パンくずリスト機能の使い方は ナレッジベース記事に掲載されています。
概要だけ抜粋すると、テーマのパンくずリストを表示したい場所に、以下を記述する。
<?php
if ( function_exists(‘yoast_breadcrumb’) ) {
yoast_breadcrumb( ‘<p id=”breadcrumbs”>’,'</p>’ );
}
?>
5-2. WordPress以外のWebサイトでの実装方法
WordPressなどのCMSを利用しないWebサイトで、手動で構造化データを追加する方法は、Googleの以下ページで詳しく解説されている。
▼ 一部引用
6. パンくずリストに関する注意点
最後に、パンくずリストに関する注意点を3つ、お伝えしよう。
6-1. 論理的なパンくずリストを作る
1つめの注意点は「論理的なパンくずリストを作る」である。
パンくずリストがわかりづらいと、それだけでユーザーを混乱させてしまうが、そもそもパンくずリストがわかりづらいサイトは、よくないサイトだ。
論理的なパンくずリストを作るためには、サイト内のページやコンテンツが論理的に構成されている必要がある。
自サイトのパンくずリストがわかりづらいと感じたら、以下の記事を参考に、サイト構造の見直しから着手してほしい。
6-2. グローバルナビゲーションの代わりにはしない
2つめの注意点は「グローバルナビゲーションの代わりにはしない」である。
パンくずリストはユーザーにとって非常に利便性が高いナビゲーションではあるが、あくまでもメインのグローバルナビゲーションがまずあって、それを補助する役割を担う。
数年前に、グローバルナビゲーションをドロップダウンメニューに入れるなどして目立たなくするWebデザインのトレンドがあった。
これに対し、ニールセン・ノーマン・グループの記事は「ユーザーがコンテンツを発見しにくくなる」と警鐘を鳴らしている。
パンくずリストを設置したからといって、ほかのナビゲーションをおろそかにしないよう、注意したい。
6-3. ユーザーが見慣れた記号で作成する
3つめの注意点は「ユーザーが見慣れた記号で作成する」である。
◎ 良い例
|
✕ 悪い例
|
たとえば縦線を使って、
「ホーム ｜ SEO ｜ 初心者向けSEO ｜ パンくずリスト」
としたら、ユーザーはこれがパンくずリストであると理解できなくなってしまう。
不等号（＞）あるいはスラッシュ（／）のどちらかを使うようにしよう。
7. まとめ
本記事では「パンくずリスト」をテーマに解説した。要点を簡単にまとめておこう。
▼ パンくずリストの基礎知識
|
パンくずリストが重要な理由として、以下のメリットが挙げられる。
|
パンくずリストは、Googleにそれとわかるように構造化データで記述する必要がある。具体的な手法として、以下の選択肢を紹介した。
|
パンくずリストに関する注意点として、以下が挙げられる。
|
パンくずリストは、Webサイトの最も大切な基本事項のひとつである。この機会に、自サイトのパンくずリストを見直してみよう。
コメントはこちらから