レシピ用リッチリザルト構造化データの作成方法！SEO対策

最近SEO対策で有効とされているリッチリザルト構造化データですが、レシピ用は別に用意されています！というわけで、ここではレシピ用のリッチリザルト構造化データの作成方法について解説します！

本記事の内容

本記事では、レシピ用のリッチリザルトの作成方法について解説したいと思います。なぜレシピだけ別なんでしょう？それは、Googleポリシーを考えてみるとすぐにわかります。Googleは、ユーザビリティの向上を目指しています。レシピだけ構造化データの書き方が違うということは、つまり「レシピを検索する人」が多いから、その検索結果を適切にすることが、ユーザビリティを大幅に高めるのだと思います。これも、慣れればコピペを多用していけるので、見てみましょう！

目的：レシピ用のリッチリザルトを作成する
レシピ用のリッチリザルト構造化データの雛形をコピーする
自分のサイトでリッチリザルト構造化データを作ってみる
Googleのリッチリザルト確認用サイトで確認する
まとめ

Q&A形式のリッチリザルトの作り方を知りたい人はこちらへ

関連記事Q&Aリッチリザルトの作成方法！Googleポリシー重視のSEO対策

2021.01.15

How-to形式のリッチリザルトの作り方を知りたい人はこちらへ

関連記事標準的なHow-toリッチリザルト構造化データの作成方法！SEO対策

2021.01.15

１．目的：レシピ用のリッチリザルトを作成する

ここでは、以下のような「レシピ用のリッチリザルト」を作成したいと思います。

携帯だと、こんな感じの表示になります。

以下に示すレシピ用のリッチリザルト構造化データを利用すると、そんなに大変ではないので是非やってみましょう。

注意点：

レシピ用のリッチリザルト構造化データは、１ページに１つです。１ページに複数のレシピが含まれていることのないようにしましょう！

２．レシピ用のリッチリザルト構造化データの雛形をコピーする

こちらがレシピ用のリッチリザルト構造化データ雛形です。

ここでは、「検索にのみ表示されるレシピ」の雛形を使います。

それ以外にも、Googleアシスタントでのガイド付き機能に対応している書き方もありますが、すこし項目が追加されるので、標準的な検索で表示される場合の説明とします。

詳しくは、「GoogleのSEOサイトーレシピを Google のインデックスに登録する」をみてください。

