SEO/SEM

パンくずリストとは?種類、設定方法とSEO効果について解説

パンくずリストとは?種類、設定方法とSEO効果について解説
パンくずリストとは、ユーザーが見ているページがサイト全体でどの位置にあるのかを教えてくれるリストのことです。

SEOに影響するため、サイト運営者は対応が必須と言えるでしょう。

設置にはいくつかの注意点もありますので、サイト運営者は意識しておきたいことです。本記事では、パンくずリストの基本知識やSEOの効果、設定方法、注意点について解説します。

パンくずリストとは

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

パンくずリスト(英:Breadcrumb List)は、現在見ているページがサイト内のどの位置にあるかを階層構造で示したリンク付きのリストのことです。上図の赤枠部分が弊社コーポレートサイトにおけるパンくずリストです。それぞれ上位ページの箇所にはリンクが貼られており、クリックすると上位階層に瞬時に戻ることもできます。

ちなみにパンくずリストという名称は、童話『ヘンゼルとグレーテル』の主人公が森の中で迷子にならないようにパンくずを落として歩いたというエピソードが由来です。

パンくずリストの効果

パンくずリストを設置するとユーザーとSEOの両方に効果があります。

ユーザーに対する効果はサイト内のユーザビリティ向上が挙げられます。サイト内の利便性が上がることで回遊性のアップや離脱防止が図れ、CVポイントとなるページへのアクセスが増加することも考えられます。

SEOへの効果は、検索エンジンのクローラーの巡回性の向上やSEO施策で重要な要素である内部対策CTR率の向上も期待できます。

パンくずリストはユーザーとSEOに好影響をもたらしますが、特に大規模サイトほど、パンくずリストの恩恵は大きいといえるでしょう。未設置の場合は、早急に対応することをおすすめします。

ユーザーへの効果

パンくずリストがユーザーに与える効果は、以下3つです。

  • ユーザビリティ(利便性)の向上
  • ページの離脱防止
  • CTR(クリック率)の向上

大規模なサイトほど階層構造が複雑になるので、サイト内における自分の現在地を把握しにくくなります。このような場合にパンくずリストは視覚的・直感的に現在地や辿ってきたルートを教えてくれる役割を果たします。サイトの中で現在地やサイト全体の構造を認識しやすくなるため、「使いやすい」「情報が得やすい」というユーザビリティの向上に一役買っている機能だといえます。

さらに、サイト内の現在地を把握する以外に、ページの回遊性向上や離脱防止につながります。リンクをクリックして簡単に1つ前の階層やトップページに素早く遷移できる導線になっているため、関連ページを見るきっかけを与え、ページからの離脱が低下します。見るべきページがあることで回遊性が上がるため、購入や問い合わせなどのCV(コンバージョン)に発展する可能性も期待できます。

パンくずリストがもたらすユーザー効果

SEOへの効果

パンくずリストはユーザーだけでなくSEOへの効果もあります。以下の観点で効果を期待できます。

  • クローラビリティの向上
  • インデックスの促進
  • CTRの向上

パンくずリストは検索エンジンのクローラービリティ(クローラーの巡回)を助ける役割があります。クローラーとは、ネット上に存在するサイト情報を巡回しながら自動的に収集するプログラムをもつロボットです。クローラーがパンくずリストを読み取るとサイト構造の理解が促進され、新しい記事がインデックスされやすくなります。

クローラーの巡回効率がよくなると、ページの正しい情報がクローラーに伝わりやすくなるため、ページの評価にも好影響を与えて検索順位の向上につながることも考えられます。パンくずリストは関連ページ同士をリンクでつなぐ「内部リンク構造」と見なされるため、クローラーのサイト内巡回をしやすくする効果があるのです。

また、構造化されたパンくずリストを設置すると、検索結果へリッチリザルト(リッチスニペット)で表示されます。

リッチリザルト(リッチスニペット)に反映されたパンくずリスト

一目でページ内容がわかり、ユーザーが必要する情報かどうかを判断できるため、CTR率(クリック率)の向上につながります。

