SEO関連のあれこれ：構造化データマークアップをしてみよう～商品レビュー編～

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

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

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

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

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

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

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

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

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

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も☆評価を基準に考えているようで、スニペットには☆で表示されることがほとんどです。
では、マークアップしたのがこちら。

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

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

ううむ、どうやらこの人はあんまり満足いかなかったようですね。それはさておき。
レビューのプロパティは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でやってみたいですね～。言うだけならタダだと思っている！(笑)