カテゴリー
Webサイト制作

「パンくずリスト」はユーザーのためかSEOのためか?正しい設置場所

Webサイトのデザインにおいて、地味ながらも極めて重要な役割を果たしているパーツがあります。「パンくずリスト(Breadcrumbs)」です。ページの上部にある「TOP > サービス紹介 > Web制作」といったリンク付きのナビゲーションのことです。

デザイナーや経営者の中には、「デザインが野暮ったくなるから消したい」「スマホでは邪魔だから非表示にしよう」と考える方もいらっしゃいます。しかし、CagraPROのシニアライターとして断言します。パンくずリストの削除は、Web戦略において「自殺行為」に等しい愚策です。

パンくずリストは、ユーザーの利便性を高める「案内板」であると同時に、検索エンジン(Google)にサイト構造を理解させる「設計図」でもあります。どちらか一方のためではなく、双方にとって不可欠なインフラなのです。今回は、パンくずリストが持つ真の価値と、BtoBサイトにおける正しい設置ルールについて解説します。

ユーザーのための「現在地」確認機能

Webサイトを訪れるユーザーの多くは、トップページから順番に入ってくるわけではありません。Google検索やSNS経由で、いきなり下層の「ブログ記事」や「サービス詳細ページ」に着地します。

デパートで迷子にさせない

いきなり特定の売り場(ページ)に放り込まれたユーザーは、「ここはどこで、どのようなサイトの一部なのか」を瞬時に把握する必要があります。この時、パンくずリストはデパートの「フロアマップ」や「天井の吊り下げ看板」の役割を果たします。「TOP > 採用情報 > 社員インタビュー」という表示があれば、ユーザーは「ああ、自分は今、採用コンテンツの中にいるのか」と構造を理解し、安心して読み進めることができます。

直帰率を下げる「回遊装置」

もし、そのページの内容がユーザーの求めているものと少し違っていた場合、どうするでしょうか。パンくずリストがなければ、ブラウザの「戻る」ボタンを押してGoogle検索画面に帰ってしまいます(=直帰・離脱)。

しかし、パンくずリストがあれば、「一つ上の階層(カテゴリ)」に戻るという選択肢が生まれます。「この記事は違ったけれど、同じカテゴリの別の記事も見てみよう」「サービス一覧に戻って他も検討しよう」という行動を促すことができるのです。つまり、パンくずリストはサイト内の回遊率を高め、機会損失を防ぐための重要なナビゲーションシステムなのです。

SEOのための「サイト構造」伝達機能

Googleの検索エンジンロボット(クローラー)は、人間のように画面のビジュアルを見てサイトを理解しているわけではありません。HTMLコードを読み取り、リンク構造を辿ることでサイトの全体像を把握します。

内部リンクの「結節点」として

SEOにおいて、パンくずリストは「最強の内部リンク施策」の一つです。下層ページから上位のカテゴリページへ向けて、適切なアンカーテキスト(リンクの文字)でリンクが張られることにより、カテゴリページ(親ページ)の重要度がGoogleに伝わります。

例えば、「TOP > サービス > BtoBマーケティング」というパンくずがあれば、「BtoBマーケティング」というページは「サービス」という親テーマに属していることが明確になり、サイト全体のテーマ性が強化されます。これにより、ビッグワード(検索ボリュームの多いキーワード)での上位表示が狙いやすくなるのです。

検索結果画面(SERPs)でのクリック率向上

