構造化データマークアップをしてみよう~商品レビュー編~構造化データマークアップをしてみよう~商品レビュー編~2017年6月2日さて、三回目となります今回は更に更に調子に乗って、レビューをマークアップしてみようと思います。実は、このレビューマークアップをしておきたくて始めたこのシリーズ(?)だったり。大本命さんの登場です。今回もながくなりそうなので皆さん覚悟してついてきてくださいね!!まずはおさらい、構造化データマークアップとは!?という疑問から入る人はこちらのページを読んで下さい!構造化データマークアップ|SEO女子コラムそれでは早速実践です。いう感じですが今回も使うシンタックスは「Microdata」、ボキャブラリーは「schema.org」を使用します。いつかシンタックスは別のもの使ってみたいですね~。いうのは一旦置いといて、よく見る商品レビューを今回はマークアップします。☆評価みたいな数値も今回は出してみますが、これはスニペットに表示される可能性が非常に高くなるので、商品を売っている方はぜひとも実践してほしいです。今回はECサイトでコーヒーサイフォンを売っているという体で例に上げてみましょう。コーヒーサイフォンご存じです?喫茶店で見てからつじさんは忘れられない感動を胸に持っている商品です。今回は長いのでそれっぽくタグも入れてある物を載せちゃいます。class="description"><p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。プロも使用している本格機材で美味しいコーヒーを飲みましょう。ろ過布を無料で5枚おつけしています。class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。class="text">初めて使いましたがコーヒーのコクが引き立ち美味しく淹れられました。</div></div></div></div>長いですね...。今回はマークアップしやすいようなタグ設計にしました。マークアップ開始です!まず、レビューをマークアップするにあたって大抵は「こういう商品があって、それの評価とレビューです」と表記するものです。マークアップも同じような構造を持っています。いう商品です、という紹介からしなければいけないので、そこから記入しましょう。全体を「商品です」という宣言からいきましょう。itemprop="description"><p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。プロも使用している本格機材で美味しいコーヒーを飲みましょう。ろ過布を無料で5枚おつけしています。itemtype="http://schema.org/Product"でここから先は商品です、という宣言をします。今回は抜き出して書いてますが、この宣言でレビュー部分も全部マークアップしておく必要があるので、大枠のタグなどに設置するのがいいでしょう。ここでは一緒にマークアップします。名前に関してはおなじみのitemprop="name"を使います。商品詳細などの説明も、名前と同じようにitemprop="description"で囲ってあげるだけでOKです。ここでポイントになるのが料金のマークアップです。itemtype="http://schema.org/Offer"を使う必要があります。価格を書く部分にはこのアイテムタイプを書いておくようにしましょう。料金には通貨の概念があるため、どの国の通貨で表記しているのかを示す必要があります。ここでいけば「\」ですね。日本円を表しているので、itemprop="priceCurrency"を使って日本通貨であることを記述します。ここで注意!「\」マークを囲ってもそれってGoogleには理解できません!文字列にしか見えてないので!そこで、「content」を利用して全世界で通用する通貨の書き方で示してあげます。それが、content="JPY"ですね。日本円は「JPY」ですが、アメリカドルだと「USD」になります。他は調べてみてください!(投げた)商品をマークアップ出来たところで、上ではマークアップしなかった評価部分をマークアップしてみましょう。評価はいろいろな形がありますが、大抵は100点や10点中何点。☆を使って5段階評価などが有名ですね。Googleも☆評価を基準に考えているようで、スニペットには☆で表示されることがほとんどです。マークアップしたのがこちら。itemprop="ratingCount">120</span>件</li></ul>評価を示すプロパティはitemprop="aggregateRating"です。評価に関してはitemtype="http://schema.org/AggregateRating"で記述をしなければいけないので、それも書いておきましょう。商品に対する評価が今回は☆5段階評価のうち4.5となっています。(すばらしい商品だ!)これをitemprop="ratingValue"で囲むことで評価の数値を知らせることが出来ます。ここで一つ注意したいのが、これだけでは「何点中の4.5なのか」がわからないことです。「1~5の評価の中で」という情報を下記を使って追加することが出来ます。...最高何点なの?これをmeta情報を使って入れておけば、問題なく評価が反映されます。今回いれていないのか。それは省略した時のデフォルト値が1~5だからです。書かなくてもいいのなら省略します!では、最後にマークアップするのがレビュー部分ですね!レビューはいくつも投稿されるものだと思いますが、その一つ一つにマークアップする必要があります。1個だけやってみましょう。class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。</div></div>ううむ、どうやらこの人はあんまり満足いかなかったようですね。レビューのプロパティはitemprop="review"です。itemtype="http://schema.org/Review"のアイテムを使う必要があるので、記述しておきます。☆の数を記入しましょう。これは先程お話した評価と全く同じ方法でマークアップでOK!しかし困ったことに今回は☆が記入してあるだけで、数値がありません。そんな時はmetaタグを使ってcontentで数字を伝えましょう。次に、投稿をしてくれた人の名前をマークアップします。著者、にあたるのでプロパティはitemprop="author"です。itemtype="http://schema.org/Person">を使って示しときます。投稿時間はitemprop="datePublished"です。時間、日時、というのはやっぱり全国共通で決めている書き方で書かないとGoogleには伝わりません。それもそうですね、日本では6月2日の午後1時で通じますが、コンピュータが見たら「???」ってなっちゃいますね。そこで、全国人間もコンピュータも共通の書き方で記述をします。ISO8601という記述になりますので詳しくは調べてみてください!(二回目)最後がレビュー本体である、本文です。これはitemprop="reviewBody"のプロパティです。上記を全て詰め込んだ完成の形を見てみましょう。今回は長いので、HTML化したものを載せます。itemprop="description"><p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。プロも使用している本格機材で美味しいコーヒーを飲みましょう。ろ過布を無料で5枚おつけしています。class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。class="text">初めて使いましたがコーヒーのコクが引き立ち美味しく淹れられました。</div></div></div></div>ちなみに、構造化データのテストツールも難なくクリアしました~!このツールではスニペットにどこが反映されるのかプレビューが見えるのですが、今回マークアップしたところがしっかりと出ていました。いかがでしたか?今回3回に分けてやってきた構造化データマークアップですが、この3つは非常によく使われるマークアップのように思います。他への応用も効きますし、ぜひ覚えてみてください。ん~次はこれをJSON-LDでやってみたいですね~。JSON-LDで商品レビューをマークアップしたいのですが、わからないことがあるので質問させてください。microdataでは、レビューに☆を使用して評価を表し、数値情報をmetaタグを使用して細くしていると思います。これはJSONでも可能でしょうか??たとえば、goodとbadの二段階評価をマークアップしたいのですが、可能なのかどうか、また記述方法がわからなく困っています。おわかりでしたら教えていただきたいなと思っています。初めまして、コメントありがとうございます!早速ご質問内容のJSON-LDでのマークアップについてです。レビューなどの☆評価ですが、こちらはもちろんJSON-LDでもマークアップ可能です。>goodとbadの二段階評価こちらもマークアップ可能ですが、思っているような形でのマークアップは厳しいかもしれません...。いうのも、schema.orgマークアップしたものはGoogleの検索結果、スニペット部分に表示されますが、どうしても5段階の☆評価で表示されてしまいます。スニペット表示に関しては、good、badでの表示は出来ないかと思われます。マークアップすることでGoogleにその意味を伝えることも出来ますし、意味はあるのでマークアップ方法も記載させていただきますね。どのような部分に追加するかわかりませんので一般的なレビューについている評価で例を出します。“Rating”,→こちらが評価を表す記述です。“1”→bestが最大評価の値、worstが最低評価の値です。good、badだと二段階なのでこれでいけるのではないでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。