Merchant Center 向けの構造化データの設定

この記事では、商品データ用に構造化データのマークアップを実装する方法を説明します。最初に、Merchant Center 用の構造化データのマークアップについてのページを確認して、自分のサイトが要件を満たしていることをご確認ください。Merchant Center の商品データの枠を超えた、構造化データの一般的なガイドラインについては、Schema.org のスタートガイドをご覧ください。Search Console を使用して、構造化データに関連した問題のトラブルシューティングを行うことや、サイトの検索トラフィックと検索パフォーマンスを測定することもおすすめします。

はじめに

構造化データのマークアップをウェブサイトに追加するには、自分のサイトの HTML またはショップのシステムのテンプレートの設定にアクセスして編集できる必要があります。マークアップは HTML タグのアノテーションであり、検索エンジンのクローラやボットに、自分のサイトに商品データがあることを知らせ、システムが確実にデータを理解できるようにします。

Google のクローラが構造化データと商品データを照合するには、次の条件のいずれかを満たしている必要があります。

  • ランディング ページ上に単一の商品があること。
  • ページ全体に複数の商品が存在する場合、ページ内の各商品に SKU や GTIN が割り当てられており、それぞれの Google ショッピングの商品データに同じ SKU(id [ID] 属性)または GTIN(gtin [gtin] 属性)が指定されていること。これは、同一のランディング ページに同じ商品のさまざまなバリエーション(サイズ違いや色違いや関連商品など)を表示する場合に便利です。

これらの条件のうち 1 つも満たされない場合は、ランディング ページ上の商品と Google ショッピングの商品データを照合することができません。

ウェブサイトに構造化データのマークアップを設定する方法について詳しくは、schema.org のスタートガイドをご覧ください。Schema.org のセクションである機械が理解できる情報のバージョンで、構造化データを理解して明示する方法を確認できます。

構造化データのマークアップの追加

サイトに構造化データのマークアップを追加するには、サイト上の既存の HTML を拡張するか、新たなマークアップを作成する必要があります。また、JSON-LD(推奨)か microdata のどちらが自分のニーズに合うのかを判断する必要があります。

新しい構造化データのマークアップの追加(推奨)

特に商品データにバリエーションがある場合は、HTML のマークアップとは別に、新たな構造化データのマークアップを JSON-LD で追加することをおすすめします。追加されたマークアップは、ユーザーに表示されるコードとは異なるため、維持が簡単になります。Google での使用のために専用設計されたすべての構造化データのマークアップは、サイトの視覚要素を一切変えることなく追加できます。構造化データを生成するコードは、サイト上でユーザーに表示される要素に対する変更と常に同期させる必要があることにご注意ください。

サイトで e コマース プラットフォームを使用している場合は、構造化データを追加する前にプラットフォームのテンプレートやコードに変更を加える必要がある場合があります。また、テンプレートやページレベルで適用できるよう、サイトが JavaScript に対応している必要があります。

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "商品",
  "image": "http://example.com/test.jpg",  
  "name": "サンプルテスト",
  "description": "ただのサンプル",
    "offers": {
    "@type": "オファー",
    "priceCurrency": "USD",
    "price": "199.99"
  }
}
</script>

microdata


<span itemscope itemtype="http://schema.org/Product" class="microdata">
  <meta itemprop="image" content="test.png">
  <meta itemprop="name" content="サンプルテスト">
  <meta itemprop="description" content="ただのサンプル">
  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="price" content="119.99">
    <meta itemprop="priceCurrency" content="USD">
  </span>
</span>

追加された構造化データのマークアップは、HTML ソースのあらゆる場所に表示されます。追加されたマークアップはすべて、ウェブサーバーから返される HTML に含める必要があり、ページが読み込まれた後に JavaScript を使用して生成することはできません。

構造化データのマークアップによる既存のコンテンツの拡張

HTML を拡張する場合は、サイト上の商品データを囲む既存の HTML タグが必要になります。場合によっては、新たな HTML タグを追加する必要もあります。

通常、データの拡張は HTML テンプレートの編集によって実施できます。この際、一般的にバックエンドのコードの変更は最小限で済みます。データを拡張すると、サイト上にすでに存在する情報が構造化データのマークアップに再利用されます。

この例には、構造化データのマークアップによって拡張された商品データが含まれています。追加箇所は黄色でハイライト表示されています。

<div class=”product-details” itemscope itemtype="http://schema.org/Product">
   <div class=”product-image”>
      <span class=”label”>Image:</span>
      <img itemprop="image" src=”test.png”>
   </div>
   <div class=”product-info”>
      <span class=”label”>Product Name:</span> 
      <span class=”info” itemprop="name">Example Test</span>
   </div>
   <div class=”product-info”>
      <span class=”label”>Description:</span> 
      <span class=”info” itemprop="description">This is just a boring example</span>
   </div>
   <div class=”product-info” itemprop="offers" itemscope    
                             itemtype="http://schema.org/Offer">
      <span class=”label”>Price:</span> 
      <meta itemprop="priceCurrency" content="USD"/>
      <span class=”price”>$<span itemprop="price">119.99</span></span>
   </div>
</div>

Product と Offer

ランディング ページには、商品について説明する Product オブジェクトと、商品の販売方法について説明する、offers フィールド内のネスト化された Offer オブジェクトを含める必要があります。

価格の小数点記号はカンマではなくピリオドを使用する必要があることにご注意ください。ランディング ページで複数の通貨の価格を表示する場合は、タイプが Offer である複数のオブジェクトを使用します。複数の Offer オブジェクトを使用する際は、通貨を指定するために priceCurrency [通貨] 属性も使用する必要があります。

ランディング ページに販売価格が表示されていて、その時点でこの価格がユーザーが実際に支払う価格である場合、販売価格を構造化データに設定するようにしてください。

重要: 一部の商品仕様の属性は schema.org でサポートされていません。詳しくは、サポート対象の構造化データの属性のページをご覧ください。商品アイテムの自動更新を使用するには、price [価格]priceCurrency [通貨]availability [在庫状況] の各属性を指定する必要があります。

マークアップのテスト

Search Console構造化データ テストツールを使用して Schema.org の実装をテストします。ツールの使用、問題のデバッグ、ツールでの結果の解釈について詳しくは、Google Search Console ヘルプセンターをご覧ください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。