最近SEO対策で有効とされているリッチリザルト構造化データですが、レシピ用は別に用意されています！というわけで、ここではレシピ用のリッチリザルト構造化データの作成方法について解説します！
本記事では、レシピ用のリッチリザルトの作成方法について解説したいと思います。なぜレシピだけ別なんでしょう？それは、Googleポリシーを考えてみるとすぐにわかります。Googleは、ユーザビリティの向上を目指しています。レシピだけ構造化データの書き方が違うということは、つまり「レシピを検索する人」が多いから、その検索結果を適切にすることが、ユーザビリティを大幅に高めるのだと思います。これも、慣れればコピペを多用していけるので、見てみましょう！
ここでは、以下のような「レシピ用のリッチリザルト」を作成したいと思います。
携帯だと、こんな感じの表示になります。
以下に示すレシピ用のリッチリザルト構造化データを利用すると、そんなに大変ではないので是非やってみましょう。
レシピ用のリッチリザルト構造化データは、１ページに１つです。１ページに複数のレシピが含まれていることのないようにしましょう！
こちらがレシピ用のリッチリザルト構造化データ雛形です。
ここでは、「検索にのみ表示されるレシピ」の雛形を使います。
それ以外にも、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",
"ppTime": "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”: “レシピの作成者の名前“
},
まずこの部分です。変更すべきなのは以下の部分です。
“datePublished”: “2018-03-10“,
“description”: “レシピの概要“,
“recipeCuisine”: “American“,
“ppTime”: “PT1M“,
“cookTime”: “PT2M“,
“totalTime”: “PT3M“,
“keywords”: “non-alcoholic“,
“recipeYield”: “1 serving“,
“recipeCategory”: “Drink“,
次に、レシピの基本データです。
cookTime と組み合わせて使用します。ppTime と組み合わせて使用します。“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”: “のこりのバニラアイスを上に載せます“
}
],
次に、レシピの具体的なステップとなります。通常のWEBサイト上に載せているレシピの手順に沿ってある程度まとめて手順を示すと良いと思います。
意識して欲しいのは、このレシピをGoogleアシスタントが話すことを想定してください。自分が料理を作っているときに、どういったステップで話してくれるとわかりやすいのか考えると、どういった文章が良いかわかります。
以下の部分を増やしていきます。注意は、ユーザー第一なので、とにかく適切な分量のみにすることです。
-------------------ここを増やす
{
"@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“
}
次に、レシピ用の動画がある場合に記述する項目です。
結構入力項目多いですね！動画がない時は、こちらは削除しても構いません。
以上です。
レシピは、しっかり入力しようと思うと結構大変ですね！
得意な人は、マークアップ用のプログラムを作るという手もあるかもしれません。
それでは、試しに自分のサイトで作ってみましょう！
Q&Aと同じで、このリッチリザルトを入れる場所は、<head> 〜 </head>、<body> 〜 </body>のどちらでも大丈夫です。
ブログの場合は、記事部分にレシピが紐づくと思うので、結果的に<body> 〜 </body>部分に入ります。
実際に作ってみたら、リッチリザルト構造化データを、Googleのリッチリザルト確認用サイトで確認します。
画像がしっかりと出ているかどうか見る必要があります。
リッチリザルト確認用サイトにアクセスして、＜コード＞をクリックします。
作成したコード入力して、「コードをテスト」をクリックします。
構文に間違いがなければ、緑色で「このページはリッチリザルトの対象です」と表示されます。
結果をプレビューして、どういった表示になっているのかを確認しておきましょう。
もし、意図していない表示であった場合は、しっかりと作り直します。
こちらも確認をしておきましょう。アシスタントではどのように表示されるかです。
左側にあるタブをクリックします。
ここに、概要、食材、ステップが表示されるので記述間違いがないかチェックします。
レシピは多くの人が見るので、わかりやすいことがとにかく大事ですね。
Googleのポリシー重視の戦略を意識して、SEO的にやるのではなく、あくまでもユーザー第１の姿勢を念頭においてくださいね。
とにかくやりすぎないように！
本記事では、レシピ用のリッチリザルト構造化データの作成方法を解説しました。レシピ用はすこし入力項目がおいですね。しっかりと準備をしておいてから、やればそれほど時間がかからないとおもいます。ユーザビリティ向上を目指すGoogleポリシー重視のSEO対策としておすすめです。
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…
皆さん、こんにちは、優良な投資…