Google リッチカードの導入

リッチカードとは？

リッチスニペットを発展させたもので、より”ビジュアル”な検索結果を提供します。まずレシピと動画を対象に米Googleで提供が始まりました

検索結果に表示された際に、テキストよりもリッチカードでの表示の方がクリックされるよ！？という話。下の画像を見ても、同じ検索結果ならカード型をクリックしたくなるはず。

※参照先画像

したいこと

検索結果で、各記事の表示をリッチカードで表示させたい
例：カレーライスのレシピ記事、　肉じゃがのレシピ記事。。。

導入手順

1、構造化データでのマークアップ

できたコード

<script type="application/ld+json">
　　{
　　　　"@context": "http://schema.org/",
　　　　"@type": "Recipe",
　　　　"url": "#{www_test_url(@test)}",
　 　"name": "#{@test.name}",
　 　"image": "#{@test.image}"
　　}
</script>

1-1

"@context": "http://schema.org/",

"http://schema.org" での定義に従って記述しますよという宣言をする。
例:検索エンジン（コンピュータ）に対して、会話をする言語は「英語」で話しましょうと伝えているイメージ。

1-2

"@type": "Recipe"

typeで何について表現するのかを指定します。Recipe以外にも、Person、Event。。。などあります。これは、schema.orgが用意してくれてる各タイプのkeyにります。なので表示させたいコンテツによってタイプを選択します。

1-3

"url": "#{www_test_url(@test)}",
"name": "#{@test.name}",
"image": "#{@test.image}"

url、name、imageのkeyに対しては、変数で指定をします（@testには記事に関する各データが入ってる）

2、Googleの構造化データテストでエラーと表示結果を確認

2-1

Googleの構造化データテストで、script内のコードを、作成したコードに置き換えて、テスト結果を確認する
※警告は、推奨フィールドであって、値がなければ指定しなくても良い

2-2

プレビューボタンを押して表示を確認する

3、表示させたいページに組み込む

自分の場合は、ファイルがhamlだったので「:plain」で組み込みました。

:plain
  <script type="application/ld+json">
 　  {
　　　　    "@context": "http://schema.org/",
　　　　    "@type": "Recipe",
　　　　    "url": "#{www_test_url(@test)}",
　 　    "name": "#{@test.name}",
　 　    "image": "#{@test.image}"
　　   }
  </script>

参考記事

・http://schema.orgとは?
・構造化データとは？
・JSON-LDとは？
・Stand out in search results with Rich Cards
・Google Webmaster Tools Rich Cards　←スピーカーの方の髪型がすごく気になる。