リッチスニペット「レシピ」で検索結果にレシピ情報を表示しよう(WordPress)

スポンサーリンク

特定の決まり事(リッチスニペット-レシピ)を守れば、レシピの種類、画像、要約文、レビューの星、準備や調理にかかる時間、カロリー、作り方、材料なんかをgoogleの検索結果に出すことができます。

スポンサーリンク

リッチスニペット?

Web検索結果ページでテキスト以外の情報を出して、ユーザーに便利に使って貰おう的な機能です。WordPress界隈ではパンくずリストの話が良く出てますが、googleではそれ以外にもレビュー、人物、商品、レシピ、イベント、音楽などがあります。

で、今回はその中の「レシピ」を使う話です。

リッチスニペットレシピ ?

検索エンジンで検索した人にこんな感じでレシピを見せることができます。
スクリーンショット_071814_033047_PM

レシピの種類、画像、要約文、レビューの星、準備や調理にかかる時間、カロリー、作り方、材料なんかを出すことができます。

当ブログでは技術ネタよりもレシピネタが多く検索&閲覧されています。その関係もあって、「カテゴリが食」に関することだったら、このリッチスニペットを使うようにしてみたいと思います。

どうしたら良いの?

googleのウェブマスターツールのヘルプに、そこそこ易しく日本語で書かれたドキュメントがあるので、そこを見ていただくのが一番正確ですが、今回は既存のコンテンツで使いやすいMicroformatsと言うルールでよろしくやってみました。

<h1>米麹の作り方</h1>
<img src="kouji.jpg">
米麹を米と種麹から作ります。結構簡単にできますよ。
調理合計時間:4日

って言うのを、

<div class="hrecipe">
 <span class="item">
  <h1 class="fn">米麹の作り方</h1>
 </span>
 <img src="kouji.jpg" class="photo">
 <span class="summary">米麹を米と種麹から作ります。結構簡単にできますよ。</span>
 <span class="totalTime">調理合計時間:4日<span class="value-title" title="P4D"></span></span>
</div>

みたいな感じで、決まったclassを付加して検索プログラムに意味が分かるようにしてあげます。

  • name(fn) レシピの名前
  • photo レシピの画像
  • summary レシピの要約文
  • totalTime(duration) 準備時間と調理時間の合計

サイトにも書いてありますが、リッチスニペットが表示されるのは2014/7月現在では下記の内少なくとも2つが指定されていなければならないため、仕方なく合計時間(totalTime)を入れました。

  1. 写真
  2. 準備 or 調理 or 合計時間
  3. カロリー
  4. レビュー

で、WordPressではどうしたら良いの?

ブログのカテゴリーが「食」の時に、

  1. ブログタイトル→レシピの名前(fn)
  2. サムネイル→レシピの画像(photo)
  3. 抜粋(discription)→レシピの要約文(summary)
  4. カスタムフィールド値(total_time)→準備時間と調理時間の合計(totalTime)

となるようにテンプレートをいじります。

1.ブログタイトル→レシピの名前

「食のカテゴリーだったら」はin_category関数を使います。カテゴリーIDはダッシュボードの投稿→カテゴリーで該当カテゴリーにあわせると下にtag_id=????ってなってるのでそれ。

例は、レシピを出したいカテゴリーが100の場合(全ての記事がレシピって場合は条件分岐は要りません)。

<?php if ( in_category('100') ) { echo '<div class="hrecipe">'; } ?>
<?php if ( in_category('100') ) { the_title( "<span class='item'><h1 class='fn'>", "</h1></span>"); } else {  the_title( '<h1>', '</h1>';} ?>
tag_id=がカテゴリID

tag_id=がカテゴリID

2~4.

品質に関するガイドラインには、

リッチ スニペットはアルゴリズムによって生成されますが、ユーザーの検索に害を及ぼす不正行為や偽装行為などが検出された場合に備え、Google では手動による対策(特定のサイトのリッチ スニペットを無効にするなど)を適用する権限を持っています。特に、次のような行為は避けてください:

  • ユーザーに一切表示されないコンテンツをマークアップする。

と書いてあるのですが、抜粋や正方形写真のURL(アイキャッチは16:9)は今運用しているデザインの中には入れにくいので、class=’value-title’でデータを入れました。

“ユーザーに一切表示されないコンテンツをマークアップする”に該当するので、良くないとは思うのですが、(デザイン的に無理矢理、要約や正方形サムネイルを入れたページを作る以外で)この方法の方が良いのでは?ってのがありましたら是非教えてください。totalTimeはカスタムフィールドの値を持って来ています。

<?php
 if ( in_category('100') ) {
  if(has_excerpt()) {$description = get_the_excerpt();} else {$description = get_the_content();}
   echo "<span class='summary'><span class='value-title' title='" . mb_substr($description, 0, 100) . "'></span></span>";
   $total_time = get_post_meta($post->ID, 'total_time', true);
  if(!empty($total_time)) { echo "<span class='totalTime'><span class='value-title' title='".$total_time."'></span></span>"; }
   $image_id = get_post_thumbnail_id();
   $image_url = wp_get_attachment_image_src( $image_id, 'thumbnail', false, '');
   echo "<span class='photo'><span class='value-title' title='" . $image_url[0] ."'></span></span>";
 }
?>
photoに長方形の写真を使うと、無理矢理正方形に縮められる

photoに長方形の写真を使うと、無理矢理正方形に縮められる

確認方法

ウェブマスター ツールの構造化データ テスト ツールってのを使います。
ここで思ってるとおり表示されてたらOK。

スクリーンショット_071814_033516_PM

スクリーンショット_071814_033533_PM

検索結果への反映期間

ウェブマスターツールの検索のデザイン→構造化データを見ると3,4日くらいでhrecipeのページ数が想定していた数になったので直ぐに反映されるのかなぁと思ったのですが、約1ヶ月かかりました。

Webマスターツールには結構直ぐに反映された

Webマスターツールには結構直ぐに反映された

リッチスニペットによる流入量UPはさほど無い的な記事を見たこともあるけど...

リッチスニペットによる流入量UPはさほど無い的な記事を見たこともあるけど…

ただ、1ヶ月後であっても全てのページでリッチスニペットが表示されるわけではありません。

下記ブログ等によると、

  • リッチスニペットの品質ガイドラインにそっていること
  • クエリとの関連性
  • クオリティ

の時、初めてリッチスニペットが表示されるとのこと。

同じようにマークアップしても品質が低いと判断されると出ない

同じようにマークアップしても品質が低いと判断されると出ない

最後に

検索結果に顔写真が載っててもクリックされる率はさほど変わらないと言うのを見た気もするけど、美味しい写真が写ってたら僕はクリックするから、やっといて損は無いと思います。
ただ、「ユーザーに一切表示されないコンテンツをマークアップする。」が気になってはいるので、良い方法をご存じの方は教えてください。

コメント

タイトルとURLをコピーしました