はるかのひとりごと » SEO » JSON-LDでレシピをマークアップしよう
はい、こんばんは。
鈴木はるかです。

さて今回は、少し難しいです。
でも、画期的なお話なので是非ともお付き合いくださいませ。

目次
1.リッチリザルトとは
2.検索エンジンと私たちの間で必要なこと
3.なぜJSON-LDなのか
4.レシピをマークアップしてみよう
5.絶対にやってはいけないこと

では、順番に説明していきたいと思います。

1.リッチリザルトとは

今回は、難しい用語ばかりで申し訳ないです。

まずこれを見てください。

Googleの検索結果
スニペット

よく見る検索結果ですよね。
私たちは、この①の部分をページタイトル②をスニペットと呼んでいます。
①はtitleタグという記述で出てくる所です。
アメブロやWordPressは、記事の表題部分にあたります。
その横にブログ名称が出ていますが、これはカスタマイズです(●’ᴗ’●)

さて次は②のスニペットです。
英語で、切れ端とかいう意味の「スニペット」って、どんな情報なのでしょうか?

まず、緑色でURLが出ています。
一般的なサイトでは、wwwとかから始まったりしますが、
私のサイトはHTTPS化しているのでhttpsと表示されています。

この部分の表示は、ブログのトップ画面やプロフィールなど代表的なページの時
httpsかhttpかを分かるように表示しています。
(セキュリティに気を遣っているサイトか否かを検索者に教えている)
twitterのIDが出てくる検索画面は代表画面なので、この表示です。
アメブロのトップページもこの表示です。

次を見てみましょう。

記事のページ
記事のページ

先ほどと表示が違いますね。
これは、記事のページなのでhttpsか否かよりも大事な事を表示しています。
何を表示しているかというと、
この記事が、このブログのどの位置(カテゴリー)に居るのか分かりやすく
明示しているのです。
わたしたちは、この事を「パンくずリスト」と呼んでいます。

パンくずリストは、レシピと同じように特殊な細工をしないと表示されません。
それは、後述しますね。

