パンくずリストとは?SEOへの効果や設定時の注意点を解説

breadcrumbs SEO

SEO対策は、検索エンジンからの流入数を増やすために効果的なWebマーケティングの一つで、コンテンツ発信をする企業で多くおこなわれているでしょう。

今回は、SEOに効果のある対策だといわれている「パンくずリスト」の概要、設定方法や注意点を解説します。パンくずリストを正しく理解し、SEO対策の精度を向上させましょう。

パンくずリストとは

パンくずリストとは、Webサイトの構造を視覚的にわかりやすくした表示のことです。

ユーザーがWebサイトのどこのページにいるのかが視覚的にわかるため、利便性の向上につながります。

基本的には、Webページの上部に表示されるケースが多く、階層構造で表示されることが特徴的です。

パンくずリストがもたらす3つの効果とは

パンくずリストには、主に以下3つの効果が期待できます。

  • SEOによい影響をもたらす
  • ユーザーファーストなサイト設計になる
  • 検索結果に表示される

それぞれの効果を解説しましょう。

効果1:SEOに良い影響をもたらす

パンくずリストの設置は、SEOの評価をするクローラーが情報を収集しやすくなるため、SEOに良い影響をもたらす可能性があります。

検索順位は、検索エンジンのクローラーとよばれるものが、関係するWebサイトの情報を収集し、ユーザーに有益な情報かどうかで決定します。情報の収集をクローリングと呼び、パンくずリストが設置されていることで、クローラーはWebサイトの構造を事前に把握しながら情報収集ができるでしょう。

もし、クローラーがWebサイトの構造を把握せずにクローリングを実施すると、本来評価されたくないページも対象に含まれる場合があり、SEOの評価に悪影響を与える可能性があります。パンくずリストによって構造を定義しておけば、クローラーには重要なページの情報を重点的に収集してもらえるでしょう。

効果2:ユーザーファーストなサイト設計になる

パンくずリストは、ユーザーのWebサイト上での現在地を把握できるためユーザーファーストなサイト設計になります。

Googleの検索エンジンは、評価の基準を明確にしていないものの、ユーザーファーストのコンテンツを評価すると公表しています。さらに、パンくずリストの利用も推奨していることから、Webサイトを運営するのであれば、パンくずリストの設置をしておくと効果的でしょう。

効果3:検索結果に表示される

パンくずリストは、検索エンジンの検索結果に表示されるケースがあります。

ユーザーは、事前にWebサイトの構造を認識できるため、アクセスするかどうかの判断材料になるでしょう。

さらに、パンくずリストはWebサイトの構造を表しているため、そのサイトがどのジャンルに特化しているのかも読み取れます。ユーザーは、自分にとって有益なコンテンツかを見極めたうえで、アクセスするかどうかの判断をしているため、適切なパンくずリストを設置していれば、ターゲットに向けてのアピールにつながるでしょう。

パンくずリストの3つの種類

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

  • 位置型パンくずリスト
  • パス型パンくずリスト
  • 属性型パンくずリスト

種類1:位置型パンくずリスト

位置型パンくずリストは利用される頻度が高く、以下のように入れ子構造でWebサイトの現在地を表しています。

TOP>ブログ>SEO対策>パンくずリスト

ユーザーごとに表示が変わらず、誰がWebサイトを閲覧しても同様の表示になることが大きな特徴です。パンくずリストといわれたら、基本的に位置型パンくずリストを指しているケースが多いでしょう。

種類2:パス型パンくずリスト

パス型パンくずリストは、ユーザーの閲覧した履歴を表示するリストです。具体的には、下記のように表示されます。

検索結果“玄米”>商品ページA>カテゴリ“食品”>カテゴリ“米”

ユーザーの履歴によって表示が変わるため、同じページを訪れても表示が異なります。しかし、本来の目的となる現在地を表せないため、ユーザビリティの向上につながらず、最近では使われる機会が減っています。

種類3:属性型パンくずリスト

属性型パンくずリストは、ユーザーの検索などの操作によって変化するパンくずリストです。

位置型パンくずリストがすべてのユーザーに同一の表示をする静的なリストだったことに対して、属性型パンくずリストはユーザーごとに変化する動的なリストとなります。

住まいを検索するサイトなどで、以下のようなケースが多く見受けられます。

  • ユーザーA:東京都>大田区>鉄筋コンクリート造>家賃10万円以内>アパートA
  • ユーザーB:東京都>東京駅>徒歩10分以内>アパートA

上記の例を見ると、ユーザーごとに住まいを重視するポイントが違うため、検索するときの条件が異なっています。

しかし、検索条件が違っても、最終的に検索でヒットしたアパートは同じです。このように属性型パンくずリストは、最終的なゴールが同じでもユーザーの行動次第で表示形式が異なります。

検索した条件のカテゴリに戻れるため、ユーザーに良い影響を与えられる一方で、クローラーはサイト構造を把握しにくく、SEOの評価に影響する可能性があるでしょう。

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

パンくずリストの設定は、下記の方法で実施できます。

  • WordPressのケース
  • HTMLファイルに直接編集するケース

それぞれ解説します。

方法1:WordPressのケース

WordPressで運用しているWebサイトは、プラグインの導入がおすすめです。

