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

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

リッチスニペット？
リッチスニペットレシピ？
どうしたら良いの？
で、WordPressではどうしたら良いの？
1. 1.ブログタイトル→レシピの名前
2. 2～4.
確認方法
検索結果への反映期間
最後に

リッチスニペット？

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

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

リッチスニペットと構造化データについて @googleウェブマスターツール
https://support.google.com/webmasters/answer/99170?hl=ja

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

検索エンジンで検索した人にこんな感じでレシピを見せることができます。

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

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

どうしたら良いの？

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

&lt;h1&gt;米麹の作り方&lt;/h1&gt;
&lt;img src=&quot;kouji.jpg&quot;&gt;
米麹を米と種麹から作ります。結構簡単にできますよ。
調理合計時間：4日

って言うのを、

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

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

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

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

写真
準備 or 調理 or 合計時間
カロリー
レビュー

リッチスニペット – レシピ @googleウェブマスターツール
https://support.google.com/webmasters/answer/173379

Microformats、RDFa、Microdataとschema.orgとリッチスニペット @Design Spice
http://design-spice.com/2012/04/19/microformat-rdfa-microdata-schema-org-rich-snippet/

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

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

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

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

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

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

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

&lt;?php if ( in_category('100') ) { echo '&lt;div class=&quot;hrecipe&quot;&gt;'; } ?&gt;
&lt;?php if ( in_category('100') ) { the_title( &quot;&lt;span class='item'&gt;&lt;h1 class='fn'&gt;&quot;, &quot;&lt;/h1&gt;&lt;/span&gt;&quot;); } else {  the_title( '&lt;h1&gt;', '&lt;/h1&gt;';} ?&gt;

tag_id=がカテゴリID

2～4.

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

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

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

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

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

&lt;?php
 if ( in_category('100') ) {
  if(has_excerpt()) {$description = get_the_excerpt();} else {$description = get_the_content();}
   echo &quot;&lt;span class='summary'&gt;&lt;span class='value-title' title='&quot; . mb_substr($description, 0, 100) . &quot;'&gt;&lt;/span&gt;&lt;/span&gt;&quot;;
   $total_time = get_post_meta($post-&gt;ID, 'total_time', true);
  if(!empty($total_time)) { echo &quot;&lt;span class='totalTime'&gt;&lt;span class='value-title' title='&quot;.$total_time.&quot;'&gt;&lt;/span&gt;&lt;/span&gt;&quot;; }
   $image_id = get_post_thumbnail_id();
   $image_url = wp_get_attachment_image_src( $image_id, 'thumbnail', false, '');
   echo &quot;&lt;span class='photo'&gt;&lt;span class='value-title' title='&quot; . $image_url[0] .&quot;'&gt;&lt;/span&gt;&lt;/span&gt;&quot;;
 }
?&gt;