商品（Products）の構造化データをマークアップする方法

2017.09.26
Products（商品）の構造化データをマークアップする方法

Photo Federica Campanaro via Unsplash

商品（Products）の構造化データをマークアップする方法を紹介します。

商品の構造化データをマークアップすると、Googleは検索結果で商品に関する詳細な情報を提供できるようになります。

たとえば、検索結果の上部に画像付きで商品のショッピングページへのリンクが表示されます。

商品の構造化データのサンプル

また、商品のレビューや価格をリッチスニペットとして表示することがあります。

商品のレビューや価格のサンプル

商品（Products）の構造化データをマークアップする

商品ページをマークアップする

商品単体について記載したページ（Single Product Page）をマークアップします。

JSON-LDでマークアップする

JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "mpn": "925872",
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "119.99",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/UsedCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}
</script>

Microdataでマークアップする

MicrodataはHTMLタグ内に直接マークアップします。

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span>
  <span itemprop="name">Executive Anvil</span>
  <img itemprop="image" src="anvil_executive.jpg" alt="Executive Anvil logo" />
  <span itemprop="description">Sleeker than ACME's Classic Anvil, the
    Executive Anvil is perfect for the business traveler
    looking for something to drop from a height.
  </span>
  Product #: <span itemprop="mpn">925872</span>
  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89
      </span> reviews
  </span>

  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Regular price: $179.99
    <meta itemprop="priceCurrency" content="USD" />
    $<span itemprop="price">119.99</span>
    (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">
      5 November!</time>)
    Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization">
                      <span itemprop="name">Executive Objects</span>
                    </span>
    Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned,
      in excellent condition
    <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now!</span>
  </span>
</div>

商品の価格比較ページをマークアップする

価格.comのサイトのように、ある商品について複数の販売者の情報を比較したページ（Shopping Aggregator Page）をマークアップします。

JSON-LDでマークアップする

JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "ratingCount": "89"
  },
  "offers": {
    "@type": "AggregateOffer",
    "lowPrice": "119.99",
    "highPrice": "199.99",
    "priceCurrency": "USD"
  }
}
</script>

Microdataでマークアップする

MicrodataはHTMLタグ内に直接マークアップします。

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span> <span itemprop="name">Executive Anvil</span>
  <img itemprop="image" src="anvil_executive.jpg" />

  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    Average rating: <span itemprop="ratingValue">4.4</span>, based on
    <span itemprop="ratingCount">89</span> reviews
  </span>

  <span itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
    from $<span itemprop="lowPrice">119.99</span> to
    $<span itemprop="highPrice">199.99</span>
    <meta itemprop="priceCurrency" content="USD" />
  </span>
</div>

商品（Products）の構造化データの属性

商品（Products）の構造化データの属性は次のようになります。

商品に関する情報の属性（Product information properties）

商品に関する詳細情報についての属性です。

属性必須説明
name必須商品の名前
image必須商品画像のURL
description推奨商品の説明
brand推奨商品のブランド
review推奨商品のレビュー
aggregateRating推奨商品の評価
offers推奨商品の価格など購入に関する情報
sku | gtin8 | gtin13 | gtin14 | mpn推奨JANコードなど商品の識別番号

購入に関する情報の属性（Offer Properties）

商品の価格など購入に関する情報についての属性です。

属性必須説明
price必須商品の価格
priceCurrency必須通貨単位
USD、JPYなど
priceValidUntil推奨価格の有効期限
availability*在庫
http://schema.org/InStock: 在庫あり
http://schema.org/OutOfStock: 在庫切れ
* 画像検索には必須、通常検索には推奨
url推奨製品ページのURL

価格の比較に関する情報の属性（Aggregate offer properties）

価格.comのような商品価格の比較に関する情報についての属性です。

属性必須説明
lowPrice必須最安値
highPrice推奨最高値
priceCurrency必須通貨コード
USD、JPYなど
offerCount推奨販売者の数

参考