食べログと価格.comから学ぶ検索結果最適化について ー SEO Tips Rich Snipets編

Pocket

photo credit: infocux Technologies via photopin cc

nanapi, Retty, リブセンス, 食べログ運営の価格.comなど現在有名になってきているサービスは、そのほとんどがSEOの強い会社です。スタートアップはお金がないですし、広告費をそこまで出せません。ECサイト、求人サイト、CGMのテキストベースメディアやテキストベースのキュレーションメディアではSEOは必須です。


皆さん既にSEO対策されていると思いますが、今回は食べログの検索結果を元に
表示回数×CTR=トラフィックのCTRの上げ方(RichSnipets)にポイントを絞って書いていきます。
フロントエンドの方々や、SEOに詳しい方々は結構前から言われているので今更感はあると思いますが、ここでは
簡単なマークアップの方法と実例、対応するとどう良いのかについて書いています。

Rich Snipets (リッチスニペット)とは

最近またGoogleの検索結果画面が変わりましたが、かなりシンプルになってほぼテキストだけになりました。
それでも当然まだ上位表示のサイトのCTRが高い訳ですが、以前から食べログの検索結果は善くも悪くも非常に目立っています。
これはRich Snipetsが使われています。
一言で言えばユーザーのために付加情報をGoogleに伝える手段

Googleの中の人によるリッチスニペットについての紹介動画

  • ユーザーのためにリッチスニペットで情報出した良いよね!
  • 検索結果でどのように表示されるのか
  • どのようなカテゴリーで表示されるのか

具体的な導入方法等は下記のURLを参考にしていただきたいですが、
microformat,microdata,RDFaを使ってコンテンツをマークアップします。
Googleウェブマスターの公式サイト参照

余談ですが、リンクの中で唐突に下記の様に書かれているのが非常に気になる所ですね。
今後はGoogleアカウントでログインするYoutubeに上がっている動画の再生回数等が多いAuthorを評価する
アルゴリズムも追加されるのでしょうかね。

Google では、動画コンテンツのマークアップも認識し、検索結果の改善に活用しています。

食べログのマークアップを検証

まずは『食べログ カフェ』で検索してみます。
カフェ・ミケランジェロ・・・なんて素敵なお店の名前なのでしょうか。
tabelog

それはさておき、このレビュー皆さんも良く見た事があると思いますが、

フロントエンドのエンジニアの方は既に詳しい方もいらっしゃいますが、
これをサイト内ではどうマークアップしているのか。
サイト内のキャプチャです。値段とレビューをどうマークアップしているのか。
tabelog2

<a href="http://tabelog.com/tokyo/A1303/A130303/13003369/dtlratings/#price_dinner" class="num"
property="v:pricerange">
¥2,000~¥2,999</a
>

参照:http://tabelog.com/tokyo/A1303/A130303/13003369/

大事なのはここですね

property="v:pricerange"

食べログはRDFaという書き方をしています。
参考:Rich Snippets and Structured Data – RDFa

大手レビューサイト価格.comのマークアップ

価格.comも同じくRich Snipets対応されています。レビュー系サイトでは表示しておかないと勿体ないですよね。

これは『Dynabook r732』で検索しているのですが、本家のToshibaのサイトが強いのですが、
その下に出ていて、レビューの所が非常に目立ちます。これなら検索結果では下位に表示されていても
CTRが上がる事は間違いないでしょう。
dinabook

価格.comの場合はこのようにカテゴリーとそれ以外のページでリッチスニペットを変えているようですね。
下の場合だと価格帯が表示されていないのが分かります。ユーザーが検索したキーワードに対して、何がインデックスされ、その時どのような表示をしたら一番クリックされ易いか、ユーザーの求めるものを提供出来るかをしっかり設計する事が大事だとわかりますね。

kakaku2

<li class="review" itemscope="" itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating">
<a class="btn" href="http://review.kakaku.com/review/K0000502760/#tab"><img src="http://img1.kakaku.k-img.com/images/itemview/item/ovBtn_review.gif" alt="dynabook R732 R732/H PR732HAAP37A71の満足度" width="77" height="11"><br><span class="stars s5"></span>
<span class="subLine"><span class="num">
<span itemprop="ratingValue">5.00</span></span>&nbsp;
<span class="sup">(<span itemprop="reviewCount">4</span>人)</span></span>
</a>
</li>

参照:http://kakaku.com/item/K0000502760/

このように非常に簡単です。
こちらはmircodataを使用していますね。

RDFaとmicrodataの違いとは

microdataとmicroformatの比較についてはこちらの記事を参照してみてください。

microdata

microdataはHTML5の仕様でHTML5のみ使用可

RDFa

XHTMLにメタデータを書く書き方
XHTMLタグ内でシンプルな属性を使用.

※仕様等に関しましては変更がなされる場合がありますのでご注意ください。

構造化データ マークアップ支援ツール

マークアップが出来ない方でも、こちらのページからURLを入力するとサンプルのHTMLが取得出来ます。
ただ、これは既存のマークアップを引き継いでないので、既存のソースに付与したい場合は書き換える必要があります。
ただし、ここからコピペして勝手に書き換えるとマークアップエンジニアorデザイナーと殴り合いになる事必須なので確認はした方が良いですね。
このサイトで試してみるとこんな感じに出力されます。
マークアップ支援ツール

データハイライター

また、マークアップ以外にもデータハイライターという方法があります。
ウェブサイトの構造化データをGoogleに伝えるというものです。
単一の~.htmlだけにデータハイライターを使用するといったことも簡単に出来ます。
上記したようなマークアップをせずに、データハイライターを使用するのに適したケースは、イベント情報を検索結果に表示したい場合なようですが、
これならマークアップを触る事なく、より良い検索結果を表示する事が出来るので非エンジニアでも対応する事が出来るでしょう。
データハイライターの使用方法についてはこちらから

データハイライターの使用が適しているケースを知りたい場合
参考:リッチ スニペットと構造化データについて

まとめ

  • 対応しても確実に表示されるわけではない
  • 2ページ以内の表示であれば確実に流入は増加する
  • 上位表示のためには意味がない

現状、まだまだ対応していないサイトが多いと思います。
たとえ検索結果に上位表示されてもクリックされなければ意味がありませんので、早めに対応して流入を増やしたい所ですね。
社内のサービスでも導入しているものがあるので次回効果をお伝えしたいと思います。

最近ではRettyのアプリからSEOにシフトして伸ばしたという記事がありましたが、
引き続きSEO等色々な視点からのグロースハックをお届けしていきます。

現場からは以上です。

LINK:
INTRODUCTION TO GOOGLE’S RICH SNIPPETS & STRUCTURED DATA
構造化データ テスト ツール
Google+ は OGP より Microdata を優先するみたい

follow us in feedly

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>