Google画像検索向けSEO。Google画像検索向けSEO。商品情報が表示される!JSON-LDでEC-CUBE3に商品の構造化データを追加しよう2017-01-31Google画像検索向けSEO。)モバイル専用インデックスの発表をしたりと、どんどんモバイルファーストを進めています。そんな中、最近の内部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の拡張形式です。Dataしちゃおう」です。通常のjsonオブジェクトのkey:valueは人間が考えて人間が見てわかりやすい名前をKeyに付けています。それだと検索エンジンなどの機械には、その値がどんな意味を持っているのか解りづらいので、機械でもわかりやすい様にKeyは定義へのリンク(IRI)を付けて検索エンジンなど機械にも解りやすくしちゃいましょう、というものです。*1詳しくはw3cのこちらの記事をご参照ください。単行本(ソフトカバー)この商品を含むブログを見るEC-CUBEなら簡単なカスタマイズで構造化マークアップの追加ができるさあ、次は実際にEC-CUBEの商品詳細ページにJSON-LD形式で構造化データをマークアップしていきましょう。JSON-LDをHTML内に記述する場合はscriptタグで囲います。type="application/ld+json">{/*JSON^LD形式のデータをここに書く*/}</script>この時、type属性には「application/ld+json」と記述します。ここポイント!サンプルのJSON-LDを作るとすると、こんな感じになります。