構造化データマークアップをしてみよう~商品レビュー編~

さて、三回目となります今回は更に更に調子に乗って、レビューをマークアップしてみようと思います。実は、このレビューマークアップをしておきたくて始めたこのシリーズ(?)だったり。やっと大本命さんの登場です。

ということで、早速『商品とレビュー』についてマークアップをしてみます!

構造化データマークアップ実践

商品レビュー編

今回もながくなりそうなので皆さん覚悟してついてきてくださいね!!

まずはおさらい、構造化データマークアップとは!?という疑問から入る人はこちらのページを読んで下さい!
構造化データマークアップ|SEO女子コラム

それでは早速実践です。またかという感じですが今回も使うシンタックスは「Microdata」、ボキャブラリーは「schema.org」を使用します。
いつかシンタックスは別のもの使ってみたいですね~。というのは一旦置いといて、よく見る商品レビューを今回はマークアップします。☆評価みたいな数値も今回は出してみますが、これはスニペットに表示される可能性が非常に高くなるので、商品を売っている方はぜひとも実践してほしいです。

今回はECサイトでコーヒーサイフォンを売っているという体で例に上げてみましょう。コーヒーサイフォンご存じです?喫茶店で見てからつじさんは忘れられない感動を胸に持っている商品です。今回は長いのでそれっぽくタグも入れてある物を載せちゃいます。

<div id="product_content">
<h2 class="product_title">コーヒーサイフォン</h2>
<div class="price">¥7,500<span class="tax">(税込み)</span></div>
<ul class="star">
<li>☆☆☆☆☆</li> <li>平均☆4.5</li> <li>レビュー:120件</li>
</ul>
<div class="description">
<p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。
プロも使用している本格機材で美味しいコーヒーを飲みましょう。
ろ過布を無料で5枚おつけしています。</p>
</div>
<div class="review">
<p>カスタマーレビュー</p>
<div class="review_section">
<div class="star_section">☆☆★★★</div>
<div class="author">投稿者:匿名1</div>
<div class="date">投稿日:xxxx/xx/xx</div>
<div class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。</div>
</div>
<div class="review_section">
<div class="star_section">☆☆☆☆☆</div>
<div class="author">投稿者:匿名2</div>
<div class="date">投稿日:xxxx/xx/xx</div>
<div class="text">初めて使いましたがコーヒーのコクが引き立ち美味しく淹れられました。とってもオススメ。</div>
</div>
</div>
</div>

長いですね…。今回はマークアップしやすいようなタグ設計にしました。さて、ではマークアップ開始です!

まず、レビューをマークアップするにあたって大抵は
「こういう商品があって、それの評価とレビューです」
と表記するものです。なので、マークアップも同じような構造を持っています。
こういう商品です、という紹介からしなければいけないので、そこから記入しましょう。全体を「商品です」という宣言からいきましょう。

<div itemscope itemtype="http://schema.org/Product" id="product_content">
<h2 itemprop="name" class="product_title">コーヒーサイフォン</h2>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price">
<span itemprop="priceCurrency" content="JPY">¥</span><span itemprop="price" content="7500">7,500</span><span class="tax">(税込み)</span></div>
<ul class="star">
<li>☆☆☆☆☆</li> <li>平均☆4.5</li> <li>レビュー:120件</li>
</ul>
<div class="description" itemprop="description">
<p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。
プロも使用している本格機材で美味しいコーヒーを飲みましょう。
ろ過布を無料で5枚おつけしています。</p>
</div>
</div>

itemscope itemtype="http://schema.org/Product"でここから先は商品です、という宣言をします。今回は抜き出して書いてますが、この宣言でレビュー部分も全部マークアップしておく必要があるので、大枠のタグなどに設置するのがいいでしょう。
商品の基本的な情報である、名前、料金、説明もここでは一緒にマークアップします。
名前に関してはおなじみのitemprop="name"を使います。商品詳細などの説明も、名前と同じようにitemprop="description"で囲ってあげるだけでOKです。

ここでポイントになるのが料金のマークアップです。
料金はitemprop="offers"なのですが、記述はitemscope itemtype="http://schema.org/Offer"を使う必要があります。その為。価格を書く部分にはこのアイテムタイプを書いておくようにしましょう。

