パンくずリストとは？種類・実装方法・わかりやすくするポイントを徹底解説

パンくずリストとは、表示しているページが、Webサイト内のどこにあるかを示すナビゲーションのこと。

英語では「breadcrumbs list（breadcrumb list）」や「topic path」と表記されます。

パンくずリストは、Webサイトのページ階層をリスト化して表示するため、ユーザーは「自分がWebサイトのどの位置にいるのか」が視覚的にわかるようになります。

また、パンくずリストを設置することで、SEO（検索エンジン最適化）にも良い影響を与える可能性があります。

パンくずリストに表示される階層には、内部リンクを設置するのが一般的です。

このリンクを通じて、クローラー（インターネット上のWebサイトを自動的に巡回するプログラム）がサイト内のほかのページにも訪れやすくなるため、重要なページを認識しやすくなるのです。

パンくずリストの名前は、童話「ヘンゼルとグレーテル」に由来します。

物語の主人公である兄妹（ヘンゼルとグレーテル）は、森で道に迷わないよう、パンをちぎって道におとし、帰り道の目印にします。

このエピソードをモチーフとし、ユーザーがWebサイト内で迷子にならないようページの階層やカテゴリをリスト化したものを「パンくずリスト」と呼ぶようになったのです。

一般的に用いられているのが位置型パンくずリストです。

位置型パンくずリストは、Webサイト内の階層をそのまま表示します。

カテゴリやコンテンツの多いWebサイトであっても、位置型パンくずリストがあれば、ユーザーは自分がサイトのどの位置にいるのかが一目でわかります。

実際のWebサイト上では、位置型パンくずリストは以下のように表示されます。

位置型パンくずリストは、Webサイトの規模や用途を問わず用いることが可能です。

そのため、どのパンくずリストにするか迷った場合は、位置型パンくずリストを採用するとよいでしょう。

属性型パンくずリストは、表示しているページの属性がリストに表示されます。

上記は、検索方法（検索経路）が「商品カテゴリ」「ブランド名」「ランキング」など複数存在しており、検索方法によってリストが変化している例です。

このように、属性型パンくずリストは、ユーザーの検索履歴をリスト化して表示できるという特徴があります。

属性型パンくずリストは、ECサイトや物件情報サイトなど、目的までのルートが複数あるWebサイトで採用されています。

パス型パンくずリストは、現在のページにたどり着くまでの閲覧履歴を表示します。

ユーザーによって閲覧履歴は異なるため、表示されるパンくずリストの内容もユーザーによってさまざまです。

パス型パンくずリストであれば、元の画面に戻る、検索履歴を確認するなどの動作をパンくずリスト上でおこなえます。

しかし、これらの機能は基本的にブラウザ自体に備わっているため、パス型パンくずリストを実装する例はあまりありません。

パンくずリストは、SEO（検索結果に上位表示させるための施策）としても有効です。

パンくずリストに表示されるリストは、内部リンク（サイト内のほかのページにつながるリンク）になっています。

内部リンクが増えると、検索エンジンのクローラーがサイト内を巡回しやすくなるため、パンくずリストはクローラーの巡回をうながす効果があるのです。

また、パンくずリストによって、カテゴリや階層などのWebサイトの構造をクローラーが正しく認識できるようになります。

Webサイトのインデックス（検索エンジンのデータベースに登録されること）がスムーズになれば、Webサイト全体の評価向上も期待できるでしょう。

パンくずリストの有無はユーザーへの影響が小さいため「いらない」という意見もあります。

しかし、SEOの観点では、パンくずリストを設置するメリットは大きいといえるでしょう。

パンくずリストには、ユーザーの利便性が向上するというメリットもあります。

パンくずリストには、現在のページのカテゴリが階層状に表示されます。

そのため、自分がWebサイトのどの位置にいるのかを把握しやすくなり、上の階層に戻るなどの動作がしやすくなるメリットがあります。

パンくずリストには、トップページや大カテゴリ・小カテゴリへのリンク、お問い合わせページへのリンクが設置されるのが一般的です。

もし現在のページに求める情報がなかったとしても、リストをたどることで、サイト内の必要な情報にアクセスしやすくなります。

パンくずリストのリンクでサイト内を回遊しやすくなることにより、ユーザーの滞在時間の増加も期待できるでしょう。

