SEDesign

パンくずリストとは?基本的な 設置方法とSEOの効果を解説

SEデザイン編集部
2022-07-27
2022-07-27
目次

what-is-a-breadcrumb1

パンくずリストは、Webサイトに設置すると非常に有益な要素です。今サイトのどこにいるのかを階層的に表示し、行きたい階層へのリンクの役割も果たします。ユーザーが現在地を知ることができ、関連するページへの遷移も容易になります。

この記事ではパンくずリストとは何か、どのような種類があるのか、設置の際の注意点などをご紹介します。

パンくずリストとは?

パンくずリストとはWebページの階層構造をリスト表示し、今ユーザーがどのページにいるのかをナビゲーションするリンクです。表示の方法や場所はサイトによって異なりますが、「>」や「/」で階層を区切ってある場合が多いです。また表示されている場所は、ページの上部か下部がほとんどです。

英語では「Breadcrumb List」と表記します。グリム童話の「ヘンゼルとグレーテル」で、ヘンゼルとグレーテルが道に迷わないように、パンのかけらを落としながら歩いたという物語が名前の由来です。

たとえば、当ブログの記事「マーケティングにおけるインサイトの意味とは?潜在ニーズとの違いも解説」を見ているとき、パンくずは以下(赤枠)が表示されています。

what-is-a-breadcrumb1-1

パンくずリストが与えるSEOの効果・メリットとは?

what-is-a-breadcrumb2パンくずリストを設置すると、SEOのプラス効果が期待できます。具体的なメリットについて解説していきますが、パンくずリストは設置してめざましい効果が得られるSEO施策ではありません。このことから「パンくずリストはいらない」と考える方もいます。

しかし、パンくずリストはGoogleも設置を推奨する基礎的な施策なので、設置しないことで他のサイトとマイナスの意味で差をつけられてしまうことがあります。そのため、設置した方が望ましいといえるでしょう。

さて、さっそくSEOの効果とメリットについてお伝えします。

【SEOの効果・メリット】

  • クローラビリティが向上する、検索順位に良い影響が期待できる
  • ユーザー側がアクセスしやすくなる

具体的なメリットをひとつずつ解説していきましょう。

クローラビリティが向上し、検索順位に良い影響が期待できる

パンくずリストを設置するとことで、クローラビリティ、つまりサイトを評価するクローラーというロボットの巡回のしやすさが向上します。クローラーが巡回しやすくなると、サイト内のコンテンツが発見されやすくなったり、更新後に再評価されやすくなり、検索順位向上が期待できます。

また、階層表示をリンクで行うことで、GoogleのWebページの階層構造理解にも役立てられます。

ユーザー側がアクセスしやすくなる

パンくずリストの設置はクローラーだけでなく、実際にサイトを見ているユーザーにもメリットがあります。サイトの階層が一目でわかるように設置されることで、得たい情報が探しやすくなります。パンくずリストがあれば、複雑なサイトでもユーザーは同じカテゴリーの商品や記事を探すことが簡単にできます。

パンくずリストの種類とは?

パンくずリストには、さまざまな種類があります。

【パンくずリストの種類】

  • 位置型
  • 属性
  • パス型

それぞれどのような特徴を知り、自分のサイトに合ったものを利用するのがおすすめです。

階層構造に沿った「位置型パンくずリスト」

位置型パンくずリストは、Webサイトの階層構造に沿ったリスト表示形式です。サイトによって記載方法やルールに違いはありますが、どのような手順でページに訪れても、同じページを見ていれば同じリストが表示されるというのが特徴です。

例を挙げると、以下のとおりです。

【位置型パンくずリストの例】

  1. ホーム>家電>キッチン>冷蔵庫・冷凍庫>商品ページ 

サイトのホームから商品を探して商品Aにたどり着いた場合も、検索エンジンから直接商品Aのページを閲覧した場合も、どちらでも上記のリストが表示されるよう設定された静的なリストです。位置型パンくずリストは、現在最も多くのページに使われている表示方法です。

過程を表示する「属性型パンくずリスト」

属性型パンくずリストは、ユーザーがページにたどり着いた経路によって変化するリストです。

例を挙げると、以下のとおりです。

【属性型パンくずリストの例】

  1. Aさん:ホーム>賃貸>東京都>杉並区>高井戸駅>物件ページ A

  2. Bさん:ホーム>東京都>沿線から探す>京王井の頭線>高井戸駅>賃貸>物件ページ A

