パンくずリストは、ユーザーにWebサイト内での現在地を伝えるナビゲーションです。適切に設定すれば、サイト内を巡回しやすくなるため、ユーザビリティの向上が見込めます。
この記事では、パンくずリストとSEO対策の関係性や設置する際の注意点を解説します。内部対策に取り組んでいる方や、パンくずリストの扱いに疑問がある方はぜひ参考にしてください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
パンくずリストとは
パンくずリストは、ユーザーが閲覧しているページのWebサイト内での位置を示す、リスト形式のナビゲーションです。設定すれば、ユーザーがサイトの階層構造や閲覧ページの位置を把握しやすくなり、ユーザビリティが向上します。
パンくずリストは一般的に画面の上部に、次のような形式で表示します。
| HOME＞ブログ一覧＞ブログ記事 |
このように階層を表示することで、閲覧しているページのカテゴリーや親ページがわかりやすくなります。また、パンくずリストは3種類あり、運営しているサイトの規模やジャンルに応じて、適したものが異なります。
| 種類 | 特徴 |
|---|---|
| 位置型パンくずリスト | サイトのディレクトリ構造に沿った静的なリンクで、どのページからでもサイトの位置を把握できる。大規模なメディアサイトに向いている。 |
| 属性型パンくずリスト | 商品カテゴリーや属性に基づいた動的な表示で、フィルター機能を持つ。大規模なECサイトに向いている。 |
| パス型パンくずリスト | ブラウザの戻る機能と同等で、サイト内での履歴を表示する。現在はほとんど使われていない。 |
それぞれの特徴を理解し、目的に合うものを設定しましょう。
パンくずリストが必要な理由
パンくずリストは、下記2つの理由からSEOを意識したWebサイトには必須です。
- ユーザビリティの向上
- クローラビリティの向上
それぞれ詳しく解説していきます。
ユーザビリティの向上
ユーザビリティとは、ユーザーから見た使い勝手のしやすさのことです。自分がどのページにいるのかを正確に理解できれば、サイト内で迷子にならず、ユーザーのストレスを軽減できます。
またサイト内を移動する際も、ページの位置関係をすぐ把握できるため、目的のページに簡単にアクセスできます。同じカテゴリーの商品や記事を確認したい場合に回遊しやすくなるため、ユーザビリティの向上につながります。
特にECサイトやオウンドメディアの場合、パンくずリストからページを移動するユーザーが多いため、必須の機能です。
クローラビリティの向上
クローラビリティとは、クローラーから見たサイトの巡回しやすさです。クローラビリティを向上させれば、Webサイトのページや情報をクローラーが見つけやすくなります。
パンくずリストがあれば、ページの階層ごとにリンクが設置されるため、クローラーがWebサイト内を回遊しやすくなるのです。また、ページ同士の親子関係も把握できるため、コンテンツの意図も正しく伝えられます。
SEO対策を行う上で、クローラビリティの向上は必須のため、パンくずリストは必ず設置しましょう。
SEO対策を意識したパンくずリストの設定には構造化が必須
パンくずリストを検索エンジンに認識させるためには、構造化が必要です。構造化とは、Webページの内容を検索エンジンによりわかりやすく伝えるためのデータを、HTML内に記述することです。
設置するデータを構造化データ、設定作業のことを構造化マークアップと呼びます。HTMLの記述だけでは、パンくずリストがただのリンクとして認識されてしまいます。そのため、構造化マークアップを行ってパンくずリストの存在を検索エンジンに伝える必要があるのです。
構造化データには、情報の種類を定義する2つの規格があり、Googleがサポートしているのは「schema.org」です。「data-vocabulary.org」を使用しているサイトはサポートされていないため、使用しないようにしましょう。
また、構造化マークアップには3つの方法がありますが、以下の2つがよく利用されます。
- JSON-LD
- microdata
それぞれ詳しく解説していきます。
JSON-LD形式
JSON-LDは、HTMLに記述したパンくずリストのリンクとは別に、以下のようなコードを記述します。
| <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/category/” }, { “@type”: “ListItem”, “position”: 3, “name”: “サブカテゴリー”, “item”: “https://example.com/category/subcategory/” }, { “@type”: “ListItem”, “position”: 4, “name”: “商品名”, “item”: “https://example.com/category/subcategory/product” } ] } </script> |
上記は、TOPページから商品詳細ページへのパンくずリストを設定した際の例です。各項目の意味を以下の表にまとめました。
| プロパティ名 | 説明 |
| @context | 使用する構造化データのバージョンを示すURL。”https://schema.org”を指定。 |
| @type | データの種類を示すプロパティ。”BreadcrumbList”（パンくずリスト）を指定。 |
| itemListElement | パンくずリストの各要素を含む配列。 |
| ListItem | パンくずリストの各要素を示すオブジェクト。 |
| position | リスト内での項目の位置を示す整数。1から始まる。 |
| name | 項目名を示す文字列。 |
| item | 項目が指すURLの文字列。 |
JSON-LDでの構造化は、HTMLとの記述が別れるためコードが複雑にならず、管理と実装が容易であることからGoogleが推奨しています。
しかし、HTML側でパンくずリストの仕様に変更を加えた場合に修正漏れが起きやすいデメリットもあるため、注意しましょう。
microdata形式
microdataは、以下のようにパンくずリストであることを示す属性を追記します。
| <div itemscope itemtype=”http://schema.org/BreadcrumbList”> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <a itemprop=”item” href=”https://example.com/”> <span itemprop=”name”>ホーム</span> </a> <meta itemprop=”position” content=”1″ /> </span> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <a itemprop=”item” href=”https://example.com/category/”> <span itemprop=”name”>カテゴリー</span> </a> <meta itemprop=”position” content=”2″ /> </span> <span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”> <a itemprop=”item” href=”https://example.com/category/product/”> <span itemprop=”name”>カテゴリー</span> </a> <meta itemprop=”position” content=”3″ /> </span> </div> |
上記は、TOPページから個別の商品ページへのパンくずリストを構造化した例です。HTMLに直接記述するため、コードが長く煩雑になりやすく、修正や管理も大変です。
microdata形式はGoogleもサポートしていますが、基本的には推奨されているJSON-LDでのマークアップをおすすめします。
SEO対策でパンくずリストを設置する際の注意点
パンくずリストを設置すれば、ユーザビリティやクローラビリティの向上が図れ、SEOに良い影響があります。しかし、設置方法を誤れば効果が発揮されないこともあるため、下記5つのポイントを押さえましょう。
- わかりやすい階層構造にする
- ページ上部に設置する
- 全てのページに設置する
- スマホでも見やすく調整する
- SEOキーワードを含める
それぞれ詳しく解説していきます。
わかりやすい階層構造にする
パンくずリストに表示される階層構造は、ユーザーが直感的に理解できる設計が大切です。関連性のあるカテゴリーが親子関係で並ぶように意識しましょう。また、深い階層に分類されたページは、より詳細なカテゴリー名の表示が重要です。
どのページからでも現在地がわかりやすいパンくずリストを作れば、ユーザビリティの向上が図れます。
ページ上部に設置する
パンくずリストの設置場所に決まりはありませんが、ページ上部への設置をおすすめします。多くのサイトで上部に表示されているため、「パンくずリストは上の方にあるもの」とユーザーが認識している可能性が高いからです。
デザインの兼ね合いなど、下部に設置したい理由がなければ、できるだけ上部に設置しましょう。
全てのページに設置する
パンくずリストをすべてのページに設置すれば、サイト全体の階層構造が把握しやすくなります。また、ユーザーがどのページからでもサイト内をスムーズに移動し、必要な情報に簡単にアクセスできます。
しかし、パンくずリストが離脱の原因になる場合があることも覚えておきましょう。コンバージョンが目的のページなどには、あえて設定しないこともあります。
スマホでも見やすく調整する
スマホでの表示も必ずチェックしましょう。フォントサイズをPCと同じままにしていると、デザインが崩れる原因になります。スマホの小さな画面では、パンくずリストが邪魔になることもあるため、下記のような工夫が大切です。
- フォントサイズを小さくする
- 改行を無くし、はみ出た部分は横にスクロールするようにする
- 画面下部に表示されるようする
そのままにしておくと、複数に改行されたパンくずリストが画面を埋め尽くしてしまうこともあり、離脱につながります。見やすいデザインになるよう、スマホ用に調整しましょう。
SEOキーワードを含める
パンくずリストのカテゴリーに、上位表示を狙っているキーワードを含めると、関連したページがあることをクローラーに伝えられます。
クローラーが認識しやすい階層構造は、SEO対策に必須であるため、カテゴリーの作成段階から意識し、必ず行いましょう。
まとめ：パンくずリストを設定してサイトの回遊性を向上させよう
パンくずリストを設置すれば、ユーザビリティとクローラビリティが向上します。どちらもSEO対策において意識すべき重要なポイントなので、必ず設置しましょう。
しかし、パンくずリストは構造化マークアップを行わないと、検索エンジンが認識してくれません。構造化の方法や設定の注意点をよく理解した上で、SEO対策に活かしましょう。
SEO対策を外注する際の注意点について知りたい方は、以下の記事をご覧ください。
SEO対策を外注する前に、注意すべきポイントや外注先の選び方について詳しく解説しています。
外注先を探している、既にSEO対策を外注しているが効果が出ないとお悩みの方必見です。
SEO対策を外注しようとお考えの方はこちら＞＞＞【失敗しない】SEO対策を外注へ依頼する前にぜひ知ってほしい内容を徹底解説
SEO対策を外注する場合の費用相場について知りたい方はこちら＞＞＞SEO対策を代行業者へ依頼する場合の料金の相場は？
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。
SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore SEOコンサルタントチーム 責任者
新卒で入社しSEOの営業を年間300社以上行う。4年目でSEOコンサルチームに異動し、個人として約10社以上のコンサルをしている。マネジメントもしており、チームでは合計100サイト以上のSEOに関与。オールジャンル対応できるが、特に得意なのは歯科業界。SEOの先にある売上向上に目を向けて施策を行っている。
