SEO無料相談に申し込む
まずは電話で相談する
パンくずリストは、ユーザーにWebサイト内での現在地を伝えるナビゲーションです。適切に設定すれば、サイト内を巡回しやすくなるため、ユーザビリティの向上が見込めます。
この記事では、パンくずリストとSEO対策の関係性や設置する際の注意点を解説します。内部対策に取り組んでいる方や、パンくずリストの扱いに疑問がある方はぜひ参考にしてください。
目次
パンくずリストとは
パンくずリストは、ユーザーが閲覧しているページのWebサイト内での位置を示す、リスト形式のナビゲーションです。設定すれば、ユーザーがサイトの階層構造や閲覧ページの位置を把握しやすくなり、ユーザビリティが向上します。
パンくずリストは一般的に画面の上部に、次のような形式で表示します。
|
HOME＞ブログ一覧＞ブログ記事 |
このように階層を表示することで、閲覧しているページのカテゴリーや親ページがわかりやすくなります。また、パンくずリストは3種類あり、運営しているサイトの規模やジャンルに応じて、適したものが異なります。
|
種類 |
特徴 |
|
位置型パンくずリスト |
サイトのディレクトリ構造に沿った静的なリンクで、どのページからでもサイトの位置を把握できる。大規模なメディアサイトに向いている。 |
|
属性型パンくずリスト |
商品カテゴリーや属性に基づいた動的な表示で、フィルター機能を持つ。大規模なECサイトに向いている。 |
|
パス型パンくずリスト |
ブラウザの戻る機能と同等で、サイト内での履歴を表示する。現在はほとんど使われていない。 |
それぞれの特徴を理解し、目的に合うものを設定しましょう。
名前の由来
「パンくずリスト」という名前は、童話「ヘンゼルとグレーテル」から取られています。作中で森の中に迷い込んだヘンゼルとグレーテルが、帰り道の目印としてパンくずを落としながら歩いたことが由来です。
Webサイト内の「通り道」や「現在地」の道しるべとなるため、パンくずリストと呼ばれています。英語では「breadcrumbs」と呼ばれ、直訳すると「パンくず」です。
パンくずリストを設置することによるSEO効果
パンくずリストは、下記2つの理由からSEOを意識したWebサイトには必須です。
- ユーザビリティの向上
- クローラビリティの向上
それぞれ詳しく解説していきます。
ユーザビリティの向上
ユーザビリティとは、ユーザーから見た使い勝手のしやすさのことです。自分がどのページにいるのかを正確に理解できれば、サイト内で迷子にならず、ユーザーのストレスを軽減できます。
またサイト内を移動する際も、ページの位置関係をすぐ把握できるため、目的のページに簡単にアクセスできます。同じカテゴリーの商品や記事を確認したい場合に回遊しやすくなるため、ユーザビリティの向上につながります。
とくにECサイトやオウンドメディアの場合、パンくずリストからページを移動するユーザーが多いため、必須の機能です。
クローラビリティの向上
クローラビリティとは、クローラーから見たサイトの巡回しやすさです。クローラビリティを向上させれば、Webサイトのページや情報をクローラーが見つけやすくなります。
パンくずリストがあれば、ページの階層ごとにリンクが設置されるため、クローラーがWebサイト内を回遊しやすくなるのです。また、ページ同士の親子関係も把握できるため、コンテンツの意図も正しく伝えられます。
SEO対策を行う上で、クローラビリティの向上は必須のため、パンくずリストは必ず設置しましょう。
検索結果画面の情報量が増える
構造化データを合わせて実装することで、検索結果画面でパンくずリストも合わせて表示される場合があります。ユーザーにとっては、検索画面での情報量が増えてページの内容を判別しやすくなるでしょう。
また、構造化データは検索エンジンがサイト内の情報を正確に認識させるうえでも有効です。ユーザーの検索意図に沿った表示がされやすくなるので、ぜひ設定しておきましょう。
Googleも推奨している
パンくずリストの設置は、Google側もサイト内の論理的な整理の観点から推奨しています。
参考元：Google検索セントラル「検索エンジン最適化（SEO）スターター ガイド」
また、ユーザビリティの面から、ページの階層や構造を認識しやすいURLにするとよいでしょう。たとえば以下のようなURLです。
|
正しいURLの記述 |
https://www.〇〇〇〇.com/cafe/osaka.html |
|
誤ったURLの記述 |
https://www.〇〇〇〇.com/1/aaaaa.html |
正しい方は、URLを見るだけで大阪のカフェ情報を示しているのが判別できます。一方で、誤った記述では現在のページが何のカテゴリを示すのか伝わりません。
ユーザーが使いやすくなるため、シンプルかつ分かりやすいURLを設定しましょう。
パンくずリストの種類
パンくずリストには、大きく分けると以下の3種類があります。
- 位置型：階層構造を示す
- 属性型：性質や特徴を示す
- パス型：閲覧履歴を示す
もっとも利用されるのは「位置型」です。用途に合わせて選択しましょう。
意図がなければ、位置型のパンくずリストを設定するのがおすすめです。
位置型：階層構造を示す
位置型のパンくずリストは、以下のような記述となります。
|
TOP＞ダイエット＞食事制限＞レシピ＞〇〇の作り方（記事名） |
階層構造を示し、現在閲覧しているWebページがサイト内のどの位置にあるのか分かりやすいのが利点です。
上記の例では、ユーザーはパンくずリストから「レシピ」など上位のカテゴリに戻って別のぺージを閲覧可能です。階層構造が深いサイトではとくに有効で、ユーザーはサイト内を回遊しやすくなります。
属性型：性質や特徴を示す
属性型のパンくずリストは、以下のような記述となります。
|
例1：TOP＞メンズ＞アウター＞Mサイズ＞商品A 例2：TOP＞ダウンジャケット＞黒色＞商品A |
属性型は、検索フィルターのように性質や特徴を示すものです。大量のコンテンツ数を抱えるWebメディアやECサイト、物件情報サイトなどに有効です。
上記の例では、サイト内で別々のルートを通って同一の商品にたどり着きます。ECサイトなど、ユーザーは1つ前のカテゴリに戻って別の商品を探しやすくなるでしょう。
パス型：閲覧履歴を示す
パス型のパンくずリストは、以下のような記述となります。
|
TOP＞ダウンジャケット＞商品A＞コート＞商品B＞商品C |
パス型はユーザーの閲覧履歴を示すものです。ユーザーがサイト内で通ってきた道のりを表示します。
ブラウザの戻るボタンと機能が重複するため、近年ではあまり見られなくなった手法です。
パンくずリストを設置する方法
Webサイトやページ内にパンくずリストを設置するには、以下のような方法があります。
- 対応したWordPressテーマを選ぶ
- プラグインを使う
- HTMLで記述を追加する
設置のやり方が分からない方は参考にしてください。
対応したWordPressテーマを選ぶ
WordPressを利用するなら、初めからパンくずリストの機能がついたテーマを選ぶとよいでしょう。ワンボタンで設置できるなど操作が簡単なため、とくにhtmlの知識がなくてもパンくずリストを設置できます。
また、パンくずリストの機能がついたテーマであれば、他にもユーザビリティやSEOに関連する機能が提供されているはずです。テーマを選ぶ際に、どのような機能がついているかを確認しましょう。
プラグインを使う
WordPressにパンくずリストの機能がなければ、プラグインを導入します。
ただし、細かな見た目の調整や設定のためには、ある程度HTMLの知識が必要です。
HTMLで記述を追加する
WordPressを使わない場合、HTMLで記述すれば設置できます。自由なカスタマイズがしやすいため、設置位置などにこだわりがある場合にも向いています。
しかし、HTMLやCSSに関する専門的な知識が必要な点は注意しましょう
パンくずリストを設置する場所
パンくずリストはできるだけユーザーの目に入る場所に設置してください。設置場所はページ上部が一般的です。
ユーザーはページを開いたとき、ただちに現在地を把握できます。ファーストビューで目立たせたくない場合は、ページの下部に設置してもよいです。
いずれの場合も、ユーザーの視認性には気を配ってください。フォントをメインコンテンツよりも小さくしたり、ページタイトルを表示しないようにしたりなどの工夫をしましょう。
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に良い影響があります。しかし、設置方法を誤れば効果が発揮されないこともあるため、下記9つのポイントを押さえましょう。
- わかりやすい階層構造にする
- ページ上部に設置する
- すべてのページに設置する
- スマホでも見やすく調整する
- SEOキーワードを含める
- 関連性のあるリストを作成する
- シンプルなデザインにする
- 現在いる階層はテキストのみでリンクしない
- 構造化データも実装する
それぞれ詳しく解説していきます。
わかりやすい階層構造にする
パンくずリストに表示される階層構造は、ユーザーが直感的に理解できる設計が大切です。関連性のあるカテゴリーが親子関係で並ぶように意識しましょう。また、深い階層に分類されたページは、より詳細なカテゴリー名の表示が重要です。
どのページからでも現在地がわかりやすいパンくずリストを作れば、ユーザビリティの向上が図れます。
ページ上部に設置する
パンくずリストの設置場所に決まりはありませんが、ページ上部への設置をおすすめします。多くのサイトで上部に表示されているため、「パンくずリストは上の方にあるもの」とユーザーが認識している可能性が高いからです。
デザインの兼ね合いなど、下部に設置したい理由がなければ、できるだけ上部に設置しましょう。
すべてのページに設置する
パンくずリストをすべてのページに設置すれば、サイト全体の階層構造が把握しやすくなります。また、ユーザーがどのページからでもサイト内をスムーズに移動し、必要な情報に簡単にアクセスできます。
しかし、パンくずリストが離脱の原因になる場合があることも覚えておきましょう。コンバージョンが目的のページなどには、あえて設定しないこともあります。
スマホでも見やすく調整する
スマホでの表示も必ずチェックしましょう。フォントサイズをPCと同じままにしていると、デザインが崩れる原因になります。スマホの小さな画面では、パンくずリストが邪魔になることもあるため、下記のような工夫が大切です。
- フォントサイズを小さくする
- 改行を無くし、はみ出た部分は横にスクロールするようにする
- 画面下部に表示されるようする
そのままにしておくと、複数に改行されたパンくずリストが画面を埋め尽くしてしまうこともあり、離脱につながります。見やすいデザインになるよう、スマホ用に調整しましょう。
SEOキーワードを含める
パンくずリストのカテゴリーに、上位表示を狙っているキーワードを含めると、関連したページがあることをクローラーに伝えられます。
クローラーが認識しやすい階層構造は、SEO対策に必須であるため、カテゴリーの作成段階から意識し、必ず行いましょう。
関連性のあるリストを作成する
カテゴリーの構成は、関連性が分かりやすいことが重要です。
|
正しい例 |
TOP＞PC＞周辺機器＞マウス＞1万円以下 |
|
誤った例 |
TOP＞1万円以下＞PC＞周辺機器＞マウス |
上記の誤った例では、ユーザーが別の価格帯のマウスを探す際に不便です。ユーザービリティの観点から、カテゴリーとページの関連性を意識して作成しましょう。
シンプルなデザインにする
パンくずリストのデザインは、メインコンテンツを邪魔しない程度に抑えてください。フォントが大きすぎたり、過度な装飾を行ったりするのは注意が必要です。
パンくずリストはあくまでもユーザーの利便性向上が目的であり、コンテンツの内容が最優先です。
現在いる階層はテキストのみでリンクしない
現在地のページにはリンクを設定する必要はありません。ユーザーやクローラーの混乱を招くおそれがあり、かえって利便性を損ないます。
現在地を太字で表示するか、ページのタイトルが長く見づらい場合は非表示も検討しましょう。
構造化データも実装する
構造化データは、検索エンジンにページの内容を正しく伝えやすくなります。検索結果に直接影響を与えるため、パンくずリストを設置する際は構造化データを適用しましょう。
まとめ：パンくずリストを設定してサイトの回遊性を向上させよう
パンくずリストを設置すれば、ユーザビリティとクローラビリティが向上します。どちらもSEO対策において意識すべき重要なポイントなので、必ず設置しましょう。
しかし、パンくずリストは構造化マークアップを行わないと、検索エンジンが認識してくれません。構造化の方法や設定の注意点をよく理解した上で、SEO対策に活かしましょう。
SEO対策を外注する際の注意点について知りたい方は、以下の記事をご覧ください。
SEO対策を外注する前に、注意すべきポイントや外注先の選び方について詳しく解説しています。
外注先を探している、既にSEO対策を外注しているが効果が出ないとお悩みの方必見です。
SEO対策を外注しようとお考えの方はこちら＞＞＞【失敗しない】SEO対策を外注へ依頼する前にぜひ知ってほしい内容を徹底解説
SEO対策を外注する場合の費用相場について知りたい方はこちら＞＞＞SEO対策を代行業者へ依頼する場合の料金の相場は？
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。
SEO対策にお悩みの方は、お気軽にご相談ください。
