acokikoy's notes

最近気になる=[NoCode, Shopify], I am..=[Python, ウクレレ, マニュアル車, CMS] LoveなWebディレクター

Recipe コンテンツの構造化データ仕様メモ

レシピコンテンツに埋め込む構造化データの仕様についての覚え書き。

レシピコンテンツに書く構造化データ(Structured Data)について

ウェブページにセマンティックな構造化データを付加してやると、Googleがコンテンツを正しく理解するのを助け、帰結として Googleの検索ギャラリーにあるような各種のリッチな検索結果に表示される一助となる。

レシピコンテンツに関して、構造化データをJSON-LD で書く仕様について調べる機会があったのでまとめを残す。
情報元は、Google検索ウェブ デベロッパー ガイド。

developers.google.com

構造化データ化で得られるGoogle検索結果のメリット

Googleの検索結果の次のような場所に使われる(確約ではない)。 - レシピのリッチリザルト - リッチリザルトのカルーセル - AMP - 画像検索結果に「レシピ」バッジがつく - Google アシスタントでレシピ案内ができる - (他サイト分と同居でなく)自サイト専用のカルーセルに表示される

image image

構造化データ テストツールでデータの状態を確認できる

Google 構造化データ テストツール
https://search.google.com/structured-data/testing-tool/u/0/?authuser=0

例1: cookpadのレシピページは JSON-LDのデータが埋め込まれていた。

cookpadのレシピ<塩オリーブオイルトースト> の構造化データ↓
https://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Fcookpad.com%2Frecipe%2F4214215

例2: 楽天レシピは Microdata のデータが入っていた。

楽天レシピ<ふんわり簡単 ホットケーキ♪>の構造化データ↓
https://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Frecipe.rakuten.co.jp%2Frecipe%2F1540020000%2F

JSON-LDは <script> タグ内に書いてhead部分に書くことが多い。
Microdata は HTML タグ属性を使用して、HTMLコンテンツ内にデータを埋め込む形式(下記例の itemprop="name"部分)。

<h1 itemprop="name">ふんわり簡単 ホットケーキ♪ レシピ・作り方</h1>

レシピ一覧ページ(アーカイブページ)に書く構造化データ

カルーセル  |  Google 検索デベロッパー ガイド  |  Google Developers

ホスト固有のリストに表示できるようにするには

  • ItemList 構造化データをレシピ一覧に書く
  • 全レシピ一覧ページをサイトに含める必要がある

サンプルコード

# itemListElement: 必須要素  
#     - @type: ListItem  
#     - posizion: 通し番号  
#     - url: 詳細ページのURL  

<script type="application/ld+json">
{
    "@context":"https://schema.org",
    "@type":"ItemList",
    "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"http://example.com/coffee_cake.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/apple_pie.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://example.com/blueberry-pie.html"
        }
    ]
}
</script>

レシピ詳細ページに書く構造化データ

Recipe構造化データを詳細ページに書く

レシピ  |  Google 検索デベロッパー ガイド  |  Google Developers

必須プロパティ

  • image: ファイルURL。複数ある時はリストで列挙
  • name: レシピ名

推奨プロパティ(今回出力できる要素)

Googleが推奨するプロパティのうち、今回適用予定のサイトで出力する要素

  • datePublished: レシピ公開日 例: "2018-03-10"
  • description: レシピ要約
  • totalTime: 調理時間(ISO 8601形式)
    • 例: "totalTime": "PT3M",
    • 書式: PnYnMnDTnHnMnS -- 時間長
  • recipeYield: レシピの分量 例:4人分
  • nutrition.calories: 一人分のカロリー数
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      }
  • recipeIngredient: 材料, リスト形式
      "recipeIngredient": [
        "2 cups of pineapple juice",
        "5/8 cup cream of coconut",
        "ice"
      ],
  • keywords: レシピに関するキーワード。季節。イベントなど。
  • recipeInstructions
    #ステップに小分けできない場合
        "recipeInstructions": [
              "In large bowl, gently mix filling 
               ほにゃらら"
        ],
    #ステップに小分けできる場合
        "recipeInstructions": [
          {
            "@type": "HowToStep",
            "text": "Heat oven to 425°F."
          }, ...
        }

サンプルコード

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "冷凍パイシートとレンジで作るアップルパイ",
  "image": [
  "https://example.com/photos/1x1/photo.jpg",
  "https://example.com/photos/4x3/photo.jpg",
  "https://example.com/photos/16x9/photo.jpg"
  ],
  "datePublished": "2020-03-10",
  "description": "初めてでも安心! 基本のアップルパイ",
  "totalTime": "PT3M",
  "keywords": "アップルパイ, 冷凍パイシート, 電子レンジ, スイーツ",
  "recipeYield": "直径18cmのパイ1枚分",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "120 calories"
  },
  "recipeIngredient": [
    "冷凍パイシート 2枚(20cm×20cm)",
    "りんご 大1個(約400g)",
    "卵黄 1個分",
    "砂糖 大さじ2",
    "レモン汁 小さじ1",
    "バター 10g"
  ],
  "recipeInstructions": [
    "冷凍パイシートは冷蔵庫で30分(または室温で10分)解凍する。りんごは8等分のくし形切りにして横薄切りにする。耐熱容器にりんご、砂糖、レモン汁、バターを入れてラップをかけ、レンジで7分加熱する。全体を混ぜ、ラップをはずして5分加熱し、冷ます。。。。"
  ]
}
</script>

推奨プロパティ(今回は含めない要素)

※以下もGoogle推奨プロパティだが、今回自分が適用予定のサイトでは出力が難しいので見送る要素

  • aggregateRating: レビュースコア
  • author
    "author": {
        "@type": "Person",
        "name": "Mary Stone"
    },
  • 調理時間: prepTime(準備時間)とcookTime(調理時間)の組み合わせでの表現も可能。今回のサイトでは、分けてデータを持っていないため、前述の totalTime のみとする。
  • 今回のサイトでは、キーワード的なデータは持っているが、次の3つに仕分けが難しいので見送り。
    • Tag: recipeCategory または recipeCuisine指定タグを含めるのは非推奨
    • recipeCategory: レシピの食事やコースの種類。例: 「夕食」、「前菜」、「デザート、スナック」
    • recipeCuisine: 地域 例: 「フランス」、「地中海」
  • video: 動画