レシピのJSON-LDを書いてみる
レシピの構造化データを「JSON-LD」を使ってマークアップしてみよう、という趣旨の記事です。 前回「Microdata」でレシピの構造化マークアップをしましたので、続きのような内容となっております。
「リッチスニペット」と「構造化マークアップ」について調べてみる
Google Developersでは「JSON-LD」は、すべてのナレッジグラフ機能、サイトリンク検索ボックス、イベントリッチスニペット、およびレシピリッチスニペットのためにサポートされています。 としており、残りのリッチスニペットの種類とパンくずリストなどは「Microdata」や「RDFa」のを使用することをおすすめしているようです
Google is in the process of adding JSON-LD support to more markup-powered features. So far, JSON-LD is supported for all Knowledge Graph features, sitelink search boxes, Event Rich Snippets, and Recipe Rich Snippets; Google recommends the use of JSON-LD for those features. For the remaining Rich Snippets types and breadcrumbs, Google recommends the use of microdata or RDFa.
最終更新日: 7月 27, 2015
引用元：About schema.org
今回の記事の目的
- レシピの記事を検索結果にリッチに表示させたい！
- リッチに表示されたら、たくさんクリックされるかも！と期待したい
- 「JSON-LD」の記述方法を知る
こちらの画像のように、検索結果にレシピの情報を画像とともに表示させられたら、テキストだけの検索結果よりもクリックされやすいと思いませんか？ レシピ系の記事を書く時に、ちょっとした手間をかけるだけで表示ができるのなら、ぜひ試してみたいものです。
「JSON-LD」ってなに？
JSON-LDは、Linked Open Dataを記述するためのフォーマット。 Linked Dataとは、以下の引用のように、データを公開・共有するための技術の総称を言います。 このようにデータを書いたら、ウェブ上で共有できますよ！という書き方を示しているイメージです。
Linked Open Data（リンクト・オープン・データ、略名: LOD）は、ウェブ上でコンピュータ処理に適したデータを公開・共有するための技術の総称である。従来のウェブがHTML文書間のハイパーリンクによる人間のための情報空間の構築を目的としてきたことに対応して、Linked Open Dataでは構造化されたデータ同士をリンクさせることでコンピュータが利用可能な「データのウェブ」の構築を目指している。
構造化マークアップについては、以前に書いたこちらの記事も参考にしてください！
「リッチスニペット」と「構造化マークアップ」について調べてみる
記述内容
それでは、記述の内容を見てきましょう。 前回の記事でも紹介しましたが、以下は必須プロパティなので少なくとも2つを含んでおく必要があります。
- 画像
- 準備時間・調理時間・合計時間 もしくは、材料
- 栄養情報（カロリー）
- レビュー
In order for rich snippets to be shown for a recipe, the markup must contain at least two of the following:
- image
- at least one of prepTime, cookTime, totalTime, or ingredients
- nutritionInformation
- review
Examples
<script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Recipe", "name": "Grandma's Holiday Apple Pie", "image": "http://www.example.com/apple-pie.jpg", "author": { "@type":"Person", "name":"Carol Smith" }, "datePublished": "2009-11-05", "description": "This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.0", "reviewCount": "35" }, "prepTime": "PT30M", "cookTime": "PT1H", "totalTime": "PT1H30M", "recipeYield": "1 9\" pie (8 servings)", "nutrition": { "@type": "NutritionInformation", "servingSize": "1 medium slice", "calories": "250 cal", "fatContent": "12 g" }, "ingredients": [ "apples", "White sugar" ], "recipeInstructions": "1. Cut and peel apples\n 2. Mix sugar and cinnamon. Use additional sugar for tart apples.\n..." } </script>
引用した「JSON-LD」に日本語のコメントを付けていくと以下のような記述になりました。 このまま貼り付けても何の情報もないデータになってしまうので、適時情報を入力する必要があります。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "たっぷりえのきのアヒージョ",//【必須】
"image": "http://third-party.org/isalog/wp-content/uploads/2015/09/image21.jpg",//【リッチスニペットに必要】
"author": {
"@type":"Person",
"name" : "斉藤功"//レシピ作成者
},
"datePublished": "2015-09-09",
"description": "夕食の一品にも、晩酌にも合う、EXバージンオリーブオイルで作る簡単アヒージョの紹介です。",
"prepTime": "PT5M",//準備時間 30分【リッチスニペットに必要】
"cookTime": "PT5M",//調理時間 1時間【リッチスニペットに必要】
"totalTime": "PT10M",//合計調理時間 1時間30分【リッチスニペットに必要】
"recipeYield": "2人前",//何人前か
"ingredients": [
"舞茸",//材料
"エリンギ",
"自家製干えのき",
"シーフード",
"EXオリーブオイル",
"クレイジーソルト",
"ニンニク",
"パセリ"
],
"recipeInstructions": "きのこを食べやすい大きさに切る、ニンニクはスライスし、シーフードの水分をとっておく、鍋にオリーブオイルと具材を入れ火にかける、クレイジーソルトを入れて、焦がさないよう混ぜる、火がとおったらパセリをふりかける"//レシピ手順
}
</script>
このままコピー＆ペーストして、自分のレシピ情報に置き換えて使用してください。
例は実際の記事にしてみました。
上記の「JSON-LD」ではアヒージョの例を入れていますが、【リッチスニペットに必要】と書いた情報を意識して書くとよさそうです。 また、カロリーは計算が難しいので例では外しています。 「必須なプロパティは2つ」と公式にありますので、実際の運用で確認できる情報を利用するようにしましょう。 また、「AggregateRating」はレビューにあたりますが、レビューを集めていないサイトの場合は削除しても問題ないかと思います。
「画像」、「準備時間・調理時間・合計時間」、「材料」は用意できそうな項目ですので、レシピ記事を書く際にはこれからを控えておいて、構造化データを挿入してみるといいですね。
このような記述を書くことで、Googleに「レシピ情報を書いてるよ！」と伝えることができ、適切に伝えられれば前述したような検索結果の表示なる、というわけです。
クリックしやすくするために、実装したいリッチスニペット
Enabling Rich Snippets for Recipes
この表示は「Google Developers」内の「Enabling Rich Snippets for Recipes」に掲載があります。 レビューの☆の数や、画像、トータルの料理時間などの表示が出ていますね！ 画像付で表示されることで、クリックされる確率が上がりそうです。
構造化マークアップは、情報を認識してもらうための記述ですが、必ず例のような表示がされる訳ではありませんので、ご注意ください。
カスタムフィールドを使って、記事毎に「JSON-LD」を挿入する
今回紹介した構造化データですが、テンプレートで記事ID毎に条件分岐するのは大変です。 そこでカスタムフィールドを使って、「JSON-LD」を記事毎に挿入していきましょう。
カスタムフィールドに「JSON-LD」を入力
「Advanced Custom Fields」の基本的な使い方はこちらの記事を参考にしてみてください！
プラグイン「Advanced Custom Fields」を利用してカスタムフィールドを設定する
これで記事の中に構造化データを「JSON-LD」で設定することができました。 エラーチェックは「Google Developers」内の「Structured Data Testing Tool」を利用すると便利です。
まとめ
いかがでしたか？ 今回の記事では構造化データを「JSON-LD」で書いてみる、ことを紹介しました。
構造化マークアップするメリットは、「検索結果にリッチスニペットを表示できる」ということ。 冒頭の画像のように、レシピであれば、画像や調理時間などユーザーのためになる情報が表示されます。
このような表示が実現すれば、テキストだけの検索結果と比べクリックされやすくなりそうですね！ 今回はレシピについて取り上げていますが、またの機会に他の構造化データについても記事を書いてみようと思います。
これと言って新しい情報ではありませんでしたが、実際にわたしも構造化データの書き方を試していたので記事にしてみました。 レシピ系のブログやサイトを運営されている方は、ぜひ参考にしてみてください。
