技術・構造化基礎

PR-243 パンくずリストなど基本的な構造化データを後回しにしていた——BreadcrumbList構造化データを実装する方法

Claude

こんな悩みはありませんか?

Organization・Article等の主要な構造化データは実装したものの、パンくずリスト(BreadcrumbList)のような基本的なものを「あとで」と後回しにしたまま、そのまま忘れている——という状態はよくあります。地味な項目ですが、サイト構造をAIに正確に伝えるための土台の一つです。

この記事でできるようになること

サイトの階層構造・URL一覧をもとに、BreadcrumbList構造化データのJSON-LDコードを生成できるようになります。

使うプロンプト

入力に必要な素材

  • 対象ページのURL
  • そのページに至るまでの階層(例: トップページ>カテゴリページ>この記事)と、各階層のページ名・URL
【役割】
【使用AI】Claude
あなたはWeb実装の担当者です。Organization・Article等の主要な構造化データは実装したが、パンくずリスト(BreadcrumbList)を「あとで」と後回しにしたまま忘れている担当者を支援してください。

【入力情報の確認】
パンくずの階層情報が空欄、または1階層しかない場合は処理を進めず、先に階層情報(最低2階層以上)の入力を求めてください。

# パンくずの階層情報
【例:
1. トップページ | https://example.com/
2. ブログ一覧 | https://example.com/blog/
3. この記事のタイトル | https://example.com/blog/xxx/
のように、階層順に「ページ名|URL」を貼り付ける】

【作業手順】
1. BreadcrumbList形式のJSON-LDコードを、階層順(浅い階層から深い階層へ)で正しく生成する
2. 各階層のpositionが1から連番で正しく振られているか自己点検する
3. 貼り付けられていない階層・URLがある場合は、その旨をコメントで明記し、URLを創作しない
4. 生成前に、JSON構文として正しいか(カンマ抜け・引用符の閉じ忘れがないか)を自己チェックする

【出力形式】
以下の順で出力してください。
A. `<script type="application/ld+json">`込みのJSON-LDコード
B. 不足している階層・URLの一覧(あれば)

【品質ガード】
- 貼り付けた情報の範囲でのみコードを生成し、URLを創作しないでください。
- 実装後はGoogleのリッチリザルトテストで構文エラーの有無を確認し、サイト上の実際のパンくずUI表示と内容が一致しているか目視照合が必要である旨を出力の末尾に明記してください。

実行手順

  1. 実装したいページの階層(パンくず)を書き出す(例: トップページ→ブログ一覧→この記事)
  2. 各階層のページ名とURLを整理してプロンプトに貼り付ける
  3. Claudeで実行し、BreadcrumbList形式のJSON-LDコードを生成する
  4. 生成されたコードを対象ページの<head>または<body><script type="application/ld+json">...</script>として設置する
  5. Google公式のリッチリザルトテスト(search.google.com/test/rich-results)で構文エラーがないか確認する

結果の読み解き方

  • リッチリザルトテストで「有効」と判定されても、それは構文が正しいことを示すだけです。実際にサイト上に見えているパンくずのUI表示と、構造化データの内容(階層の順序・ページ名)が一致しているかを必ず目視で照合してください。
  • 階層の順序を誤ると(例: 深い階層から浅い階層へ逆順にしてしまう)、AIやリッチリザルトに誤ったサイト構造の情報を伝えることになります。

注意点

  • BreadcrumbListの階層は、サイト上の実際のナビゲーション構造と一致させてください。実装だけを先に進め、サイト側のパンくず表示ルールと食い違ったままにしないよう注意してください。
  • AIが生成するコードは実行のたびに書き方が微妙に異なることがあります。設置前に毎回、検証ツールでの再確認を省略しないでください。
  • 全ページ共通の階層ルール(カテゴリの深さ・命名規則)になっているかも、実装後にサイト全体で確認することをおすすめします。

関連レッスン・関連パターン

確認テスト

選択肢をクリックすると、その場で正誤と解説が表示されます。

Q1. BreadcrumbListの構造化データは、リッチリザルトテストで「有効」と判定されても、サイト上の実際のパンくずUI表示と内容が一致しているか目視で照合する必要がある。

Q2. BreadcrumbListのpositionはどのように振られるべきか。

Q3. 貼り付けられていない階層・URLがある場合、プロンプトはどう対応するよう指示されているか。

よくある質問

Q. 生成されたJSON-LDコードはどのツールで検証すべきか。

Google公式のリッチリザルトテスト(search.google.com/test/rich-results)。

Q. パンくずの階層順序を誤るとどうなるか。

AIやリッチリザルトに誤ったサイト構造の情報を伝えることになる。

Q. 全ページ共通のルールになっているかは何を確認すべきか。

カテゴリの深さ・命名規則が実装後にサイト全体で一致しているかを確認する。

AIエージェント開発・AI検索最適化(AIO)の実装支援

AIエージェント開発・AI検索最適化(AIO)・LLMの内製化まで、学んだ内容を自社実装につなげたい方にWEBMARKSが伴走します。

無料相談してみる