Google画像検索向けSEO。商品情報が表示される！JSON-LDでEC-CUBE3に商品の構造化データを追加しよう

最近になってGoogleはAMPをはじめたり（ concrete5 5.6系向けにAMPアドオンを作ってみた ）モバイル専用インデックスの発表をしたりと、どんどんモバイルファーストを進めています。
そんな中、最近の内部SEOでとても重要になっているのが構造化データのマークアップです。
正しいHTMLでWebページを記載するのはもちろんですが、より検索エンジンにわかりやすい形でページの情報を伝えるマークアップですが、これがモバイルで大きく意味を持つ様になってきました。

Google画像検索では商品画像に商品情報が表示される

AmazonとEC-CUBE公式のデモサイト内の画像検索のスマホでの表示結果です。
何が違うかわかりますか？

そう！Amazonの画像の方では金額や在庫情報などが表示されています。
これはAmazonの商品ページには構造化データのマークアップがされており、EC-CUBEの詳細ページには無いからです。

お客さんの行動を考えてみましょう。
例えば、L字型のソファーを買いたいと思っているとします。
「どんなのがあるかな〜？いくらくらいかな〜？」とWebで検索するでしょう。
その際、僕もよくやるのですが画像検索を使います。
画像検索結果の中から良さそうな画像をクリックして、どこで売ってるのか？いくらくらいなのか？を見ます。

そんな時に価格とかレビューの値とか出てるとわかりやすくてそのまま買っちゃいそうです。
これはぜひ入れておいた方が良さそうですね。

商品情報の構造化データのマークアップのやり方

実は商品情報の構造化データは昨年末に更新されていました。
この時に画像検索に対する商品情報のリッチスニペッドへの言及が追記されました。

構造化データのマークアップの種類は、実はいくつかあります。代表的なものはサイトのロゴや組織を表すものです。また、Newsやイベントなどもあります。
実装はmicrodataやRDFaなどもありますが、HTMLタグの属性として記述しないといけなかったりと、なかなか後から追加するのは面倒なものなので、ここはGoogleも推奨しているJSON-LD形式での実装が一番良いと思います。

JSON-LDとは？

JSON-LDとは、jsonを機械でもわかりやすい様に意味合いを追加したjsonの拡張形式です。
わかりやすく言うと、「jsonをLinked Dataしちゃおう」です。
通常のjsonオブジェクトのkey:valueは人間が考えて人間が見てわかりやすい名前をKeyに付けています。でも、それだと検索エンジンなどの機械には、その値がどんな意味を持っているのか解りづらいので、機械でもわかりやすい様にKeyは定義へのリンク（IRI）を付けて検索エンジンなど機械にも解りやすくしちゃいましょう、というものです。*1

詳しくはw3cのこちらの記事をご参照ください。

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

EC-CUBEなら簡単なカスタマイズで構造化マークアップの追加ができる

さあ、次は実際にEC-CUBEの商品詳細ページにJSON-LD形式で構造化データをマークアップしていきましょう。

JSON-LDをHTML内に記述する場合はscriptタグで囲います。

<script type="application/ld+json">
{
/*JSON^LD形式のデータをここに書く*/
}
</script>

この時、type属性には「application/ld+json」と記述します。ここポイント！

サンプルのJSON-LDを作るとすると、こんな感じになります。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "おでん",
  "image": "http://www.example.com/oden.jpg",
  "description": "おいしいおでん。冬は温まります。",
  "sku": "123456789",
  "brand": {
    "@type": "Thing",
    "name": "EC-CUBE"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "JPY",
    "price": "1500",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/NewCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "XROSS CUBE,Inc."
    }
  }
}
</script>

EC-CUBEのtwigのパラメーターを埋め込んだ形にすると、

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ Product.name }}",
  "image": [{% if Product.ProductImage|length > 0 %}{% for ProductImage in Product.ProductImage %}{% if loop.index > 1 %},{% endif %}"{{url('homepage')}}{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"{% endfor %}{% else %}"{{url('homepage')}}{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"{% endif %}],
  "description": "{{ Product.description_detail}}",
  "sku": "{{ Product.code_min }}",
  "category":[
    {% for ProductCategory in Product.ProductCategories %}{% if loop.index > 1 %},{% endif %}"{% for Category in ProductCategory.Category.path %}{% if loop.index > 1 %} / {% endif %}{{ Category.name }}{% endfor %}"{% endfor %}
  ],
  "brand": {
    "@type": "Thing",
    "name": "EC-CUBE"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "JPY",
    "price": "{{ Product.getPrice02IncTaxMin }}",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/NewCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "XROSS CUBE, Inc."
    }
  }
}
</script>

こんな感じです。（実際のEC-CUBE3でのデモはこちら）
各商品ごとにそれぞれの商品詳細ページでその商品の構造化データを出力してくれます。
商品タイプの構造化データに必要なパラメータは、Googleのドキュメントの通りですが、schema.orgには他にも色々なプロパティが定められているので、指定できるとこは指定しちゃった方が良さそうです。メーカー情報を表示するプラグインや、商品レビューとかのデータがあれば、それも追加できます。
また、せっかく構造化データを出す様にしても肝心の商品画像が Google画像検索にインデックスされていなかったら意味がありません。robots.txtを見直して、画像検索を拒否していないかどうか確認してください。

EC-CUBE3用の構造化データマークアップ プラグインを作りました！

ネットショップに必要な構造化データのマークアップはこれだけではありません。他にもあった方がよい情報や、今後の事を考えて記述しておいた方が良いデータなどが他にもいくつもあります。
でも、それをいちいちテンプレートファイルをいじってEC-CUBEをカスタマイズするのはとても面倒なので、まるっと設定できるプラグインを作りました。
近日中にオーナーズストアでダウンロードできる様になると思いますので、よろしくお願いします。

EC-CUBE 4 システム構築入門&店舗運営・管理ビギナーズガイド

*1:実際にはcontext使ってるので、イチイチIRIの指定とかは不要です