Takazudo Modular Docs

Type to search...

to open search from anywhere

JSON-LD 構造化データ

商品ページの JSON-LD 構造化データ (schema.org) の仕組みと設定

JSON-LD 構造化データ

JSON-LD とは何か

JSON-LD は、ページの内容を検索エンジンにわかりやすく伝えるためのデータ形式です。 見た目のための HTML とは別に、「このページは商品ページです」「これは価格です」「これは在庫状況です」のような意味を、機械向けに整理して渡します。

このとき使う共通ルールが schema.org です。 schema.org には Product、Article、BreadcrumbList などの型があり、Google などの検索エンジンはこれを読んでページ内容を理解します。

SEO の観点では、JSON-LD を入れることで次のような効果が期待できます。

  • 商品ページが Google 検索で商品情報として理解されやすくなる
  • 価格や在庫などが商品スニペットとして扱われやすくなる
  • パンくずリストが検索結果に反映されやすくなる
  • 記事ページが Article として認識されやすくなる

実装上は、HTML の中に次のような形で埋め込みます。

<script type="application/ld+json">
  { ...JSONデータ... }
</script>

これは画面には表示されません。 ユーザー向けではなく、検索エンジン向けの「説明データ」です。

このサイトで使われている JSON-LD の種類

Takazudo Modular では、主に次の 4 種類を使っています。

種類対象ページ主な内容
Product商品詳細ページ商品名、価格、在庫、画像、ブランド、配送、返品ポリシー
ItemList商品一覧ページ商品リスト（順番、名前、URL、画像）
BreadcrumbList全ページパンくずリスト（ナビゲーション階層）
Article記事・ガイドページタイトル、説明、公開日、著者

Product JSON-LD の詳細

このサイトでは Product が最重要です。 Google に「このページは商品ページで、販売情報もある」と伝える中心部分だからです。

基本フィールド

フィールド内容
name商品名
url商品ページの正規 URL
description商品説明（省略可）
image商品画像 URL（/images/p/{slug}/1200w.webp）
brandブランド名（Brand 型）

画像は相対パスで渡された場合でも、最終的には絶対 URL に変換されます。

Offers

価格がある商品では、offers を出力します。 ここが検索結果の「価格」「在庫」まわりに特に重要です。

price が存在する場合だけ offers を出力します。 価格未設定の商品には offers 自体が付きません。

在庫状況マッピング

在庫状況は mercariStatus から変換しています。

mercariStatus出力される availability意味
未設定 / その他https://schema.org/InStock販売中
soldhttps://schema.org/OutOfStock売り切れ
discontinuedhttps://schema.org/OutOfStock販売終了
unavailablehttps://schema.org/OutOfStock販売不可
incominghttps://schema.org/PreOrder入荷予定・予約受付

seller

販売者は固定で Takazudo Modular です。

shippingDetails

配送情報は日本国内向けとして出しています。

項目値
配送先国JP
送料0 JPY（商品価格に含む）
発送準備1〜3 営業日
配送1〜3 営業日

PreOrder（予約商品）の場合は shippingDetails ブロックごと省略します。 予約商品は「すぐ発送できる商品ではない」ため、配送情報を出すのは不正確であり、Google の構造化データ仕様でも shippingDetails を出すなら deliveryTime が必須となるためです。availability: PreOrder だけで「まだ発送できない」という情報は伝わります。

hasMerchantReturnPolicy

返品ポリシーは「返品不可」です。

{
  "@type": "MerchantReturnPolicy",
  "applicableCountry": "JP",
  "returnPolicyCategory": "https://schema.org/MerchantReturnNotPermitted"
}

出力例