この構造化データの導入はちょっと手間がかかりますが、慣れれば作業自体はコピペが多用されるので実は簡単です！

    <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"
      ],
      "author": {
        "@type": "Person",
        "name": "レシピの作成者の名前"
      },
      "datePublished": "2018-03-10",
      "description": "レシピの概要",
      "recipeCuisine": "American",
      "prepTime": "PT1M",
      "cookTime": "PT2M",
      "totalTime": "PT3M",
      "keywords": "non-alcoholic",
      "recipeYield": "1 serving",
      "recipeCategory": "Drink",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "牛乳　２カップ",
        "バニラアイスクリーム　100g",
        "ice"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "牛乳２カップとバニラアイス50gを混ぜて、滑らかになるまで混ぜます"
        },
        {
          "@type": "HowToStep",
          "text": "グラスに、入れます"
        },
        {
          "@type": "HowToStep",
          "text": "のこりのバニラアイスを上に載せます"
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to make a Party Coffee Cake",
        "description": "This is how you make a Party Coffee Cake.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>

それでは、それぞれを詳しく見ていきましょう！

{
“@context”: “https://schema.org/”,
“@type”: “Recipe”,
“name”: “ここにレシピの名前が来ます“,
“image”: [
“https://example.com/photos/photo1.jpg“,
“https://example.com/photos/photo2.jpg“,
“https://example.com/photos/photo3.jpg“
],
“author”: {
“@type”: “Person”,
“name”: “レシピの作成者の名前“
},

まずこの部分です。変更すべきなのは以下の部分です。

name: レシピの名前を入れます。たとえば、「ベトナムコーヒーの入れ方」など。
image: 完成した料理の画像を入れます。
- 適切な画像として以下のような指定があります。アスペクト比が 16×9、4×3、1×1とする。
- 解像度は、幅と高さをかけて 50,000 ピクセル以上とする。
- 画像は複数指定する
name: レシピの作成者の名前を入れます。

“datePublished”: “2018-03-10“,
“description”: “レシピの概要“,
“recipeCuisine”: “American“,
“prepTime”: “PT1M“,
“cookTime”: “PT2M“,
“totalTime”: “PT3M“,
“keywords”: “non-alcoholic“,
“recipeYield”: “1 serving“,
“recipeCategory”: “Drink“,

次に、レシピの基本データです。

datePublished:レシピが公開された日付です。
- YYYY-MM-DDの形式で入力します。
description:レシピの概要を入力します。
recipeCuisine:レシピに関連付けられている地域を入力します。
- たとえば、「日本」、「地中海」、「アメリカ」などです。
prepTime:調理の準備にかかる時間です。
- ISO8601形式での入力です。かかった時間してはP指定のYMD年月日、T指定のHMS時間分秒の順となります。例えば、PY1T4Sは、１年４秒のこと、PT3Mは３分のことです。
- cookTime と組み合わせて使用します。
cookTime:実際に調理するのにかかる時間です。
- 上記同様にISO8601形式での入力です。
- prepTime と組み合わせて使用します。
totalTime:
- 上記同様にISO8601形式での入力です。
keywords:季節、行事、その他なんでも必要なキーワードを入力します。
- カンマで区切ること（例：”keywords”: “winter apple pie, nutmeg crust”）
- dessert, AmericanなどのrecipeCategory または recipeCuisineなどの他で指定するワードは使用するのはやめましょう。（非推奨とされています）
recipeYield: このレシピで作る料理の分量を（何人分か）を数字で指定します。
recipeCategory:レシピの食事のタイプ、コース、種類を入力します。
- 例）夕食、メインコース、デザート、軽食などです。

“nutrition”: {
“@type”: “NutritionInformation”,
“calories”: “120 calories”
},

次はカロリー表示です！レシピ作成のは重要項目ですね！

calories:レシピのカロリーを入力します。

“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “5“,
“ratingCount”: “18“
},

ここは、クチコミ抜粋としてレビューサイトからのレビューや評価を記入します。

ratingValue: 口コミの実際の評価を入力します。（たいて１−５の間の数値となります）
ratingCount: 口コミの人数を入力します。

“recipeIngredient”: [
“牛乳　２カップ“,
“バニラアイスクリーム　100g“,
“ice“
],

次に、使用する材料です。

recipeIngredient: 材料を記述します。（ひとつずつ入れましょう）

“recipeInstructions”: [
{
“@type”: “HowToStep”,
“text”: “牛乳２カップとバニラアイス50gを混ぜて、滑らかになるまで混ぜます“
},
{
“@type”: “HowToStep”,
“text”: “グラスに、入れます“
},
{
“@type”: “HowToStep”,
“text”: “のこりのバニラアイスを上に載せます“
}
],

次に、レシピの具体的なステップとなります。通常のWEBサイト上に載せているレシピの手順に沿ってある程度まとめて手順を示すと良いと思います。

text: 具体的な手順を端的にわかりやすく書いていきます。

意識して欲しいのは、このレシピをGoogleアシスタントが話すことを想定してください。自分が料理を作っているときに、どういったステップで話してくれるとわかりやすいのか考えると、どういった文章が良いかわかります。

STEPを増やすとき

以下の部分を増やしていきます。注意は、ユーザー第一なので、とにかく適切な分量のみにすることです。

-------------------ここを増やす
       {
"@type": "HowToStep",
"text": "グラスに、入れます"
},
--------------------ここまで

“video”: {
“@type”: “VideoObject”,
“name”: “How to make a Party Coffee Cake“,
“description”: “This is how you make a Party Coffee Cake.“,
“thumbnailUrl”: [
“https://example.com/photos/1×1/photo.jpg“,
“https://example.com/photos/4×3/photo.jpg“,
“https://example.com/photos/16×9/photo.jpg“
],
“contentUrl”: “http://www.example.com/video123.mp4“,
“embedUrl”: “http://www.example.com/videoplayer?video=123“,
“uploadDate”: “2018-02-05T08:00:00+08:00“,
“duration”: “PT1M33S“,
“interactionStatistic”: {
“@type”: “InteractionCounter”,
“interactionType”: { “@type”: “http://schema.org/WatchAction” },
“userInteractionCount”: 2347
},
“expires”: “2019-02-05T08:00:00+08:00“
}

次に、レシピ用の動画がある場合に記述する項目です。

結構入力項目多いですね！動画がない時は、こちらは削除しても構いません。

name:動画の名前を入力します。
description:動画の概要を入力します。
thumbnailUrl:動画のサムネイルのURLを入力します。
contentUrl:動画が保存されているURLを入力します。
embedUrl: 動画の埋め込みコードを入力します。
- 例）http://www.example.com/videoplayer?video=123
uploadDate: 動画をアップロードした日付を入力します。
- ISO8061に沿った日付で入力します。
- 例）2018-02-05T08:00:00+08:00
duration:
- ISO8061に沿った日付で入力します。
- 例）PT1M33S　１時間33分の場合
expires:動画の有効期限の日付を入力します。
- ISO8061に沿った日付で入力します。
- 例）2018-02-05T08:00:00+08:00