パンくずリストは、Googleの検索結果に表示されることもあります。

検索結果にパンくずリストが表示されていれば、クリックする前にサイトの構造や記事内容を確認することが可能です。

これは、ユーザーの「ページを開いたけれど欲しい情報が書かれていなかった」というミスマッチの防止につながります。

また、検索ニーズにマッチしたページの場合は、検索からのクリック率の向上も期待できるでしょう。

ユーザーは、開いたページに欲しい情報がない場合は、すぐにページから離脱（直帰）してしまいます。

ミスマッチを減らすことができれば、ユーザーの直帰率が低下し、検索エンジンから「検索ニーズを満たす情報が載っているサイト」と評価される可能性もあります。

WordPressテーマとは、Webサイトのデザインや機能などを設定するためのテンプレートのことです。

WordPressにはSEO機能が充実しているテーマも多く、パンくずリストに対応したテーマもたくさん存在します。

パンくずリストが組み込まれているテーマを選べば、初心者でも簡単にパンくずリストを実装できるでしょう。

また、パンくずリストに対応したテーマであれば、細かいレイアウト調整をしなくても、ユーザーが使いやすいように設計されているものも多くあります。

WordPressでデザイン性に優れたWebサイトを作成するなら、有料テーマがおすすめです。

WordPressの有料テーマに関しては、以下の記事でもくわしく解説しています。

WordPressのプラグインとは、さまざまな機能を追加するための拡張機能のことです。

パンくずリストを作成できるプラグインを使用すれば、初心者でも簡単にパンくずリストを実装できます。

例えば「Breadcrumb NavXT」は、パンくずリストを追加するための代表的なプラグインです。

ブロックエディタ（文章や画像を作成・管理できるブロック）でパンくずリストを挿入できるほか、サイドバーのウィジェットにもパンくずリストを表示できます。

パンくずリストの詳細設定は、ナビゲーションメニュー「設定＞Breadcrumb NavXT」から確認・変更できます。

HTMLとは、Webサイトを作成する際に使われる言語の一種です。

パンくずリストは、自分でHTMLコードを記述して実装することもできます。

装飾やレイアウトの指定はCSSで設定します。

パンくずリストが正常に機能しているかどうかは、Googleのスキーマ マークアップ検証ツールで確認するのが簡単でおすすめです。

【スキーマ マークアップ検証ツールの使用手順】

「構造化データをテスト」ページにアクセスし、「スキーマ マークアップ検証ツールに移動」ボタンを押下します。

URL取得欄に、チェックしたいページのURLを入力して「テストを実行」を押下します。

パンくずリストのコードのみをチェックしたい場合は、「コードスニペット」を選択してコードを入力しましょう。

パンくずリストが正常に機能している場合は、検出画面の「BreadcrumbList」が「エラーなし」になり、階層やURLも正しく表示されます。

JavaScriptは、Webサイトやシステムの開発に使用されるプログラミング言語です。

JavaScriptでパンくずリストを作ることも可能ですが、実装に専門知識が必要となり、注意点も多いため、上級者向けの方法といえるでしょう。

JavaScriptでの実装をおすすめしない理由は、Googleで確実に認識されるとは限らないためです。

ユーザーの状況に応じて変化する（動的な）Webサイトなど、どうしてもJavaScriptでしかパンくずリストを実装できない場合にのみ、使用する程度にとどめるのがよいでしょう。

パンくずリスト作成の重要なポイントは、階層構造をシンプルにすることです。

階層構造が複雑だと、パンくずリストの内容がユーザーにとってわかりにくくなるため、パンくずリストの利便性が低下してしまいます。

また、「パンくずリストを通じてクローラーがサイト内を巡回しやすくなる」というメリットも損なわれるため、SEO効果が得られない可能性もあります。

Webサイトの階層をシンプルにするには、まずサイト内のコンテンツを、大カテゴリ・小カテゴリに分類します。

（コンテンツ数が少なかったり、話題の種類が少ない場合は、大カテゴリだけでも可）

次に、分類したカテゴリを、第二階層・第三階層と階層順にならべ、サイト全体の構造を作成していきます。

カテゴリを細かくしすぎると、階層が深くなり、サイト全体の構造も複雑になってしまうため注意が必要です。

各階層の間に「区切り文字」を入れると、パンくずリストの視認性が高まります。

