検索結果にレシピの写真やレビューの評価星を表示する。Googleのリッチスニペットを利用したマークアップのやり方




このように、Googleの検索結果にあなたのブログやサイトが表示された場合に、料理の写真やレビューの★★★★☆マーク(評価星)を掲載する機能、リッチスニペットの説明です。

楽天市場やAmazonの商品、クックパッドのレシピなどが検索結果に表示されたときに見かける光景ですよね。料理のレシピなどを投稿してるブログの場合は、これを利用するとGoogleのレシピ検索に登録されることもあるようです。

それでは作業の流れを見ていきましょう。




1.リッチスニペットの利用をGoogleに申請する

リッチスニペットが利用できるのは、レシピ、レビュー、人物、動画、パンくずリスト、商品、イベントなどのジャンルです。それぞれのジャンルでブログやサイトを構成しているのであれば、登録してみた方がいいかもしれません。

リッチスニペットを利用するには、予めGoogleに申請をする必要があります。なんとなく興味が湧いたら、申請フォームから申請をしてみましょう。




2.ページをマークアップする

マークアップは、ページの内容を検索エンジンに理解させるために行います。

プレミアムクラッカーの写真素材
マークアップの方法としては、microdata、microformats、RDFaを利用して、いずれかのHTMLタグで記事の内容を囲むだけです。

例えばあなたがmicroformatsを利用して、クラッカーのレビューをするような場合は、下記のようなHTMLタグで内容を囲みます。


※赤字部分を編集します

<div class="hreview">
<span class="item">
<span class="fn">プレミアムクラッカー</span>
</span>
レビュー: <span class="reviewer">チキチキ</span>、
<span class="dtreviewed">
9 月 15 日<span class="value-title" title="2011-09-15"></span>
</span>.
<span class="summary">ナビスコのプレミアムクラッカーです</span>
<span class="description">サクッとした歯ごたえと絶妙な塩加減でとても美味しかったです。具材を乗せてもそのままでも満足できるクラッカーでした (oゝω ・o)b</span>

評価:
<span class="rating">4.5</span>
</div>

ペペロンチーノの写真素材

同様に料理のレシピをマークアップするには、以下のように記述します。

尚、カロリーや準備時間など、すべての要素を書かなくても問題ないようですが、当然外した要素は検索結果には表示されません。

※表示サンプル
レシピマークアップのサンプル


※赤字部分を編集します

<div class="hrecipe">
<span class="item">
<h1 class="fn">
こんにゃくでペペロンチーノ</h1>
</span>
<img class="photo" src="料理の写真のURL" />
作成: <span class="author">チキチキ</span>
公開日: <span class="published">2011 年 9 月 15 日<span class="value-title" title="2011-9-15"></span></span>
<span class="summary">こんにゃくで作ったペペロンチーノです</span>
<span class="review hreview-aggregate">
<span class="rating">
総合評価: <span class="average">4.5</span>
(<span class="count">1</span> 件のレビュー)
</span>
</span>
準備時間: <span class="prepTime">3 分<span class="value-title" title="PT3M"></span> </span>
調理時間: <span class="cookTime">10 分<span class="value-title" title="PT10M"></span> </span>
合計調理時間: <span class="duration">13 分<span class="value-title" title="PT13M"></span> </span>
分量: <span class="yield">1人前 </span>
<span class="nutrition">
1 人分: <span class="servingsize">400g </span>
1 食あたりのカロリー: <span class="calories">50 </span>
1 食あたりの脂質: <span class="fat">不明 </span>
</span>

材料:
<span class="ingredient">
<span class="name">こんにゃく </span> :
<span class="amount">350g </span>
</span>
<span class="ingredient">
<span class="name">チキン </span> :
<span class="amount">40g </span>
</span>

作り方:
<span class="instructions">
1. こんにゃくを炒めます
2. チキンを切ります
...
</span></div>


尚、これについては用語なども含めてGoogleウェブマスターツールにより詳しい説明がありますので、そちらで確認してみてください。

【ウェブマスターツール】 リッチスニペットと構造化マークアップ



3.マークアップをテストする


Web上に公開済みのページやブログ記事などであれば、マークアップするのは新規のページでも過去のページでも構いません。

マークアップが完了したら、下記サイトでURLを入力して表示のテストをします。
注意:グーグル検索で何度も自分で自分のサイトの表示を確認しないこと!自動化されたクリエの送信でペナルティを受けることもあるようです)

↓リッチスニペットの表示確認は必ずこれを使いましょう
テストツール(英語のみ)

リッチスニペットのテスト結果

問題なく写真や★マーク、マークアップした内容が出ていれば完了です。
(レビューの場合、写真は出ません)

尚、これはブログやサイトの運営者にとっては訪問者を増やせるかもしれない機能ですが、マークアップしたからと言って必ずしも写真や評価星が検索結果に表示されるとは限りません。Googleいわく、「 Google 独自のアルゴリズムとポリシーに基づいてユーザーにとって有益だと判断された場合のみ表示されます」とのことです。

Sponsored Link

Sponsored Link

0 件のコメント :

コメントを投稿