パンくずリストでSEOとUX改善：設置方法と構造化データの実装ポイント

最近よく聞かれる、パンくずリストの話

最近、クライアントのサイトを見ていて「あ、これ惜しいな…」って思うのが、パンくずリスト。みんな結構設置はしてるんですよね。でも、ただ置いてあるだけ、みたいなケースがすごく多い。たぶん、多くの人が「ユーザーが今どこにいるか分かるようにするやつでしょ？」くらいの認識なんだと思う。もちろん、それも正解。でも、半分だけ。

正直、パンくずリストって、SEOの世界ではもう何年も前から「やって当たり前」の施策の一つじゃないですか。だから今さら感もあるんだけど、Googleの評価のされ方がどんどん賢くなる中で、この「当たり前」の施策の本当の意味が、逆に重要になってきてる気がするんですよね。

これは単なる道しるべじゃなくて、Googleに対して「僕のサイトはこういう設計図になってるんですよ」って教えてあげる、いわばプレゼン資料みたいなものなんです。これをちゃんと作っておかないと、Google先生はあなたのサイトを正しく理解してくれないかもしれない。それって、すごく損だと思いません？

で、結論から言うと何が「本当に」重要なのか

先に結論めいたことを言ってしまうと、大事なのは2つ。1つは「サイトの骨格となる階層構造を、パンくずリストで正確に表現すること」。そしてもう1つは、「その構造を、構造化データを使って検索エンジンに『伝わる言葉』で教えてあげること」です。

これをやると、検索結果でURLが表示される代わりに、サイトの階層が直接表示されることがあるんです。いわゆる「リッチリザルト」ってやつですね。 これ、ユーザーから見ても分かりやすいし、クリック率が上がるっていうデータもちらほら見かけます。 どっちがクリックしたくなるか、一目瞭然ですよね。

つまり、パンくずリストは、単なるUX改善パーツじゃなくて、Googleと対話するための重要なSEOツールだってことです。クローラビリティが向上するとか、内部リンクが増えるとか、そういう話ももちろんあるけど、本質は「サイト構造の伝達」にあると僕は考えています。

どのパンくずを選ぶ？3種類あるけど、実質2択の話

パンくずリストには、大きく分けて3つの種類があるって言われてます。「位置型」「属性型」「パス型」の3つ。

• 位置型パンくず: サイトの階層構造に基づいて、現在地を示す一番ベーシックなやつ。「ホーム > カテゴリ > 記事ページ」みたいな。
• 属性型パンくず: ECサイトとかでよく見る、ユーザーが選んだ絞り込み条件（属性）を示すやつ。「ホーム > シューズ > メンズ > 27cm」みたいな感じ。
• パス型パンくず: ユーザーが実際に辿ってきたページの履歴を示すやつ。「戻る」ボタンに近い。

まあ、色々言われてますけど、正直言ってSEOを考えるなら「パス型」はほぼ選択肢に入らないです。ユーザーの行動次第で表示が変わるから、検索エンジンがサイト構造を理解するのには向いてない。 なので、実質的には「位置型」か「属性型」のどっちを選ぶか、って話になります。

どっちがいいとかじゃなくて、サイトの目的によって使い分けるのが正解ですね。僕なりに整理すると、こんな感じかな。

じゃあ、どうやって設置するの？JSON-LD実装と「よくある失敗」

パンくずをHTMLで書くのは簡単です。