パンくずリストには、「スラッシュ（／）」「不等号（＞）」「パイプ（｜）」などの区切り文字を用いるのが一般的です。

区切り文字をCSSで設定する場合、コードは以下のようになります。

この場合、CSSの「content: "＞";」の記号を変更すれば、ほかの区切り文字にも変更可能です。

パンくずリストのSEO効果を得るには、以下の点を押さえることが大切です。

SEOを意識した記事（コンテンツ）では「どのようなキーワードで上位表示を目指すのか」という対策キーワードを考える必要があります。

記事の見出しや本文などに対策キーワードを含めることで、検索エンジンに「何について書かれた記事なのか」を伝えることが可能です。

SEO対策として、パンくずリストのアンカーテキスト（リンクがついている文章）にもキーワードを含めるとよいでしょう。

パンくずリストにキーワードを含める際は、ユーザーの利便性も考慮して、自然な表現になるよう無理なくキーワードを含めることが大切です。

パンくずリストは、基本的にトップページ以外のすべてのページに設置しましょう。

すべてのページにパンくずリストを設置することで、階層が常に整理され、ユーザーの利便性向上・検索エンジンのクロール促進などの効果が得られます。

ただし、コンバージョン（ユーザーによるアクション）を狙う場合など、ユーザーの離脱を防止したいページでは、あえてパンくずリストを設置しないという選択肢もあります。

また、トップページはサイトの階層構造の最上位に位置しているため、パンくずリストの設置は不要です。

構造化データとは、Googleの検索エンジンがページに書かれた内容を理解しやすくなるためのデータこと。

構造化データを実装することで、検索エンジンがパンくずリストを把握しやすくなり、サイトの構造をより正確に認識できるようになります。

また、検索結果にパンくずリストの内容が表示されるようになり、ユーザーのクリック率を促進する効果も期待できます。

構造化データは、以下のような専用のコードでマークアップします。

構造化データをマークアップするには、おもに2つの方法があります。

Googleの構造化データ マークアップ支援ツールを使用すると、構造化データが自動出力されるため、初心者でも簡単に構造化データをマークアップできます。

構造化データをマークアップしたら、正しく機能しているかをGoogleのリッチリザルトテストやスキーマ マークアップ検証ツールでチェックしましょう。

パンくずリストはページ上部に設置されるのが一般的ですが、ページ下部に設置することも可能です。

Googleはパンくずリストを「内部リンクを通じたクロール」「リッチリザルト（検索結果に表示する情報）」という目的で利用するため、設置場所はSEOに影響しません。

パンくずリストの設置場所は、ユーザーの利便性を第一に考えたうえで決めましょう。

スマートフォン向けのページの場合は、上部にパンくずリストを設置すると、パンくずリストだけで画面の大部分が埋まってしまう可能性もあります。

そのため、スマートフォンでの閲覧が大半を占めるWebサイトでは、パンくずリストを下部に設置するという選択肢もありでしょう。

パンくずリストの利便性を高めるには、Webサイトの階層がシンプルであることが重要です。

サイト内の階層が複雑になってしまう原因の一つは、カテゴリを細かく分類しすぎてしまうことです。

カテゴリが増えるにつれてサイト内の階層が複雑になると、パンくずリストの利便性やSEO効果を低下させる原因になります。

パンくずリストを実装する際は、サイトの階層を深くしすぎないよう注意しましょう。

多くのユーザーは、Webサイトをスマートフォンで閲覧するため、スマートフォンでの見やすさは非常に重要なポイントです。

パンくずリストを設置したあとは、必ずスマートフォンでの表示を確認するようにしましょう。

スマートフォンはパソコンに比べて表示領域が狭いため、設置場所によってはパンくずリストだけで画面が埋まってしまう可能性もあります。

パンくずリストだけでなく、ページ全体の見やすさ・使いやすさを、ユーザー視点で確認することが大切です。

Webページの主役はコンテンツ（記事）であり、ユーザーの目的もコンテンツの閲覧です。

メインコンテンツの邪魔にならないよう、パンくずリストは控えめなデザインにしましょう。

パンくずリストは、ユーザーの利便性を高めるための、あくまで補助的な存在です。

メインコンテンツとのバランスを考慮して、シンプルなデザインのものを設置するようにしましょう。

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。