さてさて、料金には通貨の概念があるため、どの国の通貨で表記しているのかを示す必要があります。ここでいけば「\」ですね。日本円を表しているので、itemprop="priceCurrency"を使って日本通貨であることを記述します。
ここで注意!「\」マークを囲ってもそれってGoogleには理解できません!文字列にしか見えてないので!そこで、「content」を利用して全世界で通用する通貨の書き方で示してあげます。それが、content="JPY"ですね。
日本円は「JPY」ですが、アメリカドルだと「USD」になります。他は調べてみてください!(投げた)

商品をマークアップ出来たところで、上ではマークアップしなかった評価部分をマークアップしてみましょう。
評価はいろいろな形がありますが、大抵は100点や10点中何点。☆を使って5段階評価などが有名ですね。Googleも☆評価を基準に考えているようで、スニペットには☆で表示されることがほとんどです。
では、マークアップしたのがこちら。

<ul itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="star">
<li>☆☆☆☆☆</li>
<li>平均☆<span itemprop="ratingValue">4.5</span></li>
<li>レビュー:<span itemprop="ratingCount">120</span>件</li>
</ul>

評価を示すプロパティはitemprop="aggregateRating"です。そして評価に関してはitemtype="http://schema.org/AggregateRating"で記述をしなければいけないので、それも書いておきましょう。
商品に対する評価が今回は☆5段階評価のうち4.5となっています。(すばらしい商品だ!)これをitemprop="ratingValue"で囲むことで評価の数値を知らせることが出来ます。
ここで一つ注意したいのが、これだけでは「何点中の4.5なのか」がわからないことです。「1~5の評価の中で」という情報を下記を使って追加することが出来ます。
itemprop="worstRating" …最低何点なの?
itemprop="bestRating" …最高何点なの?
これをmeta情報を使って入れておけば、問題なく評価が反映されます。ではなぜ今回いれていないのか。それは省略した時のデフォルト値が1~5だからです。書かなくてもいいのなら省略します!

では、最後にマークアップするのがレビュー部分ですね!レビューはいくつも投稿されるものだと思いますが、その一つ一つにマークアップする必要があります。とりあえず1個だけやってみましょう。今回マークアップするのは、レビュー主、投稿された日付、評価、本文です!

<div itemprop="review" itemscope itemtype="http://schema.org/Review" class="review_section">
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><div class="star_section"><meta itemprop="ratingValue" content="2">☆☆★★★</div></span>
<div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">投稿者:
<span itemprop="name">匿名1</span></div>
<div class="date">投稿日:
<span itemprop="datePublished" content="2017-06-02">xxxx/xx/xx</span></div>
<div itemprop="reviewBody" class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。</div>
</div>

ううむ、どうやらこの人はあんまり満足いかなかったようですね。それはさておき。
レビューのプロパティはitemprop="review"です。これもitemscope itemtype="http://schema.org/Review"のアイテムを使う必要があるので、記述しておきます。
まずはレビューでの評価。☆の数を記入しましょう。これは先程お話した評価と全く同じ方法でマークアップでOK!
しかし困ったことに今回は☆が記入してあるだけで、数値がありません。そんな時はmetaタグを使ってcontentで数字を伝えましょう。

では次に、投稿をしてくれた人の名前をマークアップします。著者、にあたるのでプロパティはitemprop="author"です。著者というのは人間なので、それもちゃんとitemscope itemtype="http://schema.org/Person">を使って示しときます。
投稿時間itemprop="datePublished"です。時間、日時、というのはやっぱり全国共通で決めている書き方で書かないとGoogleには伝わりません。それもそうですね、日本では6月2日の午後1時で通じますが、コンピュータが見たら「???」ってなっちゃいますね。そこで、全国人間もコンピュータも共通の書き方で記述をします。ISO8601という記述になりますので詳しくは調べてみてください!(二回目)
最後がレビュー本体である、本文です。これはitemprop="reviewBody"のプロパティです。

さて、上記を全て詰め込んだ完成の形を見てみましょう。今回は長いので、HTML化したものを載せます。

