セブンデザイン 成果を追求した大阪のホームページ制作会社

  • 公開日: 最終更新日:

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

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

さらに、パンくずリストには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というプラグインをインストールするとドラッグ&ドロップでパンくずリストを実装できます。

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

記事一覧に戻る