「JSON-LD」で商品の構造化データを実装

サツキ: トリック or トリート！とりあえずお菓子ください。

皆さん、こんにちは。サツキです。

今回は単一商品の情報ページに「JSON-LD」での構造化データを実装する方法について説明したいと思います。
ECサイトを運用している方やサイト内で自社の製品の案内等をしている場合に利用できるかと思います。

以前の記事に興味がある方は以下のURLより御覧ください。
「JSON-LD」でパンくずリストの構造化データを実装【WP設置編】

「JSON-LD」でパンくずリストの構造化データを実装【カスタマイズ編】

「JSON-LD」でFAQの構造化データを実装

「JSON-LD」で組織情報の構造化データを実装

「JSON-LD」を設置して、サイトリンク検索ボックスを表示！

そもそも設置するメリットは？

設置するメリットとしては、「JSON-LD」についての記事の中でいつも言っていることではありますがGoogle検索の画面に「リッチリザルト」として追加の情報を表示できることです。
サイトのページを表示させる前の検索結果の画面でユーザーに価格、在庫状況、レビューの評価を直接確認してもらうことが出来るようになります。

商品の「JSON-LD」での構造化データの記述方法

  例）SAMPLE 構造化データ
  <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",

      <!-- 「name」プロパティは必須（また、次のいずれかのプロパティも必須（「review」「aggregateRating」「offers」）） -->
      "name": "商品名",

      <!-- 商品の写真の URL -->
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg"
      ],

      <!-- 商品についての説明文 -->
      "description": "テキストテキストテキストテキストテキスト",

      <!-- 商品に関する販売者固有の識別子 -->
      "sku": "0446310786",

      <!-- 該当するすべてのグローバル識別子を設定。（gtin | gtin8 | gtin13 | gtin14 | mpn | isbn） -->
      "mpn": "925872",

      <!-- 商品のブランド -->
      "brand": {
        "@type": "Brand",
        "name": "ブランド名"
      },

      <!-- 商品のレビューの抜粋（必須 or 推奨） -->
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "レビューを書いた人の名前"
        }
      },

      <!-- 商品の総合評価（必須 or 推奨） -->
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },

      <!-- 商品の販売情報（必須 or 推奨） -->
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",  <!-- 商品ページへの URL -->
        "priceCurrency": "JPY",
        "price": "10000",  <!-- 必須。商品が無料である場合には「"0"」にする -->
        "itemCondition": "https://schema.org/NewCondition",  <!-- 商品の状態のオプション。中古品と再生品で必須。 -->
        "availability": "https://schema.org/InStock"  <!-- 商品の在庫状況のオプション -->
      }
    }
  </script>

「offers」プロパティ内で設定可能な「itemCondition」プロパティには以下のようなオプション値があります。
・新品 : NewCondition
・再生品 : RefurbishedCondition
・中古品 : DamagedCondition、UsedCondition

「offers」プロパティ内で設定可能な「availability」プロパティには以下のようなオプション値があります。
・取り寄せ : https://schema.org/BackOrder
・販売終了 : https://schema.org/Discontinued
・在庫あり : https://schema.org/InStock
・店舗限定 : https://schema.org/InStoreOnly
・限定販売 : https://schema.org/LimitedAvailability
・オンライン限定 : https://schema.org/OnlineOnly
・在庫なし : https://schema.org/OutOfStock
・予約 : https://schema.org/PreOrder
・先行販売 : https://schema.org/PreSale
・売り切れ : https://schema.org/SoldOut

正しく設置できているかの確認方法

リッチリザルトテストのサイトで以下の方法でコードの検証ができます。

① テストするページのURLを入力して検証

② 直接テストするコードを貼り付けた上で検証

テスト自体は無料で、時間もかからないため実装後にはテストして構造化データが正しく設定できていることを確認することをオススメいたします。

まとめ

以上が、商品の「JSON-LD」での構造化データの記述方法となります。
「例）SAMPLE 構造化データ」をコピーしていただいて各種プロパティを商品の情報に合わせて変更いただくだけで、特に難しいということもないかと思いますので皆さんもご自身のサイトに実装してみてはいかがでしょうか？

それでは今回も最後までお付き合いありがとうございました。

コラム