株式会社セブンデザイン 大阪市都島区のホームページ制作会社

  • 公開日: 最終更新日:

パンくずリストとは?メリットや種類、設置場所、実装法、注意点を解説

パンくずリストを設置することで、訪問者がサイト内のどのページを見ているのかが分かるので、ホームページのユーザビリティが高まります。

さらに、パンくずリストにはSEO効果もあるので、検索エンジンから見込み顧客を集客したいと考えている方にとっては必須のコンテンツと言えるでしょう。

当ページでは、パンくずリストとは何かや、メリット、種類、設置場所、実装法、設置の注意点を解説します。

パンくずリストとは

パンくずリストとは、グリム童話「ヘンゼルとグレーテル」の中で、迷子にならないようにパンくずを落とした話が由来しており、ホームページで迷子にならないように、訪問者が見ているページの階層をリスト化したナビゲーションのことを言います。

以下は、当サイトのパンくずリストです。

当サイトのパンくずリスト

昨今のインターネットユーザーは、検索エンジンやSNSを使って、トップページではなく下層ページを入口にしてアクセスすることが一般的になるので、自分が今どのページを見ているのかを知るにはパンくずリストが必須です。

特に、小規模サイトではなく、10,000ページを超えるような大規模サイトの場合は、深い階層までページが存在することが一般的で、パンくずリストがないと、訪問者はどのページを見ているのかが分からないので、ユーザビリティの低いホームページとなってしまいます。

ちなみに、パンくずリストは、トップページを除くすべてのページに設置されることが一般的です。

パンくずリストのメリット

パンくずリストのメリットは、ホームページの利便性とSEO効果の向上になります。

コンテンツの理解度が高まる

パンくずリストを設置することで、訪問者が今どのページを見ているのかを把握することができます。

トップページから訪問したユーザーであれば、自分で内部リンクをクリックしているので、大まかに自分が見ているページを把握できていると思いますが、検索エンジンやSNSからアクセスしてきた訪問者は、どのページを見ているかをすぐに理解することはできません。

そういった場合に、パンくずリストが設置されていることで、ユーザーが自分がいる場所を正確に把握することができるようになり、ページのコンテンツの理解度を高めることができます。

クローラーの巡回をサポートする

コーポレートサイト制作のページのパンくずリスト

パンくずリストは、例えば、「トップページ>サービス>コーポレートサイト制作」のように記載され、トップページとサービスのテキストには該当ページへの内部リンクが張られています。

すなわち、Googleのクローラーがページを見ている最中に、パンくずリストがあることで、トップページやサービスページへと移動してくれるようになるので、クローラーの巡回効率が高まり、トップページやサービスページのSEO効果を高めることができます。

もちろん、訪問者と同様に、今見ているページが分かることで、分かりやすいホームページと認識してもらうことができ、クローラーの訪問回数も自然と増えていきます。

内部リンクによるSEO効果の向上

パンくずリストは、内部リンクになっているので、内部リンク先ページのSEO効果を高めることが可能です。

ただし、現在のGoogleは関連性を重視しているので、例えば1,000ページのホームページがパンくずリストを追加した結果、1,000本の内部リンクが増えたとしても、そのうちの何割かはGoogleから関連性が低いと判断されて、無効化されています。

もちろん、すべてのページのパンくずリストにある内部リンクが無効化されているわけではないので、関連性が高いページであれば、SEO効果を発揮できる可能性が十分にあります。

パンくずリストの種類

パンくずリストには、位置型と属性型、パス型の3つの種類があります。

位置型パンくずリスト

位置型パンくずリストは、現在の主流になり、「トップページ>大カテゴリ>小カテゴリ>ページ」というように、現在の階層が一目で分かります。

位置型パンくずリストの特徴は、どのようにユーザーが該当ページにアクセスしたとしても、同じ内容が表示される仕様になっているので、ユーザーに分かりやすくなっています。

当社も位置型パンくずリストをおすすめしており、訪問者はもちろん検索エンジンからも高い評価を得やすい魅力があります。

属性型パンくずリスト

属性型パンくずリストは、訪問者がどのような過程でページにたどり着いたかで、内容が変わります。

