パンくずリストとは?SEOへの効果と設定方法を解説

Webサイトを見ていると、ページ上部に以下のようなリンクを見かけたことはありませんか?

Webサイトのパンくずリストのイメージ

 

これは「パンくずリスト」と呼ばれ、ユーザーがサイト内のどこにいるのか教えてくれる道しるべのようなものです。

このパンくずリストは、ただユーザーを迷子にならないようにするだけではありません。

実は、Webサイトを検索エンジンに高く評価してもらうためのSEO対策の1つでもあります。検索エンジンは、このパンくずリストも参考にしながら、サイトの構造や内容を理解し、検索結果に表示する情報や要素を決めているのです。

この記事では、パンくずリストが持つ役割やSEO効果について詳しく解説します。さらに、パンくずリストを実際に設置する方法をご紹介します。

目次

パンくずリストとは?

パンくずリストとは、Webサイト内でユーザーが迷子にならないための道しるべのようなものです。

サイトの階層構造を分かりやすく表示し、現在自分がどのページにいるのか、そしてどこから来たのかを教えてくれるナビゲーションの一種です。

この名称は、グリム兄弟による童話「ヘンゼルとグレーテル」に由来します。童話の中で、主人公の兄妹ヘンゼルとグレーテルは、森の中で迷わないように道にパンくずを落としながら進みました。このパンくずが彼らのたどった道を示す目印となり、元の場所に戻る手助けとなったのです。

Webサイトに当てはめると「トップページ > サービス紹介 > Web制作」のように表示されることで、現在のページがWebサイト全体のどの階層に位置しているのかをユーザーに分かりやすく伝えることができます。

パンくずリストには、主に3つの種類があります。

階層型パンくずリスト

階層型パンくずリストは、Webサイトの階層構造をそのまま反映した、最も一般的なパンくずリストです。

ユーザーは現在どのページにいるのかを直感的に理解でき、上位階層への移動も簡単に行えるため、ユーザビリティ向上に大きく貢献します。

具体的には、以下のような例が挙げられます。

①ECサイトの階層型パンくずリストの例

スクリーンショット 2024-07-03 22.44.46

 

②企業サイトの階層型パンくずリストの例

スクリーンショット 2024-07-03 22.49.50

階層型パンくずリストは、シンプルながらも効果的なナビゲーションツールとして、多くのWebサイトで採用されています。

SEOの観点からも、階層型パンくずリストは非常に有効です。サイト構造を明確に示すことで、検索エンジンのクローラーがサイト内を巡回しやすくなり、インデックスの効率が向上します。

また、ユーザーがサイト内をスムーズに移動できるため、滞在時間の増加や離脱率の低減にも寄与します。

パス型パンくずリスト

パス型パンくずリストは、ユーザーがWebサイトに訪れてから現在のページにたどり着くまでの経路を表示するパンくずリストで、「履歴型パンくずリスト」とも呼ばれます。

パス型パンくずリストの最大のメリットは、ユーザーがサイト内で迷子になった場合に、以前訪れたページに戻りやすくなる点です。

例えば、ユーザーが「トップページ > 商品カテゴリー > 商品詳細ページ > カート」という経路をたどった場合、このリストを見ればすぐに「商品カテゴリー」に戻れるという利便性があります。

しかし、ブラウザの「戻る」ボタンとほぼ同じ機能を持つため、近年のWebサイトでは、ほとんど使用されていません。現代のブラウザでは「戻る」ボタンが非常に使いやすくなっており、パス型パンくずリストの必要性が低くなっています。

パス型パンくずリストは、一見便利に思えますが、ユーザーの行動履歴が長くなるとリストが複雑になり、逆にわかりにくくなる可能性もあります。そのため、多くのWebサイトでは、階層型パンくずリストを採用して、ユーザーに対して常に一貫したサイト構造を提示する方法が好まれています。

属性型パンくずリスト

