すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

Googleの検索結果に使われる「リッチカード」を用意する

Search Consoleに何か増えていますね。
リッチカード という項目です。

リッチカード

 

リッチカードって何?

元々、リッチスニペットと呼ばれていたものを検索結果のカード表示として表示できるやつ。くらいの認識で良いと思います。
よくある表示が、買い物サイトのレビュー数と、☆等で表示されているレーティングの、アレです。

リッチカードのサンプル

 

サクッと作ってみましょう。

 

コードのサンプル

ササっと出します。
今回は「みかん」の作り方です。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "みかん",
  "author": "肌色",
  "image": "http://cdn.mogile.archive.st-hatena.com/v1/image/psne/302454656517893195.png",
  "description": "おいしいみかんを食べます。",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.2",
    "reviewCount": "65535",
    "bestRating": "5",
    "worstRating": "1"
  },
  "prepTime": "PT1M",
  "totalTime": "PT15M20S",
  "recipeYield": "1",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "45 kcal",
    "fatContent": "0.03 g",
    "carbohydrateContent": "8.63 g",
    "cholesterolContent": "- mg",
    "fiberContent": "0.3 g",
    "proteinContent": "0.53 g",
    "saturatedFatContent": "0.01 g",
    "servingSize": "1個当たり",
    "sodiumContent": "0.75 mg",
    "sugarContent": "- g",
    "transFatContent": "- g"
  },
  "recipeIngredient": [
    "みかんの木",
    "かご",
    "肌色1名"
  ],
  "recipeInstructions": [
    "木からみかんをもぎます",
    "かごに盛ります",
    "皮を剥きます",
    "食べます",
    "おいしい!!!!!!!!!!!!!"
   ]
}
</script>

 

JSON-LDに対応していますので、ささっと構造化データを作りましょう。

今回はレシピなので、成分表示系の語彙が必要になります。

schema.org

英語はちょっと。という方は、日本語翻訳を通すとなんとなく分かると思います。

※テストデータの数値は以下のサイトからお借りしました。

calorie.slism.jp

 

構造化テストツールで確認ができます。

 

プレビューで確認

プレビューをクリックすると、

リッチカードのプレビュー
リッチカードのプレビューが表示されます。良かったですね。

 

はてなブログではどうやって使うか

レシピカードを表示させるためには、記事ごとにHTML編集などで埋め込めば良いと思います。実際に、このエントリーに埋め込みをしてあります。

構造化データ テストツール

 

実際の検索結果表示を見る(Google検索)

 

レシピ系のブログを書いている方は、参考にすると良いかと思います。

簡単にリッチカードを作る事ができるやつ の需要があるのかを聞いてみたいところです。(需要が相当ありそう という事であれば、作ります。)

 

 

(今のところ、個人的に使いどころが無いかな と思った熊やつ)

NEW リズムでともだち こぐまのトンピー ぬいぐるみ