SEO 公開日: 2020.03.17 更新日: 2024.03.19

パンくずリストとは？SEO効果や設置方法について

パンくずリストとは、ユーザーがページを閲覧しているときにそのページがWebサイト上のどの位置にいるかを示すリストです。階層別のリストを表示して、上下階層が把握できるような形となっており、Webページの左上や、下部に表示されています。

この記事では、パンくずリストの基本情報やSEO効果に加え、具体的な作成・設置方法や注意点について解説します。

この記事の目次

パンくずリストとは？

パンくずリストの名前の由来は、童話「ヘンゼルとグレーテル」の中に出てくるエピソードです。
自分たちが通ってきた道にパンくずを置いて、「どのような経路で」「今どこなのか」ということを明確にして道に迷わないようにしたことが由来となっています。

パンくずリストの種類

パンくずリストには、目的や用途の異なる3つの種類があります。

位置型
属性型
パス型

動的・静的などの特徴を理解し、用途に合った型を選ぶことで、ユーザビリティやクローラビリティの向上が可能です。

ここからは、3種類の違いに着目しながら、それぞれの特徴を解説します。それぞれに合うサイトの特徴も紹介するので、参考にしてみてください。

位置型パンくずリスト

位置型パンくずリストとは、ページを閲覧しているユーザーにウェブサイト上の階層と位置を伝えるものです。コンテンツの量が多かったり、サイト階層が多かったりするサイトでも、ユーザーは常に自分の位置を確認できます。

また、位置型パンくずリストは、どの経路でページにたどり着いたとしても同じものが表示される特徴があります。

そのため、検索などで記事に直接訪れたユーザーも、その記事が「HOME（トップページ）＞COLUMN（大カテゴリ）＞SEOの記事一覧（子カテゴリ）」の下にあることが一目でわかります。

一般的に、「パンくずリスト」といえばこの位置型パンくずリストを指すケースが多いです。ユーザーも見慣れており、検索エンジンも認識しやすいため、明確な理由がない限り位置型パンくずリストを採用すると良いでしょう。

パス型パンくずリスト

すべてのユーザーに同じリストが表示される「位置型パンくずリスト」に対し、パス型パンくずリストはユーザーが辿ったページを、辿った順番にすべてパンくずリストに表示するものです。

たとえば、ECサイトで遷移してきたページにすぐに戻れるという特徴があります。

例
メンズ（大カテゴリ）＞Tシャツ商品（商品ページ）＞ボトムス（小カテゴリ）＞トップス（小カテゴリ）＞レディース（大カテゴリ）

ただしパス型パンくずリストは例を見ると分かるように、必ずしも階層構造が分かるように表示されるわけではありません。子ページから親ページにつながることや同じ階層同士でつながることもあります。

そのため、階層を示すというパンくずリスト本来の役割を担えない可能性があり、現在はほとんど使われていません。

属性型パンくずリスト

属性型パンくずリストとは、閲覧中のページにたどり着くまでの過程をユーザーごとに表示するパス型の特徴に加えて、階層構造が分かるように表示されるリストです。

下記の例では、ユーザーAとユーザーBは同じ物件サイトの「マンションC」のページを訪れました。しかし、そこに至るまでの過程が異なるため、パンくずリストの表示も異なります。また、履歴を残すだけのパス型と違い、カテゴリの親子関係を踏まえて表示される特徴を持ちます。

ユーザーA：東京都＞千代田区＞マンションC
ユーザーB：東京都＞秋葉原駅＞マンションC

属性型パンくずリストは階層を示しつつ、検索や遷移の履歴をひと目で確認できることがメリットです。そのため、ECサイトや物件サイトのように条件を絞って検索できるサイトで用いられています。

パンくずリストの設置によるメリット

パンくずリストは、ユーザーとSEOの両方に良い効果を与えられます。たとえばWordPressを使用していればプラグインで簡単に導入できるなど、比較的少ない工数で実装できる場合も多いため、早めに検討しておきましょう。

ここからはパンくずリストを設置するメリットを詳しく解説していきます。

ユーザビリティの向上

パンくずリストのメリットは、ユーザーがサイトを回遊しやすくなることです。ページ数が多くなればなるほどユーザーは自分がどこのページにいるのか迷いやすくなるため、パンくずリストはユーザーがサイトの構造を把握する意味でも有効な手段となります。

たとえばECサイトで閲覧中の商品が気に入らなかった際に、パンくずリストがあれば商品カテゴリー（トップス、ボトムス）などのカテゴリページに即座に移動できます。

次に見たいページまでのクリック数が増えるほど不便な印象を与えてしまうので、常にパンくずリストを確認できる状態にして利便性を高めましょう。

また、カテゴリページを経て商品ページを訪れたユーザーだけでなく、検索などから訪れたユーザーもカテゴリページへ促せるため、より多くユーザーに複数の商品を訴求可能です。