適切にマークアップ(記述)されたパンくずリストは、Googleの検索結果画面にも表示されます。URL(例: [cagrapro.com/service/](https://www.google.com/search?q=https://cagrapro.com/service/)…) が表示される代わりに、「CagraPRO \> サービス \> Web制作」のようにパンくずの階層が表示されることがあります。これにより、検索ユーザーに対して「このページにはどんな情報があるか」が伝わりやすくなり、クリック率(CTR)の向上が期待できます。

もし、御社のサイトにパンくずリストがない、あるいは設置されているが機能していない(ただの文字でリンクになっていない等)場合は、早急な改善が必要です。簡単な改修で、サイトのパフォーマンスは劇的に変わります。

[ >> カグラプロへのご相談はこちら ]

正しい設置場所と種類の選び方

では、パンくずリストはどこに、どのように設置すべきでしょうか。ここには明確なセオリーが存在します。

設置場所は「ヘッダー直下・左上」一択

デザイン上の理由で、ページの下部(フッター付近)に配置しているサイトを見かけますが、これはユーザビリティの観点から推奨されません。ユーザーは「ナビゲーションはページの上部にあるもの」というメンタルモデル(無意識の思い込み)を持っています。これを「ヤコブの法則」と呼びます。

視線の動きを考慮しても、ページのタイトル(H1)よりも上、ヘッダーの直下に配置するのが鉄則です。ユーザーがページを開いた瞬間、タイトルを読む前に「自分の立ち位置」を確認できる状態がベストです。

スマホでも「消さない」のが正解

「スマホは画面が狭いから」という理由で、モバイル表示時のみパンくずリストを非表示にするケース(display: none)がありますが、これも避けるべきです。スマホユーザーこそ、画面が狭く全体像が見えにくいため、迷子になりやすい傾向にあります。

長いパンくずリストが改行されて邪魔になる場合は、横スクロールできるようにする、あるいは中間階層を「…」で省略するなど、UI(ユーザーインターフェース)上の工夫をしてでも表示させ続けるべきです。Googleもモバイルファーストインデックス(MFI)を採用しており、スマホサイトの情報を基準に評価するため、スマホ側にもパンくずコードが存在する必要があります。

「位置型」か「属性型」か「パス型」か

パンくずリストにはいくつか種類がありますが、コーポレートサイトやメディアサイトで採用すべきなのは「位置型(階層型)」です。

位置型(推奨):TOP > カテゴリ > 詳細ページ
サイトのディレクトリ構造に基づいた、普遍的な位置を示します。SEO効果が最も高い形式です。
パス型(非推奨):TOP > ページA > ページB > ページC
ユーザーが「どういう順番でページを閲覧してきたか」という履歴を示すものです。ブラウザの「戻る」ボタンと同じ機能しか持たず、サイト構造を示さないため、SEO効果は薄いです。

構造化データ(JSON-LD)での実装

最後に、技術的な要件です。パンくずリストは、単にHTMLでリンクを書くだけでは不十分です。「これはパンくずリストですよ」とGoogleに伝えるために、「構造化データ(schema.org)」を用いて記述する必要があります。

現在推奨されているのは「JSON-LD」という形式での実装です。この記述を行うことで、Googleはより正確にサイト構造を理解し、前述した検索結果画面へのリッチリザルト表示(パンくず表示)を確実なものにします。

デザインは「機能」に従う

パンくずリストは、決して「デザインのノイズ」ではありません。Webサイトという巨大な建築物を支える「梁」であり、ユーザーを導く「標識」です。

CagraPRO(カグラプロ)のWeb制作では、こうした「当たり前の機能」を、当たり前に、かつ最高品質で実装します。見た目の華やかさだけでなく、裏側の論理構造が堅牢であるからこそ、成果の出るサイトが生まれるのです。

「今のサイトの構造が複雑で、パンくずリストが正しく機能していない気がする」「SEOに強いサイト設計を見直したい」。そのような課題をお持ちでしたら、ぜひ一度お問い合わせください。御社のサイトを、Googleにもユーザーにも愛される構造へと再設計いたします。

[ >> カグラプロへのお問合せはこちら ]

著者:清宮 雄(株式会社カグラ 代表取締役) マーケティング、ブランディングおよび企業経営の領域において20年以上の実務経験を有する。国内外にてIT事業および教育事業を展開。