なお、クローラーの仕組みや内部リンク、リッチリザルトについては以下の関連ページを参照してください。

パンくずリストの種類

パンくずリストは、3つの種類に分けられます。

  • 階層型
  • 属性型
  • パス型

それぞれ表示形式に違いがあります。サイトの特徴に応じて選択する必要があるでしょう。以下、それぞれ具体的に解説していきます。

位置型

位置型パンくずリスト

ユーザーのWebサイト内での「現在地」を理解しやすいのが特徴です。トップページから今見ているページが「トップページA>カテゴリーB>記事C」というリスト形式で表示されます。位置型は最もベーシックな構造形式で、Webサイトのほとんどがこのタイプです。

どのような方法で目的のページに行きついてもパンくずリストの表記内容な同じです。つまり静的なリンクのため、いつ・どこからアクセスしても同じ構造になります。

階層構造が深く、多くの記事コンテンツを保有するWebサイトに向いています。

属性型

属性型パンくずリスト

出典:https://www.uniqlo.com/jp/ja/

閲覧中のページがサイトのどのカテゴリーに属するページを見ているのかを示す構造です。ユーザーの操作次第で表記が変化するのが特徴です。

例えば、賃貸情報サイトを検索していると想定します。「○○県、××市、家賃△万円以内」という順に絞込んで検索し、最終的に賃貸マンションAにたどり着いたら、パンくずリストの表記は以下のようになります。

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

同じ「賃貸マンションA」を検索する際、別のルートでたどりつくこともあります。例えば以下のような表示になります。

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

特にECサイトや不動産情報サイト、コンテンツSEOを実施するオウンドメディアなどにおいて使われる構造形式です。膨大なデータベースを有するサイトに有効です。ユーザーが同じカテゴリーの他の商品・記事コンテンツを見たいと思った時に検索しやすい特徴があります。例えるならば検索フィルターの働きに似ており、理想の商品や読みたい記事を探しているユーザーに便利なパンくずリストです。

パス型

ユーザーがたどったページの履歴を示す構造のパンくずリストです。履歴型のパンくずリストとも呼ばれます。サイトにアクセスしてどのルートで最後のページにたどり着いたかは同一ページを見るユーザーであっても個人個人で異なります。

例えば、ECサイトで「14型ノートパソコン」と検索して商品ページAに行きついたとします。

パス型パンくずリストの例①

さらに、目的の商品を探すために「家電カテゴリー」「ノートパソコンカテゴリ」の順でページを開いていきます。

パス型パンくずリストの例②

ユーザーのサイト回遊の履歴に従ってパンくずリストも変化します。ブラウザ履歴や「戻る」ボタンに似た機能なので、パンくずリストの中ではあまり見かけなくなっているのが現状です。

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

パンくずリストを作成するには、サイト構造を示すためのプログラムコードを記述する必要があります。基本的なパンくずリストの機能はHTMLの実装だけでも問題ありません。ただし、HTMLはユーザーにだけパンくずリストとして伝えることができますが、SEOには影響しません。そこで、SEO効果を出すには、HTMLを土台にし、さらに構造化データを用いた記述が求められます。記述に際しては、ユーザビリティやクローラビリティを意識したリスト構成を考えることも必要なので注意しましょう。

パンくずリスト作成の考え方

パンくずリストは、TOPページから順に大きいカテゴリーから小さいカテゴリーへと階層順に記載する形で設置するようにしましょう。「TOP>カテゴリー名>サブカテゴリー名>詳細ページ」の順で表記するのがパンくずリストの基本形です。

例えば、以下のように表記します。

  • TOP>パソコン・周辺機器・プリンター>タブレットPC>商品A
  • TOP>ブログ一覧>SEO>詳細ページのタイトル

パンくずリストの記述ポイントは、閲覧中のページまでどのような経路を通ってきたのかをたどれるように体系的にまとめることです。ユーザーや検索エンジンがサイト内容を理解するのに役立ちます。