以下は、このサイトの実装に沿った Product JSON-LD の出力例です。

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "ADDAC107 T-Networks",
  "url": "https://takazudomodular.com/products/addac107-t-networks-intro/",
  "description": "ADDAC107 T-Networks は 3 系統のツインピークフィルターを備えたユーロラックモジュールです。",
  "image": "https://takazudomodular.com/images/p/addac107/1200w.webp",
  "brand": {
    "@type": "Brand",
    "name": "ADDAC System"
  },
  "offers": {
    "@type": "Offer",
    "price": 27800,
    "priceCurrency": "JPY",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Takazudo Modular"
    },
    "shippingDetails": {
      "@type": "OfferShippingDetails",
      "shippingDestination": {
        "@type": "DefinedRegion",
        "addressCountry": "JP"
      },
      "shippingRate": {
        "@type": "MonetaryAmount",
        "value": 0,
        "currency": "JPY"
      },
      "deliveryTime": {
        "@type": "ShippingDeliveryTime",
        "handlingTime": {
          "@type": "QuantitativeValue",
          "minValue": 1,
          "maxValue": 3,
          "unitCode": "DAY"
        },
        "transitTime": {
          "@type": "QuantitativeValue",
          "minValue": 1,
          "maxValue": 3,
          "unitCode": "DAY"
        }
      }
    },
    "hasMerchantReturnPolicy": {
      "@type": "MerchantReturnPolicy",
      "applicableCountry": "JP",
      "returnPolicyCategory": "https://schema.org/MerchantReturnNotPermitted"
    }
  }
}

予約商品（incoming）の場合は、availability が PreOrder になり、shippingDetails ブロックごと出力されません。

ItemList

ItemList は商品一覧ページで使います。 「このページには複数の商品が順番つきで並んでいる」と検索エンジンに伝えるためのものです。

各商品について次の情報を出しています。

フィールド内容
position一覧内の順番
name商品名
url商品詳細ページ URL
imageOGP 用画像 URL

detailHref がある商品だけが対象です。

BreadcrumbList はパンくずリストの構造化データです。 検索エンジンにページ階層を伝えます。

商品ページでの階層例:

  1. ホーム
  2. ブランド一覧
  3. ブランド名
  4. 商品名

通常の記事ページではコンポーネント側で自動生成され、必要に応じてカテゴリも入ります。

Article

Article は記事ページやガイドページ用です。

フィールド内容
headline記事タイトル
description記事説明
imageOGP / ヒーロー画像
datePublished公開日
dateModified更新日
authorTakazudo
publisherTakazudo Modular

schemaType は基本 Article ですが、必要に応じて WebPage や AboutPage も使える設計です。

確認方法

Google Rich Results Test

Rich Results Test に URL を入れて確認します。

確認すること:

  • JSON-LD が正しく読み取られているか
  • Product として認識されているか
  • price / availability / image などにエラーがないか
  • 必須項目不足や形式エラーがないか

Google Search Console

Search Console では、Google が実際に構造化データをどう認識しているかを確認できます。

確認すること:

  • 商品ページがリッチリザルト対象として認識されているか
  • エラーや警告が出ていないか
  • クロール後に構造化データが正しく取り込まれているか

運用としては、まず Rich Results Test でページ単位の確認を行い、その後 Search Console でサイト全体の状態を見るのがよいです。

コンポーネントファイル

ファイル用途
src/astro/components/shared/product-json-ld.astroProduct 構造化データ
src/astro/components/shared/product-list-json-ld.astroItemList 構造化データ
src/astro/components/shared/breadcrumb-json-ld.astroBreadcrumbList 構造化データ
src/astro/components/shared/article-json-ld.astroArticle 構造化データ

呼び出し元:

ファイル用途
src/astro/pages/products/[slug].astro商品詳細ページ（JA）
src/astro/pages/en/products/[slug].astro商品詳細ページ（EN）
src/astro/pages/products/index.astro商品一覧ページ
src/astro/pages/notes/[slug].astro記事ページ

まとめ

  • JSON-LD は「検索エンジン向けの説明データ」
  • 画面には見えないが、SEO には重要
  • 商品ページでは Product が最重要
  • 価格、在庫、送料、返品不可などを機械的に明示している
  • 在庫は mercariStatus から自動で変換している
  • 予約商品では配送日数をあえて出さない
  • 確認は Rich Results Test と Search Console を使う