JSON-LDで商品ページのリッチスニペットを表示させる

リッチスニペット

ネットショップを運営しているなら見落とすわけにはいかないリッチスニペット。
リッチスニペットには構造化データが必要となり最初は少し手間がかかりますが、未導入の方はこの記事をぜひ参考にしてみてください。

なおショップサーブをご利用中の方は簡単に設定できますので3章だけお読みください。

手前味噌で恐縮ですが、弊社で販売中の「カラーミーSEO+ BASIC」（カラーミーショップ用のテンプレート）では何の設定をしなくても商品登録すれば自動で構造化データが挿入されるようになっています。

リッチスニペットとは？

Googleの検索結果を見ているとサイトの説明(description)だけでなく、写真やレビュー数、価格、在庫状況などが合わせて表示されていることがあります。これをリッチ スニペットと呼びます。

スマホネイティブ世代が増え、視覚的に目立つことが今後は特に重要になってくると思われますのでリッチスニペット導入はネットショップを運営しているなら外せません

このリッチスニペットを表示させる為に必要になってくるのが構造化データです。リッチスニペットの表示には必須項目がいくつかあり、必須項目の記述が無かったり記述が誤っていたりすると表示されません。かと言って漏れなく記述していたら１００％リッチスニペットが表示されるのかというと、そういうわけでもないのですが、少なくとも表示される可能性はあります。

構造化データとは

商品ページには商品名、価格、商品画像など様々な情報が掲載されています。

人間がみればそれは全て商品に関する情報だとすぐに分かりますが、検索エンジンのクローラーは人間ではないのでそういう訳にはいきません。それぞれを個々の情報として記号のようにばらばらに認識していきます。

それを人の目で見るのと同じように検索エンジンに伝える技術が構造化データです。

大手のショッピングモールやワードプレス、或いはショッピングカートASPにも構造化データが標準装備されている場合がありますが、大体のサイトでは自分で設定しないといけません。

Google提供の構造化データテストツール（追記：現在は後継の「リッチリザルトテストツール」）ですぐに設定・未設定が分かりますので気になる方はご確認ください。リッチリザルトテストには、構造化データ記述のサンプルも用意されているので非常におすすめです。

Microdateによるマークアップ

Microdateを使った構造化データのマークアップは、html文に直接マークアップします。

(例)

<div itemscope
itemtype="https://schema.org/Product">
 <p itemprop="name">A（商品名）</p>
 <img itemprop="image" src="__.jpg" alt="（商品画像）" />
</div>

赤字部分を追記していき、「これは商品Aを説明しています」と検索エンジンに伝えます。

schema.orgで詳しく分類されています。schemaのサイトにも記述サンプルがあるのでご参照ください。

JSON-LDによるマークアップ

2016年までは上のMicrodateが推奨されてきましたが、現在Googleが推奨しているのはJSON-LDによる構造化データマークアップです。

headタグ内でないといけないということはなく、htmlのどこに記述しても問題ないようです。<body>の終了タグ前にでも入れておきましょう。

商品ページのJSON-LD記述例

＜script type="application/ld+json">
 {
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "xxxxxxxx",
  "image": "-------.jpg",
  "description": "xxxxxxxxx",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "3.5",
    "bestRating": "5",
    "reviewCount": "20"
  }
 }
</script>

他にも記載できることは沢山ありますが、このように一括できますのでhtmlもすっきりしますしメンテナンスも楽です。

↑の記述例は、上から商品名、商品画像、説明、レビュー（平均スコア、最高設定値、レビュー件数）となっています。

ショップサーブなら簡単に設定できる

ショップサーブの個別の商品登録ページには「Googleショッピングなどの外部連携用データ」という項目がありますが、ここに記述した内容が自動的にJSON-LDに変換されて商品ページに記載されるようになっています。

2016年から導入された機能ですので以前からショップサーブを利用している方などで見落とされている場合はすぐに記述しましょう。

商品ページのJSON-LD　実装例

＜script type="application/ld+json">
 {
  "@context": "https://schema.org/",
  "@type": "Product",  //構造化データの種類
  "name": "xxxxxxxx",　//商品名
  "image": "-------.jpg",　　//商品の代表画像
  "description": "xxxxxxxxx",　　//商品の説明
  "aggregateRating": {
    "@type": "AggregateRating",　//データの種類（レビュー）
    "ratingValue": "3.5",　　　　//平均スコア
    "bestRating": "5",　　　　　 //レビュー設定の最高値
    "reviewCount": "20"　　　　　//獲得しているレビュー件数　
   },
  "sku": "xxxxxxxxxx" ,         // SKUコード
  "gtin13": "1234567890123",　　// JANコード
  "mpn": "XXXXXX",　　　// 商品コード（任意の管理コード)
  "brand": {
    "@type": "Thing",
    "name": "AAAAAAA"   // ブランド名
   },
  "offers": {
    "@type": "Offer", 　　　　　//データの種類（販売価格）
    "priceCurrency": "JPY",　　//通貨の設定（日本円）　
    "price": "1234.00",　　　　//販売価格
    "itemCondition": "https://schema.org/NewCondition",　//新品か中古か
    "availability": "https://schema.org/InStock",　　　　//在庫ありまたは無し
    "seller": {
      "@type": "Organization",    //データの種類（販売者）
      "name": "XXXXXXXX"　　　　　//販売者名　
    }
  }
 }
</script>

広告

2018年3月20日HTML/CSSECサイト,JSON-LD,seo対策,ネットショップ,構造化データ

Posted by ミフネWEB