Hatena::ブログ(Diary)

EC-CUBEのカスタマイズならクロスキューブ!サイト制作メモ このページをアンテナに追加 RSSフィード Twitter

2017-01-31

SEO 商品の構造化データのマーックアッ

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

最近になってGoogleAMPをはじめたり( concrete5 5.6系向けにAMPアドオンを作ってみたモバイル専用インデックスの発表をしたりと、どんどんモバイルファーストを進めています。

そんな中、最近の内部SEOでとても重要になっているのが構造データマークアップです。

正しいHTMLWebページを記載するのはもちろんですが、より検索エンジンにわかりやすい形でページの情報を伝えるマークアップですが、これがモバイルで大きく意味を持つ様になってきました。

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

構造化データ マークアップの結果 モバイル画像検索 Amazon

構造化データ マークアップの結果 モバイル画像検索 EC-CUBE

AmazonEC-CUBE公式のデモサイト内の画像検索のスマホでの表示結果です。

何が違うかわかりますか?

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

お客さんの行動を考えてみましょう。
例えば、L字型のソファーを買いたいと思っているとします。

「どんなのがあるかな〜?いくらくらいかな〜?」とWebで検索するでしょう。

その際、僕もよくやるのですが画像検索を使います。
画像検索結果の中から良さそうな画像クリックして、どこで売ってるのか?いくらくらいなのか?を見ます。

そんな時に価格とかレビューの値とか出てるとわかりやすくてそのまま買っちゃいそうです。

これはぜひ入れておいた方が良さそうですね。

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

実は商品情報の構造化データは昨年末に更新されていました。

この時に画像検索に対する商品情報リッチスニペッドへの言及が追記されました。

構造データマークアップの種類は、実はいくつかあります。代表的なものはサイトロゴ組織を表すものです。また、Newsイベントなどもあります。

実装microdataやRDFaなどもありますが、HTMLタグ属性として記述しないといけなかったりと、なかなか後から追加するのは面倒なものなので、ここはGoogleも推奨しているJSON-LD形式での実装が一番良いと思います。

JSON-LDとは?

JSON-LDとは、json機械でもわかりやすい様に意味合いを追加したjson拡張形式です。

わかりやすく言うと、「jsonLinked Dataしちゃおう」です。

通常のjsonオブジェクトのkey:valueは人間が考えて人間が見てわかりやすい名前Keyに付けています。でも、それだと検索エンジンなどの機械には、その値がどんな意味を持っているのか解りづらいので、機械でもわかりやすい様にKey定義へのリンクIRI)を付けて検索エンジンなど機械にも解りやすくしちゃいましょう、というものです。*1

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

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

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

JSON-LDHTML内に記述する場合は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-CUBE3対応!デザインカスタマイズガイドブック

新しくなったEC-CUBE3に対応したデザインカスタマイズブック。2017年1月現在 EC-CUBE3のデザインカスタマイズについて解説されている書籍はこれだけです。とりあえず買いましょう!

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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/xross-cube/20170131/p1
Connection: close