また、パンくずリストには、SEO対策キーワードを含めるようにしましょう。検索された時に検索結果に表示されやすくなります。ただし、無理に含めるとGoogleからキーワードの乱用と見なされ、ペナルティを受ける可能性があります。また、やみくもにキーワードを詰め込んで長文化するとユーザビリティにも悪影響を与えることにもつながります。あくまでも自然の形で含めることがポイントです。そして、テキスト表記ではなく、テキストリンクにして設置することもSEO対策に必須となります。

HTMLの記述

HTMLは記述すると以下のようになります。

パンくずリストのHTML記述方法

パンくずリストは一般的に、<li>タグと<a>タグで構成されます。このHTMLを土台にして構造化データを追記していきます。

構造化データの記述

構造化データとは、HTMLの情報を検索エンジンのクローラーにわかりやすく伝える仕組みです。クローラーに正しく伝えるためにテキストに「タグ」を設定します。適切にタグ設定が行われるとクローラーへの情報伝達を促進し、検索結果にも反映されます。

検索結果に反映されたパンくずリストの例

パンくずリストを構造化データで検索結果に反映させるには、検索エンジンのクローラーにパンくずリストの内容を認識させることが必要です。HTMLに情報を定義する規格「schema.org」に定義されているボキャブラリーを記述します。記述形式は以下の3通りあります。

  • JSON-LD形式(ジェイソン・エルディー)
  • microdata形式(マイクロデータ)
  • RDFa形式(アール・ディー・エフ・エー)

それぞれメリット・デメリットなど特徴がありますので、自身のスキルとサイト状況に合わせて選択しましょう。ちなみにGoogleは、「JSON-LD」による記述を推奨しています。どの形式がベストなのかわからない場合は「「JSON-LD」を選んでおきましょう。ここでは「JSON-LD」について説明します。

「JSON-LD」形式の記述例

パンくずリストの「JSON-LD」形式の記述例

引用:パンくずリスト:Google検索セントラル・上級者向けSEO(Google)

JSON-LD形式による記述では、パンくずリスト部分とは別にscriptタグ内に記述します。記述する場所はhead内、body内どちらでも構いません。HTMLと別に記述するため、コードが複雑にならずに済みます。ただし、HTMLを変更した場合、構造化データの修正も必須となるので修正漏れが発生するかもしれません。

構造化データを設定できたら、検索結果に反映されるかどうか検証しましょう。検証ツールはGoogleが提供する「リッチリザルトテスト」を活用します。

詳しい設定方法については、Google公式ページと下記の関連記事を参照してください。なお、

検証方法についても関連記事にて解説しておりますでの合わせて参照ください。

ちなみにWordpressでサイトを作成している方は、パンくずリストの生成機能を搭載したテーマを使うことをおすすめします。自動的に機能的なパンくずリストを適切に表示してくれます。

または、プラグインを使用して設置することも可能です。代表的なものは「Breadcrumb NavXT」というプラグインです。詳しい使い方は、「Breadcrumb NavXTプラグインの使い方(AdminWeb)」を参照ください。

参考:Breadcrumb NavXTプラグイン(パンくずリストの表示) – WordPressプラグインの一覧

パンくずリスト設置場所

パンくずリストの設置場所についてはページ上部でなければいけないわけではありません。一般的に上部に設置するのが主流ですが、ページ下部に設定してもSEOに影響があるわけではありません。設置場所については、ユーザビリティを損なわないことを意識していればよいでしょう。

また、複数個所への設置も可能です。ECサイト、不動産情報サイトなどでは、取り扱い商品やサービスが膨大になるため、複数のパンくずリストを設置する場合もあります。

複数のパンくずリスト

複数のパンくずリストはユーザーにとっては利便性につながります。検索エンジンのクローラーにとっては複数あることで混乱を招いそうですが、Googleではサイトの一番上にあるパンくずリストを最優先してサイトの判断を行います。したがって、検索結果に最も反映させたいものをサイトの一番上に設置しておきましょう。

なお、複数のパンくずリストの設置方法は、Google公式ページで解説されているので参照しておきましょう。

参考:複数のパンくずリストを1つのページに設置することはSEOにおいて問題ないか? | 海外SEO情報ブログ

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