プラグインとは、WordPressで提供されている機能のことで、インストールによってさまざまな機能が利用できます。

パンくずリストの実装に特化したプラグインには、「Breadcrumb NavXT」があります。インストールすると画面上から簡単に設定できます。さらに、最近ではWordPressのテーマ自体にパンくずリストが含まれているケースもあるため、事前に選択しておくと導入しやすいでしょう。

方法2:HTMLファイルに直接編集するケース

パンくずリストは、HTMLファイルにタグ指定で設定が可能です。

具体的には、HTMLにパンくずリストで表示したい形式を記載し、区切り文字などを別途CSSで設定します。

【HTML】

<nav>

  <ol class=” breadcrumbs “>

    <li><a href=”index.html”>TOP</a></li>

    <li><a href=”index.html>ブログ</a></li>

    <li><a href=”index.html>SEO対策</a></li>

    <li>パンくずリストとは?SEOへの効果や設定時の注意点を解説</li>

  </ol>

</nav>

上記のままでは、下記のように並べて表示されるだけのため、ユーザーの可読性が下がってしまいます。

TOP ブログ SEO対策 パンくずリストとは?SEOへの効果や設定時の注意点を解説

したがって、CSSで下記のように区切り記号を設定しましょう。

【CSS】

. breadcrumbs li::after{

  content: ‘/’;

}

上記の設定により、各文章のあとに「/」が挿入されるため、以下のようにパンくずリストを表示できます。

TOP/ブログ/SEO対策/パンくずリストとは?SEOへの効果や設定時の注意点を解説

しかし、HTMLによるパンくずリストの作成は、静的な構造になるケースが多いため、ユーザーごとに表示が変わる属性型パンくずリストの実装が難しいでしょう。

パンくずリストの4つの注意点とは

パンくずリストには、主に以下4つの注意点があります。

  • 階層構造を深くしすぎない
  • 評価対象となるすべてのページに設置する
  • レスポンシブ対応にする
  • ページ上部に設置する

それぞれの注意点を理解し、正しい形でパンくずリストを設置しましょう。

注意点1:階層構造を深くしすぎない

パンくずリストは、階層構造を深くしすぎるとユーザーの可読性が下がってしまうため、できるだけシンプルな設計にしましょう。

階層構造は、やろうと思えばどこまでも深くできてしまいます。

例えば、今回の記事をメディアで掲載する例で考えてみましょう。以下は、深いパターンとシンプルなパターンで階層構造を表現してみました。

  • 深いパターン:TOP>コンテンツ>ブログ>技術系>Webマーケティング>SEO>パンくずリスト
  • シンプルなパターン:TOP>ブログ>SEO>パンくずリスト

深いパターンは、最終的にパンくずリストへ到達するまでに多くのカテゴリが存在しており、ユーザーが全体像を把握しにくいでしょう。

一方シンプルなパターンは、カテゴリを大きく分けたことで、現在地がどのカテゴリと紐づくのかがわかりやすいため、ユーザーファーストのパンくずリストを実現できます。

注意点2:評価対象となるすべてのページに設置する

パンくずリストは、クローラーがWebサイトの情報収集時に参考とする情報のため、SEOの評価対象となるすべてのページに設置しましょう。

Webサイトの構造がわかりやすくなっていると、クローラーは情報を収集しやすくなるため、SEOの評価向上にもつながりやすいです。

注意点3:レスポンシブ対応にする

レスポンシブとは、Webサイトを閲覧するデバイスごとに表示を変えることです。パンくずリストに関しても、レスポンシブ対応を意識する必要があります。

そもそもレスポンシブ対応は、スマートフォンが多く普及している現代で欠かせないSEO対策の一つです。パンくずリストは画面上部に表示されるため、パソコンとスマートフォンなどのデバイスでどのように表示されるかを確認し、どのデバイスからでも見やすい形に設定しましょう。

注意点4:ページ上部に設置する

Webサイトのパンくずリストはページの上部に設置すると良いでしょう。

実際にはパンくずリストを上部に設置する決まりがなく、ページ下部に設置しても問題ありません。しかし、多くのWebサイトがページの上部に設置しており、ユーザーの多くは「パンくずリストは上部に配置されているもの」と認識しているため、ユーザビリティを考えると上部に設置しておくと良いでしょう。

まとめ

今回は、パンくずリストの概要と設定方法や注意点を解説しました。

パンくずリストは、ユーザーの現在地を示すための表示であり、ユーザビリティの向上とSEOへの良い影響が期待されます。

しかし、やみくもに設置すればいいわけではなく、わかりやすい階層構造や設置場所の選定が必要です。

SEO対策に力を入れている場合は、今回の記事を参考にパンくずリストを設置し、ユーザーファーストのサイト設計に取り組んでみてください。

プロクルコンテンツ編集部

プロクルコンテンツは、130職種・2,000名の多種多様な専門家による、専門性が高く、信頼・価値のあるコンテンツ制作支援を行うプラットフォームです。経験豊富な編集者が多数在籍し、お客様のご要望に沿った質の高いコンテンツ制作をサポートいたします。

プロクルコンテンツ編集部をフォローする
SEO
プロクルコンテンツのブログ│オウンドメディア・SEO・記事制作
タイトルとURLをコピーしました