JSON-LD構造化データの実装（商品・パンくず）

はじめに

検索結果で、商品の価格や在庫、星評価が表示されているのを見たことはないでしょうか。
あるいは、タイトルの上に「ホーム > カテゴリ > 商品」といったパンくずが出ているものもありますよね。

ああいったリッチな表示は、構造化データというものを検索エンジンに渡すことで初めて可能になります。この記事では、モーターサイクル用品を扱うECサイトで、商品とパンくずリストの構造化データをJSON-LD形式でどう出力したのかを解説します。

構造化データとは何か

検索エンジンに「意味」を教える

通常のHTMLは、人間が読む前提で書かれています。「4980」という数字があっても、それが価格なのか型番なのか、機械には判断がつきません。構造化データは、この曖昧さを解消するために「これは価格です」「これは在庫状況です」と機械可読な形で明示する仕組みです。

これを渡しておくと、検索エンジンはページの内容を正確に理解し、検索結果にリッチな形で反映してくれます。ヘッドレスECではテーマが出してくれていたこの部分が消えるので、自前で用意する必要があります。

JSON-LDという書き方

構造化データにはいくつか記法がありますが、私が採用したのはJSON-LDです。HTMLの本文とは切り離し、<script type="application/ld+json">のブロックとしてまとめて記述できるので、見た目のマークアップを汚さずに済みます。

見た目のHTMLとは独立して扱えるので、SSRで生成した本文にJSON-LDを一枚重ねるイメージで実装できます。

商品の構造化データ

出力する主なプロパティ

商品ページには、商品を表す構造化データ（Product）を出力します。ここに価格や在庫状況、商品名や画像といった情報を含めることで、検索結果に価格や在庫の表示が出やすくなります。

これらはSSRで取得した商品データから組み立てるので、表示している内容と構造化データが自然に一致します。

表示内容との一致を保つ

パンくずリストの構造化データ

BreadcrumbListで階層を伝える

パンくずリストは、そのページがサイトのどの階層にあるかを示すナビゲーションです。これを構造化データ（BreadcrumbList）として出力すると、検索結果のタイトル付近に階層が表示され、ユーザーがサイト構造を把握しやすくなります。

内部リンク構造との一貫性

パンくずの構造化データは、実際の内部リンク構造と一致させることが大切です。SSRで出しているパンくずのリンクと、JSON-LDに書く階層を同じロジックから生成すれば、ユーザーが辿る導線とクローラーが読む階層がぴったり揃います。この一貫性が、サイト全体の評価を安定させます。

まとめ

JSON-LD構造化データは、検索結果に価格・在庫・階層といったリッチな情報を出すための「意味づけ」の仕組みです。商品にはProduct、階層にはBreadcrumbListを、SSRで取得した同じデータから組み立てて出力する。表示内容と構造化データを一致させることが、信頼性を保つ最大のポイントでした。

構造化データは、SSRで可視化した情報にさらに意味を重ねる施策です。まだ読んでいなければ、土台となる「クローラーに見せる情報をSSRで補完する」と、全体像を示す「ヘッドレスECのSEO設計」も合わせてどうぞ。