例えば、どちらも同じページのパンくずリストですが、以下のようにアクセス経路で内容が切り替わります。

  • ユーザーA:トップページ>京橋店>冷蔵庫>冷蔵庫A
  • ユーザーB:トップページ>都島店>キッチン>冷蔵庫A

ユーザーAは、京橋店から冷蔵庫カテゴリにアクセスして冷蔵庫Aにたどり着いており、ユーザーBは都島店からキッチンカテゴリにアクセスして冷蔵庫Aにたどり着いています。

ユーザーとしては、分かりやすいパンくずリストになっていますが、Googleは認識がしづらくなっているので、SEOを行っているホームページにはおすすめできません。

パス型パンくずリスト

昨今のホームページでは利用されないのがパス型パンくずリストです。

パス型パンくずリストは、ユーザーがどのページに移動したかを、すべて履歴として表示させてくれます。

現在では使われていない理由は、そもそもの役割を果たしておらず、パス型パンくずリストでは、ユーザーがどの階層にいるかが分からないので、ブラウザの戻るボタンと同じ役割しかありません。

パンくずリストの設置場所

パンくずリストの設置場所に決まりはありません。

当社ではページの上部に配置していますが、ホームページによっては下部に配置しているケースも見られます。

あくまで当社の利用法ですが、ページの文章量が多いホームページであれば、ページの上部に配置したほうが、ユーザーがパンくずリストを確認して、どのページを見ているか把握してからコンテンツを読むことで、読解スピードや内容の理解度を高めることができます。

逆にビジュアルメインのページでは、コンテンツの魅力の妨げにならない下部に配置した方が良いでしょう。

また、パンくずリストの位置は、ディレクトリごとに変更してはならず、ユーザーがどの位置を見れば良いかが理解できていることが重要なので、サイト全体で同じ場所に設置しましょう。

パンくずリストの実装法

HTMLとWordPressの場合でパンくずリストの実装法を解説します。

HTMLの場合

HTMLの場合は以下のタグを記述します。

<nav>
<ol>
<li><a href=”https://example.com/”>トップページ</a></li>
<li><a href=”https://example.com/blog/”>ブログ</a></li>
<li><span>パンくずリストとは</span></li>
</ol>
</nav>

トップページやブログページには内部リンクが必要ですが、現在見ているページには内部リンクは必要なく、代わりにspanタグを利用しましょう。

WordPressのプラグインの場合

パンくずリストが設置できるWordPressのプラグインBreadcrumb NavXT

WordPressであれば、Breadcrumb NavXTというプラグインをインストールするとドラッグ&ドロップでパンくずリストを実装できます。

パンくずリスト設置の注意点

パンくずリストを設置する際の注意点を解説します。

過度に深い階層構造にしない

パンくずリストを設置する際に、過度に深い階層構造にしないように意識しましょう。

過度に深い階層構造だと、見栄え的にも良くないですし、ユーザーが今自分がいるページをすぐに把握することが難しくなってしまい、ユーザビリティが十分に高まらなくなってしまいます。

アンカーテキストを含める

パンくずリストのアンカーテキストには重要なキーワードを含めましょう。

アンカーテキストにキーワードが含まれていないと、訪問者が混乱してしまう可能性がありますし、さらにはGoogleのクローラーがリンク先ページを正確に評価することができなくなる可能性もあります。

スマートフォンでの見やすさを意識する

パンくずリストを設置する際には、パソコンでの見栄えだけではなく、スマートフォンでの見栄えにも意識を向けましょう。

昨今のホームページは、パソコンよりもスマートフォンユーザーの方が多くなっていることや、Googleもモバイルファーストインデックスを導入しているので、スマートフォンでの見栄えの重要性は高くなっています。

パンくずリストのまとめ

パンくずリストを解説しました。

パンくずリストを実装することで、ユーザビリティやSEO効果の向上を実現できる可能性があるので、すべてのホームページに実装が必須と言っても過言ではありません。

パンくずリストって何?とお思いの方の参考になれば幸いです。

関連サービス

ユーザーフレンドリーなホームページとは
パンくずリストを設置することでユーザーフレンドリーなホームページへと成長します
大阪のホームページ作成会社
パンくずリストに限らず、ユーザービリティとSEOを考慮したホームページを作成します。
記事一覧に戻る