SEOで評価を高めることができる

パンくずリストは、クローラーの回遊しやすさ（クローラビリティ）を高められるため、SEOに良い効果をもたらします。

実際に、GoogleはパンくずリストがSEOに効果的だと発表しています。

パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。訪問者はパンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ（通常はルートページ）を置き、右側に向けてより具体的なセクションを並べています。パンくずリストを表示する場合は、パンくずリストの構造化データのマークアップを使用することをおすすめします。
引用元：検索エンジン最適化（SEO）スターターガイド

ここからはパンくずリストのSEO効果について詳しく解説します。

クローラーにサイトの構造を理解してもらえる

Googleをはじめとする検索エンジンにおいて、自分のページを検索結果画面に表示させるためには、検索エンジンのクローラーと呼ばれるロボットに自分のサイトをクローリング（情報収集）してもらわなくてはいけません。

その際パンくずリストを設置しようとサイト内を整理することで、必然的にサイト構造が体系的になっていくはずですが、このことが効率的にクローリングしてもらいやすくなる手だてになります。

クローリングして集められた情報は、検索エンジンのデータベースに格納され、それをもとにサイトの検索結果に反映されます。

ですから、クローリングをスムーズに行えるようにサイト構造を整えることは、SEO上プラスになるというわけです。

クローラーが内部リンクをクローリングしやすくなる

パンくずリストは、それ自体が内部リンクとなります。

また、SEOで強化したいキーワードをパンくずリストの中のアンカーテキスト（<a>タグの中に入る、リンクで表示される箇所のテキスト）に入れることによってそのキーワードの評価を上げる施策となります。

たとえばファッションアイテムを扱うネットショップの場合、

ホーム＞メンズ＞アウター＞ダッフルコートのように、アウターやダッフルコートをアンカーテキストにして、SEOを行うことができます。ホームなどをサイト名やショップ名にするなど、上位表示したいキーワードに変更することも可能です。

パンくずリストに対策キーワードを含めて評価を得られる

対策したいキーワードがパンくずリストに入っていれば、検索エンジンが巡回しやすくなります。パンくずリストに表示される新規カテゴリを作る際には、対策キーワードを含めた名前を設定しましょう。

また、構造化データを実装すれば、検索画面にもパンくずリストを表示可能です。ユーザーの視認性が高まり、間接的にGoogleからの評価も向上する可能性があります。

ただし、パンくずリストはあくまでも階層や位置を示すことが役割です。無理に対策キーワードを入れて、カテゴリ名や階層がわかりにくくならないように注意しましょう。

パンくずリストの設置方法

では、パンくずリストの設置方法を紹介しましょう。

HTMLで設置する方法

HTMLで設置する場合、パンくずリストは<body>と</body>の間に置きます。

<body>
・・・
<a href="index.html">ホーム</a> >
<a href="tent/index.html">メンズ</a> >
<a href="tent/index.html">アウター</a> >
ダッフルコート
・・・
</body>

上記のように、<a href=にはリンク先を、</a>の前にページの内容を示すテキスト（アンカーテキスト）を</a>の背後に「> 」を設置します。

<a href=を増やすことで、階層が増えていきます。

こうしてパンくずリストを作れば、ページ上だけでなくユーザーが検索した場合に、検索結果のページURL下にパンくずリストが出ます。

構造化マークアップ（JSON-LD）で設置する方法

パンくずリストの設置方法にはもう一つ、構造化マークアップがあります。構造化マークアップをするメリットは、HTMLで記述するよりもパンくずリストがクローラーに効率的に伝わりやすくなる点です。

また構造化マークアップを行うことによって検索結果画面にリッチスニペットとして表示されやすくなることもメリットの1つです。

構造化データを上手く活用するためには、「形式（シンタックス）」と「ボキャブラリー（属性）」の知識が重要になります。

ボキャブラリーとは、コンピュータが認識できるように情報を定義する方法のことです。たとえば「schema.org」というボキャブラリーでは、人の名前は「name」、映画は「movie」のように記述することでコンピュータがその通りに認識してくれます。

一方でシンタックスとは、ボキャブラリーを記述するルールのことです。「JSON-LD」「microdata」「RDFa」の3種類があり、Googleは「JSON-LD」を推奨しています。

ここからは構造化マークアップでパンくずを設置する方法をご紹介します。

今回は、形式は「JSON-LD」、ボキャブラリーは「schema.org」を用いて、『検索意図とは？SEOでの種類や重要性について解説！』のパンくずリストを作成するケースを見てみましょう。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "HOME",
      "item": "https://hitonote.jp//"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "COLUMN",
      "item": "https://hitonote.jp/column/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEOの記事一覧",
      "item": "https://hitonote.jp/column/seo/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "SEOとは",
      "item": "https://hitonote.jp/column/seo/4219/"
    }
  ]
}
</script>

