Edited at

Google リッチカードの導入

More than 1 year has passed since last update.


リッチカードとは?


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


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

rich-result-evolution-800x450.png

参照先画像


したいこと

検索結果で、各記事の表示をリッチカードで表示させたい

例:カレーライスのレシピ記事、 肉じゃがのレシピ記事。。。


導入手順


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以外にも、PersonEvent。。。などあります。これは、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内のコードを、作成したコードに置き換えて、テスト結果を確認する

※警告は、推奨フィールドであって、値がなければ指定しなくても良い

test.png


2-2

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

tsa.png


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 ←スピーカーの方の髪型がすごく気になる。