パンくずリスト（Breadcrumbs）とは？実装方法を徹底解説
Googleは奇妙にも「ナビゲーションパス／探索パス」と呼んでいますが、SEO業界の私たちはこの機能を正式には**パンくずリスト（Breadcrumbs）**として知っています。最近、このトピックに関する新しい動きが多数あるため、パンくずリストとは何か、ステップごとの実装方法、実装の検証方法、そして最後にSearch Consoleでその進捗を監視する方法をお見せするガイドをまとめることにしました。
それでは、始めましょう！
パンくずリストとは？
パンくずリストは、ユーザーナビゲーションを向上させ、検索エンジンとユーザーの両方にページの階層を明確に示すことを目的とした機能です。これにより、ユーザーは最終ページとそのページが属するカテゴリーの両方に素早くアクセスできます。
パンくずリストの実装方法
実装に関しては、現在2つの選択肢があります：ユーザーに見える視覚的な選択肢と、コードによる選択肢です。実際には、両方を別々ではなく常に一緒に実装すべきです。
視覚的（Visible）
視覚的な選択肢では、ウェブサイトは各ページの上部にパンくずリストを実装し、ページを訪れているユーザーが自分のいる場所を正確に把握できるようにします。たとえば、ECサイトの商品ページ（HP Envyのコンピュータ）を見ているとき、パンくずリストには次のように表示されます：
ホーム > コンピュータ > HP > Envy このように、ユーザーが見ている商品はコンピュータカテゴリーに含まれ、HPコンピュータファミリーにも属していることをユーザーに伝えています。ナビゲーションの観点から、この機能は非常に重要です。なぜなら、ユーザーがHPの他のモデルを見たり、コンピュータの閲覧を続けたい場合、わずか1クリックで済むからです。
この機能がないと、ナビゲーションがはるかに難しくなり、ユーザーがウェブサイトを離れる可能性がはるかに高くなります。
コード（Code）
前の選択肢ではユーザーのためにパンくずリストを追加できましたが、この選択肢はコンテンツがどのようにカテゴリ分けされているかを検索エンジンに伝えます。Googleは視覚的なものだけのパンくずリストを理解しないため、この実装が正しく行われることが非常に重要です。
以下に、JSON-LDスクリプトフラグメントを使ったパンくずリスト実装の例を示します。
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> 上記のコードは、書籍「Ancillary Justice」が著者Ann Leckieによって書かれた書籍であることを伝えています。
Books > Authors > Ann Leckie > Ancillary Justice
カスタム開発や主要な言語の一部を使ってウェブサイトを構築している場合、実装を手動で行う必要があります。しかし、WordPressを使っている場合、この実装に役立つプラグインがいくつか利用可能です：
- Rank Math
- Yoast SEO
実装の検証
実装が完了したら、最も重要なのは正しく行われていることを確認することです。「視覚的」な実装の検証は、すべての要素が正しくリンクされて適切に動作することを確認するだけで非常にシンプルですが、コードの実装の検証にはもう少し努力が必要です。
それでも、私たちには生活をはるかに楽にしてくれるGoogleのツールとChrome拡張機能があります。
Google構造化データツール
Googleのツールを使えば、URL経由でも、フラグメントを直接入力してコードレベルでも、構造化データを検証できます。
Google構造化データツール
URLを入力すると、Googleは検出されたすべての構造化データを含む分析を返します。
Googleの構造化データツールでのURL分析の例。
一方、実装する前にBreadcrumbのJSON-LDコードを最初にテストしたい場合は、「コードフラグメント」ツールを使用できます。次のような結果が得られます：
構造化データのコードフラグメント検証ツール。
Structured Data Testing Tool（Google Chrome拡張機能）
Googleのツールにアクセスするのではなく、ブラウザから直接Breadcrumbの構造化データ（およびその他）を検証したい場合は、「Structured Data Testing Tool」拡張機能を使用できます。検出されたすべての構造化データとエラーを表示してくれます。
SEO Aliveの記事を例に、構造化データを検証するためのChrome拡張機能。
Google Search Consoleでパンくずリストを監視する
最後に、実装と検証が完了したら、残るはGoogle Search Consoleでアクティビティを監視することだけです。これにより、毎日追跡し、異常を検出できます。
Search Consoleのパンくずリストレポートの可視化（2019年9月にリリース）。
最後に、皆さんに質問させてください：実装する際に最もよく遭遇したエラーは何ですか？
他のSEOプロフェッショナルを助けるために、コレクションをまとめてこの記事に公開したいと思います。
ありがとうございます。コメントを共有することを忘れないでください！
参考資料
著者: David Kaufmann
私はこの10年以上、SEOに完全に夢中になって過ごしてきました。正直なところ、他の生き方は考えられません。
私のキャリアが新たな次元に到達したのは、Chess.com でシニアSEOスペシャリストとして働いたときでした。Chess.com はインターネット全体で最も訪問数の多い上位100サイトの1つです。数百万ページ、数十言語、そして最も競争の激しい SERPs の1つという規模で仕事をした経験は、どんなコースや資格でも得られないことを教えてくれました。あの経験は、本当に優れたSEOとは何かという私の視点を一変させ、それ以降に私が築いてきたすべての土台となりました。
その経験から、私は SEO Alive を創業しました。オーガニック成長に本気で取り組むブランドのためのエージェンシーです。私たちは dashboards や月次レポートを売るためにここにいるのではありません。本当に成果を動かす戦略を構築するためにここにいます。クラシカルなSEOの最良の部分と、Generative Engine Optimization (GEO) というエキサイティングな新しい世界を組み合わせ、あなたのブランドが Google の青いリンクだけでなく、ChatGPT、Perplexity、Google AI Overviews が毎日何百万人もの人々に届けている AI 生成の回答の中にも確実に表示されるようにします。
そして、この両方の世界をきちんと扱えるツールが見つからなかったので、自分で作りました。それが SEOcrawl です。rankings、テクニカル監査、backlinks モニタリング、crawl ヘルス、そして AI ブランド可視性トラッキングを1つの場所に統合した、エンタープライズ向けのSEOインテリジェンスプラットフォームです。まさに、ずっと存在してほしいと願っていたプラットフォームです。
この著者の他のコンテンツをご覧ください