属性型パンくずリストは、ユーザーが閲覧しているページの属性や特徴を基に構成されるパンくずリストです。商品の特性や検索フィルターの条件を示すために使用され、特定の属性を持つ商品や情報を探しているユーザーにとって便利なナビゲーションツールとなります。

属性型パンくずリストは、特に情報量が多いサイトや、たくさんの商品を扱っているECサイトで役立ちます。

属性型パンくずリストの例_ECサイト

例えば、ECサイトで「赤いワンピース」を探している場合、属性型パンくずリストを使えば、色やブランド、価格などの条件を一目で確認し、絞り込むことが出来ます。

また、ユーザーが条件を変更したい場合も、属性型パンくずリストをクリックすることで簡単に戻り、再検索することができます。これにより、ユーザーの検索体験が向上し、目的の商品や情報に効率よくたどり着くことができます。

パンくずリストがSEOに有効な理由

パンくずリストは、ユーザーにとって便利なナビゲーションであるだけでなく、SEO対策にも効果があります。

ここでは、パンくずリストがSEOに有効な理由を詳しく解説します。

1. サイト全体のインデックスが効率化する

Oops! 404 Error with a broken robot-amico (1)

パンくずリストは、Webサイト内のページ同士を繋ぐ内部リンクとしての役割を果たします。

クローラー」と呼ばれる検索エンジンのロボットが、サイト内をスムーズに探索するための道案内をする役割を担います。パンくずリストをたどることで、クローラーはサイトの構造を理解しやすくなり、各ページ間の関連性も把握できるようになります。

結果的にサイト全体のインデックスが効率的に行われ、検索結果に表示される可能性が高まります。

さらに、パンくずリストはページの上部に設置されることが多いため、クローラーが最初に目にするリンクの一つとなります。そのため、パンくずリストに含まれるキーワードは、検索エンジンがページの内容を判断する上で重要な手がかりとなります。

2. ユーザビリティが向上する

Usability testing-pana (1)

パンくずリストは、ユーザーが現在のページの位置を把握しやすくし、上位階層のページに簡単に戻れるようにするため、サイトの使いやすさを向上させます。これにより、ユーザーの滞在時間が増え、直帰率が低下する傾向があります。

これらの要素は、検索エンジンがサイトの品質を評価する際に考慮されるため、結果的にSEOにも好影響を与えます。

3. クリック率の向上が期待できる

Analyze-pana (1)

Googleなどの検索エンジンでは、パンくずリストをリッチリザルトとして表示することがあります。

リッチリザルトとは、通常の検索結果よりも詳細な情報を表示する機能で、検索結果が目立ちやすくなり、クリック率の向上が期待できます。

パンくずリストがリッチリザルトとして表示されると、検索結果にページの階層構造が追加され、ユーザーはサイトの内容をより深く理解できることから、ユーザーが求める情報を持っているサイトだと認識されやすくなり、クリックされる可能性が高まります。

関連記事:構造化データ マークアップとは?SEO対策に効果的!リッチリザルト表示でクリック率アップを狙う方法

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

パンくずリストの設定方法は、Webサイトのプラットフォームや使用するテーマによって異なります。

ここでは、Googleの推奨する構造化データ(JSON-LD)を用いたパンくずリスト設定方法をご紹介します。

1.パンくずリストの構造を決定する

まず、ウェブサイトの構造に基づいて、パンくずリストに表示したい階層と各階層の名称、リンク先URLを明確にします。

例:

  • トップページ(/)
  • 製品カテゴリ(/products/)
  • 特定の製品(/products/product-a/)

2.JSON-LD形式で構造化データを作成する

Google検索セントラルのドキュメントにある以下のJSON-LDコードを参考に、構造化データを作成します。各項目を、実際のWebサイトの構造に合わせて書き換えてください。

コードスニペット

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "トップページ",
    "item": "https://example.com/"  
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "ブログ",
    "item": "https://example.com/blog"  
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "記事タイトル",
    "item": "https://example.com/blog/article-title"  
  }]
}
</script>

 