と
1. でリストを作るだけ。 でも、本当に大事なのはここから。Googleに「これがパンくずリストですよ」って教えるための「構造化データ」の実装です。GoogleはJSON-LDっていう形式を推奨しているので、これを使うのが一番無難ですね。

   例えば、「ホーム > SEO記事 > パンくずリストについて」っていう階層なら、コードはこんな感じになります。

   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
     "@type": "BreadcrumbList",
     "itemListElement": [{
       "@type": "ListItem",
       "position": 1,
       "name": "SEO記事",
       "item": "https://example.com/seo-articles/"
     },{
       "@type": "ListItem",
       "position": 2,
       "name": "パンくずリストについて",
       "item": "https://example.com/seo-articles/breadcrumbs/"
     }]
   }
   </script>

   これをページの か の中に入れておけばOK。ポイントは position で順番をちゃんと指定してあげること。 あ、ちなみにホームは暗黙的に分かることが多いので、僕はよく省略しちゃいます。最後の現在ページも、リンクにしないなら item は省略できたりします。…が、Googleの公式ドキュメント を見ると現在ページまで含めている例もあるので、まあ、どっちでも認識はしてくれるみたいです。

   ただ、これを実装するときに、結構みんなやりがちな失敗があるんですよね。

   • 見た目のパンくずと構造化データが違う: これ最悪です。ユーザーに見せてる階層と、Googleに伝えてる階層が違うと、ガイドライン違反とみなされる可能性も。 絶対に一致させましょう。
   • モバイルでの表示崩れ: スマホで見たときに、パンくずが小さすぎてタップできない、あるいは長すぎて2行になってレイアウトが崩れてる、みたいなこと。 これはUXを損なうので、CSSでちゃんと調整して、長すぎる場合は途中を「...」で省略するとか工夫が必要。
   • 最後のページ（現在地）をリンクにする: 今いるページへのリンクって、ユーザーからすると意味ないですよね。押しても何も起きないんだから。これはリンクにしないのが親切。なんなら太字にしてあげるだけでも「今ここにいる」って分かりやすい。

   

   ちょっと応用編：1ページに複数のパンくずってアリ？

   これ、あんまり語られないんですけど、実はGoogleの公式ガイドラインには「1つのページに複数のパンくずリストを設置する」場合の例が載ってるんです。 「え、どういうこと？」って思いますよね。

   例えば、ある商品が「新着商品」カテゴリと「セール商品」カテゴリの両方に属している場合。ユーザーがどっちのルートから来たかによって、パンくずの表示を変えたい、みたいなケースが考えられます。1つのページが複数の文脈に属する場合ですね。

   こういう時、JSON-LDを2つ書くことで、Googleに「このページは、こういう経路もあるし、ああいう経路もあるんですよ」って伝えられるわけです。ただ、これはかなり特殊なケースだし、サイト構造が複雑になるので、正直、ほとんどのサイトでは必要ないかなと思います。でも、大規模なECサイトとかだと、こういう設計がUX向上に繋がることもあるかもしれません。

   

   海外のUX視点と日本のSEO視点のちょっとした違い

   面白いのが、海外のUX系のブログとか読んでると、パンくずリストの「見た目」に関する議論が結構細かいこと。例えば、区切り文字は「/（スラッシュ）」じゃなくて「>（大なり）」を使うべきだ、とか。 なぜなら、「>」の方が階層関係を直感的に示しているから、だそうです。なるほどね、って感じ。

   一方で、日本のSEO系の記事は、どっちかというと「構造化データの実装」とか「キーワードをカテゴリ名に入れる」とか、そういうテクニカルな話が中心な印象があります。 どっちが正しいとかじゃなくて、文化の違いというか、重視するポイントの違いが見えてきて面白いなと。

   Googleの公式ガイドライン はあくまで技術的な要件を述べているだけで、デザインについてはあまり言及していません。だからこそ、SEO的な正しさを担保しつつ、海外のUXベストプラクティス のような「ユーザーへの配慮」も取り入れていくのが、一番いいアプローチなんじゃないかな、なんて思ったりします。

   まとめというか、最後に思うこと

   結局、パンくずリストって「サイトの誠実さ」が現れる場所だと思うんです。ユーザーを迷わせないように、ちゃんと道案内をしてあげる。検索エンジンに嘘をつかないように、サイトの構造を正直に伝える。そういう当たり前のことを、ちゃんとやるためのツールなんですよね。

   もしあなたのサイトのパンくずリストが、ただ何となく設置されているだけなら、一度見直してみる価値は絶対にあると思います。それは、ユーザーのためにもなるし、巡り巡ってGoogleからの評価、つまりSEOにも繋がってくるはずだから。

   ---

   ちょっと質問です！

   あなたは普段ネットサーフィンしていて、「このサイト、今どこにいるか全然わからん！」って迷子になった経験ありますか？ もしよければ、どんなサイトで迷ったか、コメントで教えてもらえると嬉しいです。