III-B7 パンくず・サイト内検索を実装する

III-B3からIII-B6にかけて、Organization・Person・Article・FAQPage・Product・Reviewといった「ページの中身」を伝える構造化データを実装してきました(III-B3〜III-B6参照)。では、ページ同士の位置関係やサイトの機能はどう伝えればよいのでしょうか。このレッスンで扱うBreadcrumbList(パンくずリスト)とサイト内検索の構造化データが、その役割を担います。

BreadcrumbListが伝えること

BreadcrumbListは、あるページがサイトのどの階層に位置するかを「トップ＞カテゴリ＞個別ページ」のようなリスト形式で示す構造化データです。実装の基本は、画面に表示しているパンくずナビゲーションと同じ内容・同じ順序で書くことです。表示中のUIと構造化データの内容が食い違うと、機械にとって矛盾した情報源になってしまいます。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "トップ", "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "講座一覧", "item": "https://example.com/courses/"},
    {"@type": "ListItem", "position": 3, "name": "AIO CAMP", "item": "https://example.com/courses/aio-camp"}
  ]
}

サイト内検索(WebSite + SearchAction)

サイト内に検索機能がある場合、WebSiteスキーマにpotentialActionとしてSearchActionを追加すると、検索窓のURLパターンを伝えられます。{search_term_string}の部分に実際の検索語が入る仕組みです。

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

単独で置かず@graphでつなぐ

BreadcrumbListやWebSiteは、単独のページに置くよりも、Organization・Articleと一緒に@graph＋@idで接続し、孤立させないことが基本です。エンティティ同士をバラバラに置くのではなく、1つのつながった情報として提示するという考え方は、III-B3以降ずっと共通しています。既存のOrganizationやArticleのJSON-LDに追記する形で実装すると、管理もしやすくなります。

過度な期待をかけない位置づけ

パンくずやサイト内検索の構造化データは、ページの階層や機能をAIやクローラーに分かりやすく伝える地味だが基礎的な下支えです。これ単体で引用のされやすさが劇的に変わるようなものではありません。構造化データ全体の効果については、他の型と合わせてIII-B10でまとめて検証します。ここでは、正確に、矛盾なく伝えることを目標にしておきましょう。

実践ステップ

1. 1
   サイトの階層構造(トップ→カテゴリ→個別ページ)を書き出す
2. 2
   各ページの画面表示上のパンくずテキストと順序を確認する
3. 3
   表示中のパンくずと完全に一致する内容でBreadcrumbListのJSON-LDを作成する
4. 4
   サイト内検索機能がある場合はWebSite+SearchActionを追加する
5. 5
   Organization・ArticleなどのJSON-LDと@idで接続し、@graphの一部として扱う
6. 6
   表示中のパンくずUIと構造化データの内容にズレがないか目視で再確認する

このレッスンはテキストとスライドで学べます。スライドは上のビューアからご覧ください。