構造化データのマークアップが完了したら「リッチリザルトテスト」や「スキーママークアップ検証ツール」などのテストツールを使用して、正しく設定ができているか検証することが大切です。

パンくずリストを実装する際のポイント

パンくずリストを実装する際は、以下のポイントを抑えて行いましょう。

Googlebotが位置型パンくずを読み取れる状態にする

ECサイトなどではユーザーの特性上、属性型パンくずリストが採用されていることが多いものの、Googlebotにサイト構造を理解してもらうためには位置型パンくずリストが必要になります。なぜなら、属性型パンくずリストはCookieを活用して生成されているからです。

Cookieとは、行動履歴などのユーザー情報をブラウザに一時的に保存する機能のことです。属性型パンくずリストは、その情報をもとにサイト内の閲覧・検索履歴をリンクとして表示しています。

しかしGooglebotは、Cookieを持っておらず、適切な属性型パンくずリストが生成されません。そのため、正しいサイト構造を認識してもらうためには、位置型パンくずリストを表示する必要があります。また、Googlebotのように行動履歴を持たない初回訪問のユーザーに対しても、位置型パンくずリストが必要です。

属性型パンくずリストを採用する場合は、行動履歴を持たないユーザーに向けた位置型パンくずリストをデフォルトで設定をしておきましょう。

SEOで評価を集めたいキーワードをパンくずに入れる

特に力を入れている商品や、注力するキーワードがある場合は、そのワードをパンくずに入れましょう。もちろんそのワードはページの内容に関連していることが必須です。

検索エンジンにページの内容を伝えやすくなり、かつサイト構造を把握してもらいやすくなるメリットがあります。

SEOキーワードに関する記事はこちら
・SEOキーワード選定法を実践的に４ステップで解説！押さえておくべきポイントとは？

可能な限りカテゴリ構造をわかりやすく

コンテンツに関して分類基準の定義づけを行い、カテゴリを明確にしておきましょう。カテゴリが不明瞭だったり、どのように分類しているのかあいまいだったりすると、ユーザビリティは悪くなり、SEOの効果も期待できません。

基本はすべてのページに設置する

パンくずリストは、基本的にWebサイト内のすべてのページに設置しましょう。パンくずリストが設置されていないとクローラビリティが低下する可能性があります。

ただし、トップページのようにカテゴリ分類ができないページには、無理に設置する必要はありません。WordPressを用いたサイトであればプラグインで表示設定を操作できるので、随時変更しながら最善策を見つけていきましょう。

ページの上部に設置する

パンくずリストの設置場所は自由ですが、ほとんどのサイトが上部に設置していて、ユーザーもそれに慣れているため、サイトの上部に設置するのがベストです。目につくサイト上部に設置しておくことで視認性を高めることができるでしょう。

今いるページは表示してもしなくても良い

ユーザーが今見ているページをパンくずリストとして表示するのが正しいか、表示しないのが正しいのかということですが、これには正解はありません。含めると長くなってしまう場合は含めないほうが良いですし、そうでない場合は表示してかまわないでしょう。

ただし、今いるページを表示させない場合、そのすぐ上の階層のパンくずは忘れずにリンクにしましょう。

例えば今いるページが

「ランプ印ステンレス鋼製屑入投入口 AD-DH015 フタ付」

なら、長くなりすぎるので今いるページは表示させないで以下のようなパンくずリストにしましょう。

近藤金物店 > サニタリー > ラバトリー金物・屑入投入口 >

スマホページでも表示させる

スマホページでは画面サイズの関係上、パンくずリストの表示が難しい場合があります。肝心のコンテンツ部分が隠れてしまっては意味がないと考えている方も多いでしょう。

しかし今はPCでのサイト閲覧よりもスマホでの閲覧割合が圧倒的に高く、モバイルファーストでのインデックスを意識していく必要があります。つまりスマホサイトでもしっかりとパンくずリストが表示されるようにしておくことを、おすすめします。

まとめ

パンくずリストとは、サイト内でのページの階層や位置を示すナビゲーションです。「位置型」「属性型」「パス型」の3種類があり、一般的には位置型が用いられています。

パンくずリストは、HTML、あるいは構造化マークアップによって設置できます。また、WordPressを用いたサイトであれば、プラグインでの設置も可能です。実装する際は、カテゴリ構造をわかりやすくしたり、対策キーワードを含めたりして、ユーザーにもクローラーにも優しいサイトづくりを心がけましょう。

SEOに関する記事はこちら
・SEOの効果とは？効果を出すための対策ポイントも解説！
・効果的なSEO戦略とは？考えるべき4つのポイントとSEOテクニック
・表示速度はSEOにとって重要！計測方法＆改善方法の事例をご紹介

執筆者：ヒトノート編集部

株式会社ヒトノテのオウンドメディア、WEBマーケティングの学習帳「ヒトノート -Hito note-」の編集部。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。