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

なんと、現在新サーバからのお届けとなっています♪
シームレスに切り替えしているので、
ドメインがharukas.orgになっているのに気付かなかったひとも
多かったのではないでしょうか?

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

目次
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はJavaですからね(^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": "http://schema.org/",
  "@type": "Recipe",
  "name": "サッパリ胡麻ダレ風味のサラダ冷し中華",
  "image": "https://www.haluka.org/blog/wp-content/uploads/2015/01/3f9a4cb3b7f55b2acb77ff0652ee12b5.jpg",
  "author" : {
  "@type": "Person",
  "name" : "Haruka Suzuki",
  "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",
    "http://ameblo.jp/seravi2/",
    "https://haruka.amebaownd.com/"
	     ]
	     },
  "datePublished": "2015-01-31",
  "description": "市販の素材を使いゼロから作る冷やし中華です。濃厚な胡麻ダレ好きにはたまりません。",
  "prepTime": "PT10M",
  "cookTime": "PT30M",
  "totalTime": "PT40M",
  "recipeYield": "2人分",
  "ingredients": [
	"細打ち麺:2人分",
	"卵:2個",
	"中華くらげ(味付け):適量",
	"もやし:1/3袋",
	"きゅうり:1/2本",
	"叉焼:小8枚程度",
	"すりごま:適量(無くても可)",
	"紅ショウガ:適量(無くても可)",
	"お湯:50cc",
	"鶏ガラ粉末出汁:小さじ1/2",
	"練りゴマ:大さじ3",
	"豆板醤:少々",
	"砂糖:大さじ1",
	"酢:大さじ2",
	"(薄口)醤油:大さじ3",
	"ごま油:大さじ1"
  ],
  "recipeInstructions": [
	" 1.お湯を沸かし鰹だし粉末等(全分量外)を入れ、もやしを茹でる",
	" 2.茹でたら、そのお湯で半熟卵を作る",
	" 3.きゅうりは千切りにする",
	" 4.叉焼は砂糖醤油+酒みりん(全分量外)で温めて味をしみ込ませる..."
]
}
</script>
@type Recipeの
nameはレシピの名前です。
imageは、リッチスニペットに表示する画像のURLです。
URL形式は、www3cの勧告に従った形式でなければダメです。
例えば日本語のURLだと、レシピ画像が出ませんので注意して下さい。

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

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

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

どうですか?
簡単ですよね(﹡ˆᴗˆ﹡)

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

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

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

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

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

私は現時点で18レシピをマークアップしていますが
出ていないものがあります。

筍ご飯と伝説のオムライス

これは、レシピとして「リョウさんの筍ごはん」で登録していますが
無視されています。多分記事タイトルと大きく違うので
そのあたりのチェックだと思います。

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

リッチスニペット

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

またね~♥

コメント一覧

コメントする

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

コメントを残す





鈴木はるかのプロフィール画像
(Haruka Suzuki)
仕事:金融システムのSE
好きな物:スイーツ、絶景
趣味:お菓子/アニメ/多趣味

月別の記事を見る