JSON-LD 概要
@context スキーマのコンテキストを定義します(通常は"https://schema.org")。
@type データ型を指定します(パンくずリストの場合は"BreadcrumbList")。
itemListElement パンくずリストの各要素を配列で定義します。
 @type 要素のデータ型を指定します(通常は "ListItem")。
 position 要素の順番を示す数値です(1から始まります)。
 name パンくずリストに表示するテキストです。
 item パンくずリストがリンクするURLです。

3.構造化データをHTMLに埋め込む

作成した構造化データを、パンくずリストを表示したいページのHTMLの<head>タグ内に貼り付けます。

4. リッチリザルトテストで確認する

Googleが提供するリッチリザルトテストツールを使って、構造化データが正しく認識されているか確認します。

見出しを追加 (2)

5. Googleサーチコンソールに送信する

GoogleサーチコンソールのURL検査ツールを使って、パンくずリストを設定したページをGoogleに送信し、インデックスをリクエストします。

見出しを追加 (3)-2

設定の注意点

  • パンくずリストは、各ページに合わせて適切な階層構造で作成しましょう。
  • JSON-LDコードは、Googleの公式ガイドに基づいて正確に記述しましょう。
  • リッチリザルトテストでエラーや警告が表示された場合は、改めてコードの見直しを行いましょう。

パンくずリストに関するよくある質問

パンくずリストについて、よくある質問とその回答をまとめました。

Q1:パンくずリストは全てのページに設置すべきですか?

A:基本的には、トップページ以外の全てのページに設置することをおすすめします。ただし、1ページしかないWebサイトや、階層構造が非常にシンプルなWebサイトでは、必ずしも必要ではありません。

パンくずリストを設置するかどうかは、Webサイトの規模や構造、コンテンツの内容などを考慮して判断しましょう。

Q2:パンくずリストに含めるべき情報は?

A:パンくずリストには、以下の情報を表示するのが一般的です。

  • トップページ
  • 上位階層のページ
  • 現在表示しているページ

階層が深い場合は、全ての階層を表示するのではなく、主要な階層のみを表示することも可能です。

Q3:パンくずリストのデザインで注意すべき点は?

A:パンくずリストのデザインで注意すべき点は、以下の通りです。

  • 視認性 -  文字サイズや色使いを工夫し、背景色とのコントラストを確保して、見やすくしましょう。
  • クリックしやすさ - リンクテキストを適切な長さにし、クリックしやすいように間隔を空けましょう。
  • レスポンシブ対応 - スマートフォンなどのモバイル端末でも見やすいように、レスポンシブデザインに対応しましょう。
  • Webサイトとの調和 - Webサイトのデザインと調和するようなデザインを選びましょう。

Q4:パンくずリストはSEOに効果がありますか?

A:はい、パンくずリストはSEOに効果があります。内部リンクとしての役割を果たすことで、クローラーがWebサイト内を巡回しやすくなり、ページ間の関連性を理解しやすくなります。

また、リッチリザルトとして表示されることで、クリック率の向上にも繋がります。

ただし、パンくずリストを設置するだけでは、劇的なSEO効果は期待できません。他のSEO対策と組み合わせることで、より大きな効果を発揮します。

まとめ

この記事では、Webサイトにおけるパンくずリストの重要性について改めて解説しました。

パンくずリストは、ユーザーのサイト内での位置確認を助け、ナビゲーションをスムーズにするだけでなく、SEO対策にも貢献する重要な要素です。

ぜひご自身のWebサイトにパンくずリストを設置することをおすすめします。すでに設置している場合は、デザインや機能を見直し、よりユーザーにとって使いやすいものにしてみてください。パンくずリストの改善は、ユーザーエクスペリエンスの向上に繋がり、ひいてはWebサイト全体の価値を高めることに繋がります。

小さな改善かもしれませんが、ユーザーの満足度を高めるための第一歩として、ぜひパンくずリストにも目を向けてみてください。

参考サイト:Google検索セントラル