次を見てみましょう、日付は記事をアップロードした日時です。
その次に説明文が出ています。
これは、メタデータ(descriptions)といって記事の要約文を書くところです。
アメブロなどには、要約文を入れる所がありませんね。。゚(゚´Д`゚)゚。

WordPressであれば、このようにキッチリと説明文を載せて
検索者に必要な情報を簡潔に伝えて、クリック率が上がるような書き方もできます。

スニペットだけでも、これだけの情報とノウハウが詰まっています。

それでは、表題のリッチリザルトにいってみましょう♪

リッチリザルトの例

一目瞭然ですね。
レシピの画像が出ています(﹡ˆᴗˆ﹡)
こんなに美味しそうなケーキが、2時間で作れるなら作ってみよう!
と思わせる感じですよね♪

私があまり情報を記述してないので、調理時間しか出てませんが、
1ホールのカロリーやレビューの平均点(レビュー数)を
表示
する事も出来ます。

私は、こんな表示が出るのは「クックパッドなどの料理サイトだけ」と
つい最近まで思っていました。
でも、いまは私でも、バッチリマークアップできています♥

ということで、検索結果がリッチになったリッチリザルト、凄いですね。
レシピ以外にも、イベントや人物、会社などなどが色々な形で出てきます。

例えば、「ブッチャー沼津 営業時間」などで検索すると
大きな太字で、午前の営業時間、午後の営業時間を今日の日付を見て
Googleが答えてくれます。(アンサーボックス)

また、芸能人の名前を入れただけで右側に大画面の情報がでます。
(ナレッジグラフ)

2.検索エンジンと私たちの間で必要なこと

こんなに色々な機能が検索エンジンに搭載されていて、
ドンドン使いやすくなって、また探している情報に素早く辿りつけるようになっています。

では、我々ブロガーやサイト運営者は、どのようにしたら
このような便利機能を使えるのでしょうか?

それには、検索エンジンの仕組みを知る必要があります。
検索エンジンが、擬人化してきたと言っても、まだまだ機械です。
ですので、人間には理解できて機械には理解できないような記述では
検索エンジンと仲良く出来ません。

例えば、私が

材料:砂糖、牛乳、卵

と記述したら、人間なら材料として、砂糖と卵と牛乳が必要なのが分かります。
しかし、ロボットである検索エンジンは、これがプリンの材料である事なんて
検討も付きません。
「材料:」というのもルールらしい記述ですが
別の人が「【材料】」と記述しただけで理解できません。

サイト運営者が好き勝手記述しても、そのルールに統一性がないと
ロボットには理解できないのです。
結局、検索エンジンもサイト運営者もどちらも幸せになれません。

これを解決するためには、サイト運営者と検索エンジン双方が
納得できるような、共通のルールを作る必要があります。

検索エンジン3社(Google Yahoo Microsoft)は、これを打破すべく
新組織を立ち上げたのでした。

その組織名は、
Schema.org
といいます。(スキーマと読みます)
あなたの心の隙間、お埋めします。じゃな~~~いって^^;

仲が良いか悪いか知りませんが、検索エンジンは3社が協同して
共通のルールを定める組織を立ち上げました。

私たちサイト運営者は、これらを取り入れることにより
検索エンジンと仲良くなる事ができるのです。

検索エンジン  サイト(ブログ)運営者
akusyu_man_woman

もっと興味のある方は、私が以前書いた
検索エンジンがブログを表示できる理由
を読んでみてくださいね。

このように、検索エンジンとサイト運営者は、お互いwin-winになるように
歩み寄る必要があるのです。

3.なぜJSON-LDなのか

前章ではSchema.orgという共通の文法で記述しなければならない
…という話をしました。

実は、そのSchema.orgなのですが、記述方式が3つあるのです。

・JSON-LD
・Microdata
・RDFa

一体どれ使ったらええねん(>_<)
それぞれ、一長一短があります。
Googleが推奨しているのはJSON-LDだったりします。
ですのでJSON-LDの解説をします。

これは、13日の金曜日でチェンソーを持った男が・・・
・・・はるかちゃん、それジェイソン!
大阪の家電量販店で・・・
・・・はるかちゃん、それジョーシン!

ううう。ダレも突っ込んでくれないので一人突っ込みです(;_;)
JSON-LDは、ジェイソンでも電気屋でもありません。

では、どんな記述方式か見てみましょう。

鈴木謙一さんのサイト
【徹底解説】JSON-LDを使ったschema.orgの記述方法

凄く難しいですね(>_<)
とりあえず、引用してみます。

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Person”,
“name”: “鈴木謙一”,
“url”: “http://www.suzukikenichi.com/blog/”
}
</script>

なにやら、JavaScriptに似た記述ですよね。
それもそのはず、JSONのJはJavaScriptですからね(^O^)v

では行ごとに解説します。
@contextは、どの文法に従うかというのを示しています。
私たちが従うべきhttp://schema.orgを示しています。

@typeは、このJSON-LDの記述は「人物(person)」である事を示しています。
“name”は、人物(person)のプロパティで
「鈴木謙一」という名前を表しています。
urlは、鈴木謙一さんのサイトを指しています。

このような記述をする事により、検索エンジンに
正確な人物の名前や、サイト名を通知することができるのです。

では、なぜJSON-LDが良いのでしょうか?
その辺りを解説してみたいと思います。

JSON-LDと他二つの違いをみてみましょう。

文法表示コンテンツとマークアップの差異マークアップしたものを表示するか既存システムへの影響度
JSON-LD表示されるコンテンツとマークアップは別物である表示しない既存システムへの影響度は殆どない
Microdata表示されるコンテンツとマークアップは同一である表示する搭載するには、既存システムを大幅に改修しなければならない
RDFa表示されるコンテンツとマークアップは同一である表示する搭載するには、既存システムを大幅に改修しなければならない
情報提供者の我々として最も気になるのは、
システムに搭載するために必要な作業工数です。

作業工数が高くなる要因は様々です。
でも、比較的どのシステムにも当てはまるのは
既存のシステムに影響する修正を行う場合です。

表ではMicrodataやRDFaが、既存システムへの影響が大きいとしています。
どうしてJSON-LDが既存システムへの影響が少ないのか
実際のマークアップで見ていきましょう。

例では、私がプリンのレシピを既存のシステム(ブログ/Webサイト)に
記載していたとします。

材料:砂糖、牛乳、卵

これを各々の文法で記述したら、このようになります。

Microdataで記述
材料:<span itemprop="ingredients">砂糖</span>、<span itemprop="ingredients">牛乳</span>、<span itemprop="ingredients">卵</span>
というようにspanなどで囲ったりしなければなりません。
さらに面倒なのが、既にレシピとして記載されている場所(htmlの)に
構造化データをマークアップする必要があるのです。

これは現実的に、後から作るのは不可能に近いです。
個人サイトで適当に埋め込む程度なら問題ないですが、
レシピサイトなどでは初期から考えていないと、
大変なことになります。

ではJSON-LDでは、どうなるのでしょう?

JSON-LDで記述
"ingredients": ["砂糖","牛乳","卵"]
うわ、短くて非常に明快な文法ですね。
さらに良いことがあります。
実はこれ、ブラウザに一切表示されません。

何が良いかというと
ページのどこにこの記述をしても良いと言う事です。
つまり、Bodyに入れてもヘッダに入れてもサイドバーに入れても
正しく認識され、記述した文字はブラウザに一切表示されないのです。

私が既存のシステムに影響しないと言っているのは、この事です。

ということでJSON-LDは、既存のシステムの好きな場所にマークアップでき
また、検索エンジンにだけ情報を伝え、画面には一切表示されないという
素晴らしい仕組みだったのです。

JSON-LDの優位性が分かったところで、本題に行きたいと思います。

4.レシピをマークアップしてみよう

それでは、JSON-LDを使いレシピをマークアップする方法を説明します。

まず、以下の記述はオリジナルのままです。
これを、メモ帳などでコピーして
必要な所を編集すれば簡単にできると思います。

コピーの仕方は、黒いところをダブルクリックして
CTRL+Cキーです。
それを空のメモ帳などにCTRL+VすればOKです。
あとは情報を編集してください。
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "熊肉のメンチカツ",
  "image": "https://www.harukas.org/blog/wp-content/uploads/2018/05/Kumaniku-MenchiKatsu-Real-reproduction.jpg",
  "author" : {
  "@type": "Person",
  "name" : "鈴木 はるか",
  "sameAs" : [ 
    "https://plus.google.com/+%E9%88%B4%E6%9C%A8%E3%81%AF%E3%82%8B%E3%81%8B/posts",
    "https://twitter.com/haruka_pigg",
    "https://www.facebook.com/haruka.suzuki.94064",
    "https://haruka.amebaownd.com/"
	     ]},
  "datePublished": "2018-05-27",
  "description": "熊肉の香りの打ち消しと強調をした究極のメンチカツです。肉汁があふれ、最高のうま味を感じる仕上がりになっています。",
  "prepTime": "PT10M",
  "cookTime": "PT01H50M",
  "totalTime": "PT02H00M",
  "recipeYield": "大きめ6 個",
  "recipeCategory":"メインディッシュ",
  "recipeCuisine":"日本料理",
  "keywords":"ジビエ,猟師,熊",
  "nutrition": {
    "@type": "NutritionInformation",
    "servingSize": "1 個",
    "calories": "141.78 kcal"
    },
  "recipeingredient": [
"熊肉・・・・・・・・300g(ロース、バラ、モモ合い挽き)",
"タマネギ・・・・・・300g(微塵切り)",
"卵・・・・・・・・・・・1個",
"パン粉・・・・・・・・20g",
"五味子酒・・・・・・大さじ1(五味子/日本酒1:1を一週間漬けた物)",
"熊出汁・・・・・・・20cc(大さじ1+小さじ1)",
"塩・・・・・・・・・小さじ1",
"胡椒・・・・・・・・・・適量",
"薄力粉・・・・・・・大さじ1(卵液)",
"水・・・・・・・・・大さじ1(卵液)",
"卵・・・・・・・・・・・1個(卵液)",
"薄力粉・・・・・・・・・適量(肉だねにしっかり付けれる量50g)",
"パン粉・・・・・・・・・適量(肉だねにしっかり付けれる量50g)",
"水・・・・・・・・500cc",
"熊の骨、スジ・・・・100g(無ければ肉)",
"ニンジン・・・・・・150g(乱切り)",
"タマネギ・・・・・・100g(乱切り)",
"セロリ・・・・・・・・・1本(乱切り)",
"ネギの芯・・・・・・・・1本(乱切り)",
"ニンニク・・・・・・・・1片",
"タマネギ・・・・・・・50g(微塵切り)",
"ニンニク・・・・・・・・半片(微塵切り)",
"バター・・・・・・・・10g",
"キハダ蜂蜜・・・・・大さじ3",
"バルサミコ酢・・・・大さじ2",
"五味子酒・・・・・・大さじ2",
"熊出汁・・・・・・・80cc",
"塩・・・・・・・・・・・適量"
  ],
  "recipeInstructions": [
   {"@type": "HowToStep","text": 
"準備 フォン・ド・ウルスは、できたら前日以前に作っておく。ここでは、時短レシピの紹介。野菜を、それぞれのパート毎の切り方と量を切っておく。熊肉は、フードプロセッサーなどで粉砕する。短時間で粗挽きにする。"},
   {"@type": "HowToStep","text": 
"熊出汁(フォン・ド・ウルス)を作る 熊出汁の材料をすべて圧力鍋に入れる。強火で加熱し、沸騰したらアクを取る。アクが出きったら、蓋を閉めて蒸気が出だして中火で30分加熱する。火を止め圧力が下がったら蓋を開け静かに綿(キッチンペーパー)などで濾す。濾した液が100cc程度になるまで別の鍋で煮詰める。アクが出た場合丁寧にとる。100CCになったら完成。空いた時間に卵液など作っておく。"},
   {"@type": "HowToStep","text": 
"蜂蜜ソースを作る タマネギ、ニンニクをクタクタの飴色になるまで弱火で炒める。別のフライパンにバター
と蜂蜜を入れ、中火で加熱する。泡が出てきて沸騰するが、そのまま触らずに加熱すると、泡が小さくなり、着色が始まる。キャラメルクレール(綺麗な飴色)程度まで色が付いたら、バルサミコ酢をハネに注意して入れる。木べらなどで良くそげ落とす。タマネギとニンニクを炒めた物を加え、五味子酒、熊出汁を入れ、タマネギを溶かす。タマネギがある程度溶けたら、裏ごししてソースの完成。"},
   {"@type": "HowToStep","text": 
"揚げる準備をする 肉と野菜を合わせると水分が出始めるため、すぐに揚げれるように準備して行う。揚げ油は160度にセットする。お皿を3つ用意し、揚げ衣の卵液、薄力粉、パン粉をそれぞれ入れる。卵液は、薄力粉と水を小型の泡立て器で混ぜ、卵を入れる。"},
   {"@type": "HowToStep","text": 
"肉だねを作る 挽いておいた熊肉とその他の肉だねの材料をボールにすべて入れる。全体に味のムラが出来ないように丁寧に混ぜる。粘りが出来たら6等分して揚げに入る。"},
   {"@type": "HowToStep","text": 
"揚げる 肉だねの空気を抜く様にまとめ、肉だね→薄力粉→卵液→薄力粉→卵液→パン粉の順に付けてすぐに揚げる。(薄力粉は1回で良いが熊の肉汁を充分閉じ込めたい場合2度推奨)超大きいので、7~10分程度かかる。揚げたら、ソースを注ぎ台を置いて盛り付けたら完成。必ず熱いうちに食べる。"}
]
}
</script>
@type Recipeの
nameはレシピの名前です。
imageは、リッチリザルトに表示する画像のURLです。
URL形式は、w3cの勧告に従った形式でなければダメです。
例えば日本語のURLだと、エンコード文字を使用しないとレシピ画像が出ませんので注意して下さい。

@type Personの
nameはこのレシピを考えた人物の情報です。
sameAsなどは、付けなくても構いません。
取る場合は、”sameAs”から]までです。

datePublishedは、レシピをアップロードした日付です。
descriptionは、レシピの説明文です。
prepTimeは、準備時間です。時間の指定はPTを頭に付けてHとMで表します。
1時間10分は1H10Mです。形式はこれ以外だとエラーになるので従ってください。
cookTimeは、実調理時間です。
totalTimeは、prepTimeとcookTimeの和です。
recipeYieldは、ケーキ1ホールとか2人分とか出来あがる分量です。
recipeingredientは、使う材料です。
recipeInstructionsは、調理手順です。手順は数個であとは省略もできるようです。

できあがったら、WordPressならテキストの最後にペーストするだけでOKです。

2018年5月レシピにマークアップする項目が変更になっています。
具体的にはGoogleアシスタント(Google Home)での利用を想定して、Google側が利用者にアピールしやすいようにマークアップを最適化しました。

追加変更されたのは次のアイテムです。
もしアシスタントでの利用を最適化する場合は、ぜひ詳細なマークアップをお願いします。

・recipeCategory
 →レシピカテゴリー、どういう提供をするか、オードブル、メインディッシュ、デザートなどを記述します。

・recipeCuisine
 →レシピクイジン、日本料理、イタリアンなどどの種類の料理かなどです。

・recipeIngredient
 →材料、材料の記載はIngredientsでもできましたが、こちらに統一した方がよいでしょう。

・recipeInstructions
 →調理法、How to Stepで調理法を順番に説明すると良いです。
 ただし、番号を付与する必要はありません。

・video
 →調理のビデオです。

・kweyword
 →何に使うか分かりませんが、おそらくアシスタントで引っかかるキーワードだと思います。
 あまりにもスパム性が高いため、将来なくなったりする可能性がありますので、そのあたりも考慮します。ケーキのレシピで結婚式にだせるなら、そういうキーワード入れます。

少しノウハウを記述します。
まずリッチリザルトは、検索結果の画面で人気の少ない記事に対して、クリックを促進する効果を目指すものではありません。

ようは不人気のブログや記事について、いくら一生懸命マークアップしても、検索結果に出る可能性は少ないです。

リッチリザルトに出るか出ないかは、サイト運営者側ではなくGoogleが決めているのです。
またそのGoogleは、検索者が喜ぶように対策を打っています。

つまり高品質で人気の高いブログや、サイト運営者が使って初めて効果が現れるのです。

私の経験上、レシピの画像は、その記事のキーワードで検索して1ページ目に出るようなレベルでないとダメです。


ということでまだまだ分からない事が多いです。
でも、そんなのを知ったところで、人気の高い高品質な記事を作るという
当たり前の施策にかわりはありません。

リッチスニペット

余談が長くなりました。
折角作ったレシピなのですから、ちゃんとチェックしてブログに載せましょう

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

ソースコードを入力という所に、貼り付けるだけでチェックが可能です。
また、URLを取得を使えば、私がどんなマークアップをしているのか
探ることも可能です。(恥ずかしいのでみないで~~~っ♥)

5.絶対にやってはいけないこと

それでは、一番大事な事をいいます。
JSON-LDの最大の特徴は、ブラウザに表示されず
検索エンジンのみにデータを受け渡す方式だというのは、
ご理解頂いた通りです。

この最大のメリットが、最大のリスクになっています。
そう、ブラックハットSEOです。
例えば、レシピでマークアップを行い、その画像を企業のロゴにしたり
人物の顔にしたりすることは、当然ですが可能です。

また、うまくGoogleのロジックを交わすことによって本当にリッチスニペットに表示されるかもしれません。

しかしながら、そんな事をしても、何の意味もないどころか、Googleから永久追放される可能性が高いです。
Googleは、悪気なく間接的に悪事を働いた場合、かなり寛容です。
しかし、明らかに検索者やGoogleを騙そうとした場合の罰は、非常に厳しいものになっています。

例えば、Googleは広告主によって経営が成り立っています。
その広告主を騙す行為(自分でクリックしたり友人のPCからクリックしたり)を
しなたら、どんなに改心しようとも、イッパツで永久追放です。
偶然あたってしまった・・などの嘘が大嫌いでそれが嘘だという証拠も
Googleはもってペナルティを実施します。

今回のレシピについても、偶然人の顔になった・・・など
あり得ない訳です。

ということで、賢明な読者さんは、そんな利用はしないと信じています。

今後、JSON-LDのマークアップは増えていくと思われます。
そのときは、必ず画面に表示している内容と、マークアップする内容が同じである事を、常に厳しい目で監視するようにして下さい。

悪い事をする人がいなければ、検索エンジンもサイト運営者も双方にメリットがある仕組みなのですから、我々サイト運営者は
気持ちよく利用できるようにしましょうね。

まとめ

・リッチスニペットはサイト運営者がマークアップした内容を表示する
・リッチスニペットは人気の高いコンテンツで表示される可能性が高い
・今後JSON-LDを使ってマークアップする事が増えていく
・JSON-LDを使って決して悪事を働かない

ではでは、長々とお付き合いくださり、ありがとうございました。

またね~♥

コメント一覧

コメントする

Gravatarに登録してログインすると自分専用のアバターを表示できます。

コメントを残す





鈴木はるかのプロフィール画像
(Haruka Suzuki)
仕事:金融システムのSE
好きな物:スイーツ、絶景
趣味:お菓子/アニメ/多趣味
iOSの方はご面倒おかけしますがPush7アプリをAppStoeよりインストールして通知を許可して下さい

カテゴリ一覧

月別の記事を見る