Help us understand the problem. What is going on with this article?

Google リッチカードの導入

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

ko8@github
駆け出し雑魚プログラマー ”習うより慣れろ” 
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away