新しいサイトの立ち上げや、SEOに取り組む際に「パンくずリスト」の設置について悩むことがないでしょうか？
パンくずリストは、サイトに訪れるユーザー向けに設置された、現在サイトのどこにいるかを示すナビゲーションの一種です。視覚的にわかりやすいため、ユーザー向け、サイトのUI/UXとして設置されているように思われがちですが、実はSEOにおいて初期に対策すべき重要なナビゲーションです。
本記事ではパンくずリストの概要と詳細、有効な設置方法まで、SEOに役立つパンくずリストの知識を解説します。
無料ウェビナーのご案内
こんなお悩みを持つ企業様におすすめ
- キーワード選定の判断基準が分からず困っている担当者様
- コンテンツを制作しているがなかなか検索順位が上がらず困っている担当者様
- セッションはあるが成果につながらず困っている担当者様
日時
1回目（ライブ配信）：2024年06月27日（木）13時～14時
2回目（録画配信）：2024年06月28日（金）13時～14時
残念ながらSEOで成果が出ない会社は少なくありません
現在のSEO環境では、「ドメインが強ければ上がる」「記事を大量に作成すれば上がる」というわけではありません。年々SEO対策の難易度は上がっており、成果を出すことが難しくなってきております。
また、SEO対策でセッションを増やすことができたとしても、CVしないといったお悩みを抱えている企業様も少なくありません。本当の意味でSEO対策を成功させている企業は少ないですし、悩みを抱えている担当者は少なくありません。
このようなお悩みを抱えている方を対象に、デジタリフトではSEOの専門家が1時間のコンサルティングを無料で実施させていただきます。
もし、サイトが伸び悩んでいると感じている方は、まずは身近なアドバイザーとしてご活用ください。
パンくずリストとは？
パンくずリストとは、現在表示しているページがサイト内のどこにあるのかを示すナビゲーションです。
日々、さまざまなサイトを閲覧していて、下記のような表示を見かけることは多いはずです。
ホーム > 家電 > イヤホン・ヘッドホン > ワイヤレスイヤホン・Bluetoothイヤホン
ひと目でサイトのどの階層にいるのかがわかるような表示になっています。現在いるページ、階層までの経路を示し、リンク付きで表示しているので、パンくずリストをたどって上の階層に戻ることもできます。
ユーザーはさまざまなキーワードで検索し、サイトに訪問するのでランディングがTOPページになるとは限りません。ユーザーの利便性を考えると、TOPを除くすべてのページにパンくずリストが設置されているべきです。
パンくずリスト設置のメリット：SEO効果あり
パンくずリスト設置のメリットですが、SEOで間接的ですが有利になります。
ただし、ランキング目的で設置するパンくずリストはアンカーテキストが不自然、階層構造がおかしいなど、逆にSEO評価を下げるものになってしまいます。あまり意識しすぎず、ユーザーにとって有益であるかどうかを考えて設計、設置しましょう。
少なくとも、現在設置されていない、または設置されていても作りが不十分な場合は正しく設置を行えば効果の向上は見込めるでしょう。
ユーザーがサイトを使いやすくなる
最もわかりやすいパンくずリスト設置のメリットはユーザーの利便性が向上することです。
前述の通り、ユーザーはさまざまなキーワードで検索し、いずれかのページに訪れます。現在閲覧しているページがどのようなカテゴリーに属しているかなどから、大まかなサイトコンテンツの中身を確認できます。これはランディングしたページから別のページへの遷移する場合に手助けになります。
もちろん、他のページへ回遊していく手助けはパンくずリストだけではないので、パンくずリストも含めてグローバルナビやフッターリンク、サイドメニューなどをうまく活用してわかりやすいサイトの作りにしなければなりません。
クロール効率が上がる
パンくずリストの設置は、ユーザーだけではなく、検索エンジンのクローラーに対しても有効です。内部リンクが増えることによって、クロール効率の向上が期待できます。
クローラーは内部リンクをたどってサイト内を巡回するので、パンくずリストの内部リンクも例外ではありません。また、ユーザーは現在表示しているページがどんなカテゴリーに属しているかをパンくずリストから伺うことができますが、これはクローラーにおいても同様です。正しくカテゴリー分けを行えば、クローラのサイト理解を助けることにもなります。
クローラーがサイト構造の把握に使う以上、ディレクトリの構造≒パンくずリストの構造が複雑になると、クローラビリティやサイト（カテゴリー）のテーマ理解の効果はかえって薄れてしまいます。パンくずリストからは少し外れますが、サイトの構造は極力シンプルに、ユーザーにもクローラーにもわかりやすいものを心がけましょう。
内部リンクの効果はここで解説すると長くなってしまうので、下記の記事を参考にしてください。
検索結果画面の情報量が増える
上述の2つのメリットほど大きいメリットではありませんが、後述する構造化データを併用すると、パンくずリストを検索結果画面上に表示できる可能性があります。
影響は限定的ですが、検索結果上からもサイトの構造を情報として得られます。しかし、クリック率が上がるとか、検索結果画面での表示領域を広くする、などの効果はパンくずリストの設置では逆に得にくいです。
SEOには勝ち筋があることをご存知ですか？
SEOでは、すぐに成果が出る魔法のような施策は存在しません。
SEO対策で成果を出すためには、自社メディアの現状を把握し、正しい方向性で正しい施策を実行し続ける必要があります。SEO対策で成果を出せない原因の多くは、正しい方向性で施策を回せていないことが挙げられます。
そこで、デジタリフトでは、貴社サイトの現状を分析し、正しい方向性を示す1時間のコンサルティングを無料で実施させていただいております。
もし、サイトの運用で伸び悩んでいると感じている方は、まずは身近なアドバイザーとしてご活用ください。
パンくずリストの種類
パンくずリストには3つの種類があります。それぞれ、種類別に詳細を解説します。
階層ベースのパンくずリスト
「パンくずリスト」と聞いて多くの人がまず連想する、最も普及しているパンくずリストです。ユーザーが閲覧しているページがサイト内のどの階層になるかを示すパンくずリストで、下記のような形で示されます。
TOP > コラム > SEO > 記事タイトル
階層ベースの場合は現在地が変わらなければパンくずリストの中身も変わることはありません。仮に階層が深く、コンテンツが大量にある大型なサイトなどでも、ユーザーはサイト内での現在地と、そこまでの経路を把握しやすいです。
サイトの形態にもよりますが、基本的には階層ベースのパンくずリストを選んで問題ありません。
カテゴリーベースのパンくずリスト
主に目的地までの経路が複数存在する、ECサイトなどで使用されるパンくずリストです。ユーザーが通ってきた経路によって、リストの内容が変化します。
例えば、アパレルのECサイトを例に上げると、TシャツAのページにたどり着く経路は複数あり、ユーザーがたどってきたページによって、目的地が同じでもパンくずリストが変化します。
TOP > アパレル一覧 > Tシャツ一覧 > TシャツA
TOP > ブランド一覧 > ブランドAの商品一覧 ＞ TシャツA
上記のような形です。どちらも同じページが現在地ですが、その経路とパンくずリストは異なります。ECサイト以外にも、不動産の検索サイトなど、サイト内で検索行動が伴うようなサイトに多い形です。
パスベースのパンくずリスト
ユーザーが今までに通った経路、履歴が表示されるタイプのパンくずリストです。当然ですが、ユーザーによってページにたどり着くケースがバラバラなので、ユーザーによって表示されるリストが変化します。閲覧履歴だと考えるとわかりやすいです。
現在地とサイト構造との関係を示すものではないので、本来のパンくずリストの目的や効果からは外れます。また、ブラウザの「戻る」ボタンと効果としては大差ないので、あまり使われることはありません。近年ではほぼ見かけることもなく、知識として紹介はしますが、基本的には使用しなくて大丈夫です。
パンくずリストの設置方法
主にWordPressを使用している場合と、WordPress以外での設置方法です。それぞれの設置方法を解説します。
プラグインを使用する
WordPressを使用している場合は、テーマによっては最初からパンくずリストの機能がついているものもありますが、そうでなければプラグインでの導入が手軽です。パンくずリストを追加するプラグインはたくさんあるので、自身のサイトや用途にあったプラグインを探してみましょう。
SEO系のプラグインを何も入れてない場合は、YoastSEOがおすすめです。パンくずリストだけではなく、他にもSEOを運用するのに役立つ機能がついています。一部制御が難しい機能があるので、WordPress中級者以上向けです。
参考リンク：https://ja.wordpress.org/plugins/wordpress-seo/
単純にパンくずリストの機能だけがほしいのであれば、Breadcrumb NavXTがおすすめです。こちらはパンくずリストを追加するだけのシンプルなプラグインで、実装方法も外観>ウィジェットから表示したいブロックにドラッグするだけで簡単に設置できます。
参考リンク：https://ja.wordpress.org/plugins/breadcrumb-navxt/
プラグインは数が多いですし、既存のプラグインとの干渉も考えなければならないので、導入の際にはエンジニアとよく相談して実装してください。
HTMLで記述を追加する
文章で表現するのは難しいですが、navタグを使用して、子要素にolタグを使用、現在のページより上の階層に対してliタグを使用してリスト化、aタグを使用してアンカーテキストを設置します。
サンプルは下記のような形です。
<nav>
<ol>
<li></a href=”https://〇〇.jp”>TOP</a></li>
<li></a href=”https://〇〇.jp/”>コラム</a>/li>
<li></a href=”https://〇〇.jp/”>SEO</a>/li>
<li><span>現在のページ</span></li>
<ol>
</nav>
後述しますが、現在閲覧しているページはリンクしません。
装飾などもつくので本来はcssも必要になりますが、基礎的な書き方として紹介しておきます。
闇雲にSEO対策を実施しても成果が出るとは限りません
調べたSEO施策を一から全て試しても成果が出るとは限りません。
SEO対策で成果を出すためには、自社メディアの現状を把握し、正しい方向性で正しい施策を実行し続ける必要があります。SEO対策で成果を出せない原因の多くは、正しい方向性で施策を回せていないことが挙げられます。
そこで、デジタリフトでは、貴社サイトの現状を分析し、正しい方向性を示す1時間のコンサルティングを無料で実施させていただいております。
もし、サイトの運用で伸び悩んでいると感じている方は、まずは身近なアドバイザーとしてご活用ください。
パンくずリストの設置場所
パンくずリストの設置場所によるSEOへの影響は特にないので、設置場所はどこでも構いません。多くの場合はページの上部、メインメニューの下か、またはページの下部、フッターの上辺りに設置している場合が多いです。
ユーザーが見慣れているものが見慣れている場所にないとUXを損ねる可能性があるので、極力ページの上部に設置を検討し、デザインなどの問題で実装が難しい場合はページ下部を選択すると良いでしょう。これは多くのサイトで導入されている設置場所を選んだほうが多くのユーザーにとっては馴染みがあるからです。
パンくずリストの書き方と注意点
最後に、パンくずリストの書き方と注意点を解説します。何も考えずに設置すると逆効果になる場合もあるので、しっかり作成して設置しましょう。
ディレクトリ構造はわかりやすくする
これはパンくずリストに限った話ではないですが、サイトのディレクトリ構造はわかりやすくしましょう。階層が深すぎる、ページ、コンテンツのカテゴリー分けが不十分でディレクトリ構造が煩雑、といった状況になると、クローラーはサイト内のページをクロールしにくくなります。
ディレクトリ構造が複雑だと、パンくずリストも複雑になったり、情報量が足りなくなったりして、ユーザーのサイト回遊を補助できませんし、クローラーも迷ってしまいます。こうなるとパンくずリスト本来の目的を果たさなくなってしまうので、設置の意味がありません。
場合によってはディレクトリ構造の整理から先に始める方が良いかもしれません。
なるべくキーワードを含める
これもパンくずリストに限った話ではありませんが、パンくずリストは内部リンクになるので、アンカーテキストにはなるべくキーワードを含めてください。ここが不明瞭になると、ユーザーもクローラーも現在地のページがどんなカテゴリーに属しているコンテンツなのかわからなくなる場合があります。
本来カテゴリー分けやタイトル、見出しの付け方にひもづく内容なのですが、ここから意識してキーワードを組み込むようにしましょう。
TOPを除いて全ページに設置する
パンくずリストは原則全ページに設置してください。階層を移動していないTOPのみ設置は必要ありません。
前述のとおり、ユーザーはさまざまなキーワードで検索し、サイト内のあらゆるページへランディングします。パンくずリストの設置されていないカテゴリーなどが発生すると、効果が局所的にしか発揮できません。
特別な理由がない限りはすべてのページに設置しましょう。
シンプルなデザインにして目立たせすぎない
ページに訪れるユーザーの大半の目的はコンテンツを閲覧することです。コンテンツの閲覧を阻害してしまうようなパンくずリストのデザインは避けましょう。例として、パンくずリストのブロックが大きすぎる、華美な装飾がついていて目を引きすぎてしまうなどです。
あくまでページの主役はメインコンテンツです。パンくずリストはユーザーの回遊を助ける補助コンテンツになるので、本来の役割に沿ったデザインにするべきです。
スマホ表示の際はデザインを考える
PCでは表示領域が広いので、あまり表示の方式を考える必要はありません。しかしSP（スマホ）の場合は表示領域が狭いので、表示の方式やデザインを考える必要があります。
SPでは横幅が狭いので、何も考えずに設置すると表示領域をはみ出してしまいます。また、改行して表示する方式でも、記事コンテンツなどのタイトルが長いページなどの場合はメインコンテンツエリアを狭くしてしまう可能性があります。
いくつか回避策はありますが、パンくずリストの表示ブロックを横スクロールできるようにしてしまうのも1つの手です。極力機能を損なわずにメインコンテンツの表示エリアも確保できます。
現在いる階層はテキストのみでリンクしない
現在地にあたるページは、パンくずリストではリンクにしないでおきましょう。クリックしても別のページに遷移しないので、ユーザーもクローラーも混乱する可能性があります。
かえって混乱を招く設置になってしまうと、パンくずリスト本来の役割が果たせません。一番右が現在地になるのはユーザーもわかっているはずですが、現在地のみ太字にしておくなど、簡単な装飾をつけるのも良いでしょう。
構造化データも合わせて実装する
前述のとおり、構造化データを実装すると検索結果にパンくずリストを表示できる可能性があります。せっかく設置するのであれば、構造化データも合わせて実装しておきましょう。
コードの記述方法についてはGoogle公式のヘルプがあるので、該当のページを確認してください。
参考リンク：パンくずリスト（BreadcrumbList）のマークアップを追加する方法
また、WordPressの場合は本記事で紹介したプラグインに構造化データの自動生成機能がついています。導入できるのであればこちらで問題ありません。
▼YoastSEO
https://ja.wordpress.org/plugins/wordpress-seo/
▼Breadcrumb NavXT
https://ja.wordpress.org/plugins/breadcrumb-navxt/
まとめ
パンくずリストは、ユーザーがサイト内で迷うのを助け、サイトの構造を視覚的に伝えられる内部リンクです。内部リンクになりますし、ユーザービリティの向上と合わせて、SEO効果も期待できます。
内部対策としては分析も実装も比較的簡単な部類になるので、もし現在未実装、または実装されていても最適化されていないなら、ぜひ本記事を参考に実装や最適化を図ってみてください。
圏外のキーワードが突然上位表示するような強力な効果にはなりませんが、個人の体感では、微量とはいえ全般的に順位が改善することもあります。
自社サイトの課題と対策を明確にしませんか？
デジタリフトでは、「自社サイトの課題と対策を特定する」ワークショップを実施しております。ワークショップを実施することで、「なぜ成果が出ないのか」「これから何をすればいいのか」が明確になるので、今後のサイト運用に大いに役立てることができます。まずは、現状のお悩みからお聞かせください！
■対象の方
- これからSEO対策を始めたいけど何から始めればいいのかがわからない、、、
- 現状SEO対策に取り組んでいるが、検索順位が上がらず、原因と対策方法がわからない、、、
- SEO対策で集客できるようになったが、コンバージョンしない、、、
■アウトプット例
■お申し込みフォーム