パンくずリストを設置する際は以下のような注意が必要です。

  • サイトのカテゴリー構造を分かりやすくする
  • 最後の項目はリンク設置しない
  • 全ページに設置する

以下、ポイントを絞って解説します。

関連性のあるカテゴリーを設置する

パンくずリストの効果を発揮するには、わかりやすいカテゴリー構造が必須になります。わかりやすい構造を作るには、サイトの階層構造に合わせ、関連性を持たせたカテゴリーを意識することです。全く関係のないものを並べてしまうとユーザビリティの低下を招き、SEO効果も期待できません。

たとえば、以下のようなパンくずリストを見た場合、困惑するのではないでしょうか。

例)TOP>飲み物>コーヒー>ミネラルウォーター

例では、コーヒーとミネラルウォーターの関連性がなく、ユーザーを困惑させてしまうでしょう。本来であれば、「コーヒー>ハウスブレンド豆」「コーヒー>無糖アイスコーヒー」などが当てはまるはずです。

サイト内の構造が整理されていれば、パンくずリストも関連性が保たれます。サイト制作時に関連性の高いコンテンツをカテゴライズして階層構造を設計するなどの対応をしていきましょう。

最後の項目はリンクを設置しない

現在閲覧しているページにはリンクを設定しないようにしましょう。リンクを貼りつけると現在のページを二重に開いてしまうことになり、ユーザビリティが低下します。

リンク付けは、閲覧中のページの上位にあるカテゴリーに設置します。細かなことですが、パンくずリストの効果を最大限に活用するために注意しましょう。

全ページに設定する

サイト内の全ページに設定することが望ましいです。パンくずリストを設置して損するということはほぼありません。ユーザーとSEOのメリットを考えると設置しない手はありません。

ただし、カテゴリーの分類が難しいページCV(コンバージョン)につながるページ(離脱を防止したいページ)については無理に設置する必要はないでしょう。

パンくずリストはスマホでも重要

パンくずリストの設置はスマートフォン専用ページにも対応させることをおすすめします。近年のスマホユーザーの増加を受けてGoogleはPCサイトよりもスマホサイトの内容を重視する評価により検索順位を決定する方針を正式に発表しています。スマホサイトを重要視する方針を「モバイルファーストインデックス(MFI)」といいます。そのため、PC・スマホなど閲覧する画面に関係なく表示を最適化するレスポンシブデザインの必要性が求められてきます。

しかし、スマホのページはPCに比べて画面表示範囲が限られています。そのため、サイトによっては表示を省略しているものもあります。

とはいえ、SEOの観点ではスマホサイトの対応は必要性が高いのも事実です。そこで、スマホサイトのための対処が重要です。実際、パンくずリストを上部ではなく画面下部へ設置したり、一つ上のカテゴリー階層までの表示にしたり、横スクロール対応で表示したりなど表示の工夫を行うサイトも増えてきています。

参考:モバイル ファースト インデックスを開始します | Google 検索セントラル ブログ

まとめ

サイト制作でパンくずリストを設置した方が良い理由は以下の通りです。

  • ユーザービリティの向上
  • 検索エンジンのクロール促進
  • 内部SEO効果

ユーザーと検索エンジン双方にメリットがあるため、ぜひサイト運営者の方に実施していただきたい施策です。まだ設置していない場合は、ぜひ作成してみてはいかがでしょうか。なお、パンくずリストはSEO効果がありますが、SEO対策で大切なのはコンテンツの質も重要なので、併せて取り組んでください。

無料でメルマガ登録

メールマガジンに登録するだけで、WEBマーケティングのイロハや、Googleアルゴリズム速報等の最新情報がいち早く手に入ります。各種イベント情報も優先でご案内。是非ご登録ください。

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 本部長/執行役員 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
プロダクトマーケティング本部 本部長としてSEOコンサルティング事業、O2O、HR領域のセールス・カスタマーサクセス・プロダクト全体を統括。 検索プラットフォームと自社プロダクトを掛け合わせたソリューションを軸にした集客支援領域を主に担当。
CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。