AさんとBさんは現在見ているページが同じですが、それまでたどった道のり、検索ソートの手順が違うため、リストの内容は異なります。属性型パンくずリストは、利用者ごとに変わる動的なリストです。ECサイトや不動産サイトなど膨大なデータを取り扱うサイトに多かったですが、現在はあまり採用されていません。

閲覧履歴を示す「パス型パンくずリスト」

パス型パンくずリストは、ユーザーが閲覧したページの履歴を表示するリストです。

例を挙げると以下のとおりです。

【パス型パンくずリストの例】

  1. ホーム>検索結果“冷蔵庫”>商品ページ A>ブランド”α”>カテゴリ”テレビ”>カテゴリ”液晶テレビ” >商品ページ B
  2. ※家電取り扱いECで冷蔵庫の商品ページから同一ブランドのテレビの商品ページまで回遊した想定

パス型パンくずリストの内容はブラウザの「戻る」ボタンと同じような機能で、上述してきたようなパンくずリストとしての役割を果たしません。現在では利用しているサイトは、ほとんどありません。

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

what-is-a-breadcrumb3パンくずリストの設置方法、設置する際のポイントをご紹介します。

【パンくずリストの設定や設置の注意点】

  • シンプルに記載する
  • 関連性のあるSEO対策キーワードを含める
  • ページの上部や下部に設置する
  • 構造化データのマークアップをする
  • スマートフォンでも見やすい仕様にする

注意点に気をつけつつ、適切に設置していきましょう。

シンプルに記載する

パンくずリストは、シンプルで分かりやすいものにしてください。そして、階層順に記載するのがおすすめです。トップページから始まり、大きいカテゴリーから小さいカテゴリーまで階層の順に記載するのが最もわかりやすい方法となります。

「位置型パンくずリスト」の例でカテゴリーを見ていくと、以下のようなになります。

【階層順の例】

  1. ホーム>家電(大カテゴリ)>キッチン(中カテゴリ)>冷蔵庫・冷凍庫(小カテゴリ)>商品ページ A

階層のとらえ方に悩んでしまう場合は、「商品Aにたどり着くためにはどのような経路をたどるのか?」などサイトを辿ってみてください。

また、サイトの規模が大きい場合は、パンくずリストが長くなることがあります。それでもわかりやすいリストになるよう意識し、とには階層を見直して作成していってください。


関連性のあるSEO対策キーワードを含める

パンくずリストにSEO対策キーワードを含めるのは、ユーザーにとって分かりやすさのためにも大切です。より多く検索される一般的なキーワード(SEO対策キーワード)を調べカテゴリー名にすれば、そのキーワードでの検索エンジンの検索結果で表示される可能性が高くなります。

もちろんキーワードを無理にたくさん入れたり、無関係なキーワードを入れたりするのはやめましょう。見づらいですし、SEO的にもマイナスになります。

ページの上部や下部に設置する

パンくずリストは上部や下部に配置するのがおすすめです。上部に設置しているサイトが多いですが、必ずしも上部に設置しなければならないという決まりはありません。サイトのデザインや運営者の好みでユーザーに分かりやすい場所に設置するとよいでしょう。

構造化データのマークアップをする

パンくずリストは構造化データマークアップで設置することが推奨されています。構造化データとは、 Webページの情報と構造をGoogleの検索エンジンに分かりやすく伝えるための専用HTMLコードのことです。

このマークアップを行うことで、Googleのサイト構造理解促進につながったり検索結果ページでもパンくずが表示されやすくなったりすることが期待できます。Googleは、JSON-LDという方法を構造化データとして使用することを推奨しています。マークアップの詳しい方法は、Googleのパンくずリストのマークアップを追加する方法をご確認ください。

スマートフォンでも見やすい仕様にする 

サイトの傾向によりますが、近年はパソコンではなくスマートフォンでWebページを閲覧するユーザーも多いです。なので、パンくずリストもスマートフォンでも見やすい仕様にしましょう。

たとえばフォントサイズを下げ、パンくずリストが1行で表示されるようにする。もしくは改行して表示するなどです。ただ、あまりにもスマートフォンで表示するには長い場合は、パンくずリストを下部に設置するのもよいでしょう。スマートフォン実機で確認しながら、調整していってください。

まとめ

パンくずリストについて、種類や設置方法、設置する際の注意点をご紹介しました。設置すれば、ユーザーは現在地がわかりやすくなり、運営者側にとってもサイトのSEO対策になるなどメリットもあります。紹介した内容を参考に、ぜひパンくずリストを有効活用してみてください。

新規CTA
新規CTA
  • facebook
  • mail

関連する記事

新規CTA

カテゴリー

ニュースレター購読

SEデザインからブログの更新情報をお届けします。