<div itemscope itemtype="http://schema.org/Product" id="product_content">
<h2 itemprop="name" class="product_title">コーヒーサイフォン</h2>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="price">
<span itemprop="priceCurrency" content="JPY">¥</span><span itemprop="price" content="7500">7,500</span><span class="tax">(税込み)</span></div>
<ul itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="star">
<li>☆☆☆☆☆</li> <li>平均
☆<span itemprop="ratingValue">4.5</span></li> <li>レビュー:
<span itemprop="ratingCount">120</span>件</li>
</ul>
<div class="description" itemprop="description">
<p>自宅でもお手軽にサイフォンで抽出したコーヒーが飲めます。
プロも使用している本格機材で美味しいコーヒーを飲みましょう。
ろ過布を無料で5枚おつけしています。</p>
</div>
<div class="review">
<p>カスタマーレビュー</p>
<div itemprop="review" itemscope itemtype="http://schema.org/Review" class="review_section">
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><div class="star_section"><meta itemprop="ratingValue" content="2">☆☆★★★</div></span>
<div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">投稿者:
<span itemprop="name">匿名1</span></div>
<div class="date">投稿日:
<span itemprop="datePublished" content="2017-06-02">xxxx/xx/xx</span></div>
<div itemprop="reviewBody" class="text">とっても良かったのですが口が狭くてヘラを入れづらかったです。</div>
</div>
<div itemprop="review" itemscope itemtype="http://schema.org/Review" class="review_section">
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><div class="star_section"><meta itemprop="ratingValue" content="5">☆☆☆☆☆</div></span>
<div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">投稿者:
<span itemprop="name">匿名2</span></div>
<div class="date">投稿日:
<span itemprop="datePublished" content="2017-06-02">xxxx/xx/xx</span></div>
<div itemprop="reviewBody" class="text">初めて使いましたがコーヒーのコクが引き立ち美味しく淹れられました。とってもオススメ。</div>
</div>
</div>
</div>

ちなみに、構造化データのテストツールも難なくクリアしました~!このツールではスニペットにどこが反映されるのかプレビューが見えるのですが、今回マークアップしたところがしっかりと出ていました。

プレビューもできてました!

いかがでしたか?今回3回に分けてやってきた構造化データマークアップですが、この3つは非常によく使われるマークアップのように思います。他への応用も効きますし、ぜひ覚えてみてください。
ん~次はこれをJSON-LDでやってみたいですね~。言うだけならタダだと思っている!(笑)

2 thoughts on “構造化データマークアップをしてみよう~商品レビュー編~

  1. 初めまして。
    JSON-LDで商品レビューをマークアップしたいのですが、わからないことがあるので質問させてください。

    microdataでは、レビューに☆を使用して評価を表し、数値情報をmetaタグを使用して細くしていると思います。
    これはJSONでも可能でしょうか??
    たとえば、goodとbadの二段階評価をマークアップしたいのですが、可能なのかどうか、また記述方法がわからなく困っています。
    おわかりでしたら教えていただきたいなと思っています。
    よろしくお願いいたします!

    • ひまわり様

      初めまして、コメントありがとうございます!

      早速ご質問内容のJSON-LDでのマークアップについてです。

      レビューなどの☆評価ですが、こちらはもちろんJSON-LDでもマークアップ可能です。
      >goodとbadの二段階評価
      こちらもマークアップ可能ですが、思っているような形でのマークアップは厳しいかもしれません…。
      というのも、schema.orgマークアップしたものはGoogleの検索結果、スニペット部分に表示されますが、どうしても5段階の☆評価で表示されてしまいます。
      スニペット表示に関しては、good、badでの表示は出来ないかと思われます。

      ただし、マークアップすることでGoogleにその意味を伝えることも出来ますし、意味はあるのでマークアップ方法も記載させていただきますね。
      どのような部分に追加するかわかりませんので一般的なレビューについている評価で例を出します。

      “reviewRating”: {
      “@type”: “Rating”,
      “bestRating”: “2”,
      “ratingValue”: “1”,
      “worstRating”: “1”
      }

      “@type”: “Rating”,
      →こちらが評価を表す記述です。

      “bestRating”: “5”,
      “worstRating”: “1”
      →bestが最大評価の値、worstが最低評価の値です。good、badだと二段階なのでこれでいけるのではないでしょうか。

      “ratingValue”: “1”,
      →これが実際の評価数値ですね!

      調べてもらえばもちろん色々な情報が出てきますが、もし実際のサイトでの表記方法を知りたい場合はどうぞお気軽にお問い合わせでメールをお送りください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.