リッチスニペット(リッチリザルト)の書き方レシピ編

リッチスニペット(リッチリザルト)の書き方レシピ編
ここではレシピサイトでリッチリザルト(リッチスニペット)を使い検索エンジンに料理レシピのサムネイル画像を表示させる方法を紹介します。

!? 何のこっちゃw

Googleの検索エンジンで料理のレシピを調べると、検索結果がサムネイル画像付きで表示される場合があります。

検索結果がサムネイル画像付きで表示される

『カッコいいな~。』といつも思っていました。

これは目立ちますね!

ワタシも料理ブログを運営しているので、検索結果にレシピを画像付きで表示できないものかと思っていました。

クックパッドや楽天レシピみたいな大手メジャーサイトだけの特権だろうと思っていましたが、ページに構造化データをマークアップする事により気軽に表示させる事が出来ます。

リッチリザルト(リッチスニペット)とは

最初にリッチリザルト(リッチスニペット)という言葉の意味から調べていきましょう、そんなものは知ってるよと言われるあなたは6 JSON-LDの使い方 までワープして下さい。

リッチな猿?

リザルト(スニペット)とは?

通常の青リンクよりも高度な機能を持つGoogle検索での検索結果、テキスト以外の様々な要素を表示させる事が可能。

ブログ記事を新規投稿すれば自動的にディスクリプションが作成されますね。ワタシはプラグインAll in One SEO Packを使っているので、自分で毎回ディスクリプションを入力しています。

ディスクリプションを入力

Googleの検索結果には下記の様に表示されました。ページタイトルの下にブログの説明文が表示されていますが、これがスニペットです。※現在では「リザルト」と呼ばれています。

ページタイトルの下にブログの説明文が表示されている

一方のリッチリザルト(スニペット)はというと一目瞭然ですね、目立ちます。

リッチリザルト(スニペット)

おおっ!画像が表れた!

リッチリザルト(スニペット)で表示させているのは「サムネイル画像」と「調理時間」です。※2020年時点では「評価」「カロリー」なども表示可能です。

リッチリザルト(スニペット)

スポンサーリンク

Googleがサポートしている構造化データ

Googleがリッチリザルトとしてサポートしている構造化データには様々な種類があります。

Article
Book
パンくずリスト
カルーセル
Course
評論家レビュー
Dataset
EmployerAggregateRating
Event
ファクト チェック
よくある質問
家でのアクティビティ
ハウツー
画像のライセンス
JobPosting
職業訓練(ベータ版)
ローカル ビジネス
Logo
Movie
給与推定額
ポッドキャスト
Product
Q&A
Recipe
クチコミ抜粋
サイトリンク検索ボックス
ソフトウェア アプリ(ベータ版)
Speakable
定期購入とペイウォール コンテンツ
Video
パンのクズを何に使うのかな?

「パンくずリスト」とはサイトの階層を分かり易くしたものですね。

パンくずリスト

リッチリザルト(スニペット)のメリット

料理レシピサイトでは検索エンジンに料理の出来上がり写真があるのとないのではクリック率が変わってくると思います、写真があればクリックしたくなるのが人間ですね。

ほう、良い事ばかりですね。これは設定しておいて損はないですね。

現時点ではリッチリザルト導入による検索順位への効果は薄いといわれていますが、ユーザーエクスペリエンスが向上して検索流入が増える効果があるとされています。

リッチリザルト(スニペット)の表示条件

リッチスニペットが表示されるためには一定の条件を満たしていなければなりません。

リッチスニペットの表示条件
  1. Googleのガイドラインに沿っている
  2. クエリとの関連性
  3. サイトの品質

ユーザーに一切表示されないコンテンツや虚偽のレビュー、ページの内容と関係のないコンテンツ等をマークアックするとスパム扱いされる恐れがあります。

検索ユーザーにとって有意義なリッチリザルト(スニペット)でなければなりません。

その他ではサイトの品質が低いと表示されないです、せめて検索で2~3ページ目くらいにランクインしなければ写真は表示されませんね。

全部が全部、写真が表示される訳ではないのね…。

スポンサーリンク

構造化データのマークアップ方法

では本題に入りますが、リッチリザルド(スニペット)とはどの様にしてマークアップするのかを紹介していきます。ド素人の自分でも出来た簡単な方法です。

検索エンジンが自分のサイトをクロールする時にはサイトの単語は理解していますが、その単語は何を意味しているのかまでは理解できません。

なのでサイト運営者が検索エンジンにも理解できるようにマークアップを行い単語を理解してもらえる様にする必要があります、この方法を構造化データと言います。

この構造化データの書き方には3種類の方法があります。

構造化データの書き方
  • JSON-LD
  • Microdata
  • RDFa

この中でもGoogleが推奨しているJSON-LDを使って構造化データを作成していきます。

JSON-LDの使い方

最初に用意するものはブログ記事とメモ帳だけです。

メモ帳?

下記のコードをメモ帳に貼り付けて名前を付けてデスクトップに保存しておきます。

HTML
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "",
"image": "",
"author": {
"@type":"Person",
"name" : ""
},
"datePublished": "",
"description": "",
"prepTime": "PTM",
"cookTime": "PTM",
"totalTime": "PTM",
"keywords":"",
"recipeYield": "",
"recipeCategory": "",
"recipeCuisine": "",
"nutrition": {
"@type": "NutritionInformation",
"calories": " kcal"
},
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "",
"worstRating": "",
"ratingValue": "",
"reviewCount": ""
 },
  "recipeingredient": [
"",
"",
""
],
  "recipeInstructions": [
   {
"@type": "HowToStep",
"name":"",
"text":"",
"url": "",
"image": ""
},
   {
"@type": "HowToStep",
"name":"",
"text":"",
"url": "",
"image": ""}
]
}
</script>

上から順番に説明していきます。

HTML
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "記事タイトル",
"image": "料理画像",
"author": {
"@type":"Person",
"name" : "ブログ投稿者"
},
"datePublished": "投稿日",
"description": "ページの概要文",
"prepTime": "準備時間",
"cookTime": "調理時間",
"totalTime": "合計調理時間",
"keywords":"キーワード",
"recipeYield": "何人前のレシピか?",
"recipeCategory": "カテゴリー",
"recipeCuisine": "地域",
"nutrition": {
"@type": "NutritionInformation",
"calories": " カロリー"
},
"aggregateRating": {
"@type": "AggregateRating",
"bestRating": "評価の最高値",
"worstRating": "評価の最低値",
"ratingValue": "総合評価の値",
"reviewCount": "レビューの投稿数の合計"
 },
  "recipeingredient": [
"材料",
"材料",
"材料"
],
  "recipeInstructions": [
   {
"@type": "HowToStep",
"name":"見出し①",
"text":"作り方①",
"url": "記事URL",
"image": "記事画像"
},
   {
"@type": "HowToStep",
"name":"見出し②",
"text":"作り方②",
"url": "記事URL",
"image": "記事画像"}
]
}
</script>
「@type”: “Recipe」name 記事タイトル
image 料理画像
「@type”:”Person」name ブログ投稿者
datePublished 投稿日
description ページの概要文
prepTime 準備時間
cookTime 調理時間
totalTime 合計調理時間
keywords キーワード
recipeYield 何人前のレシピか?
recipeCategory カテゴリー
recipeCuisine 地域
calories カロリー
bestRating 評価の最高値
worstRating 評価の最低値
ratingValue 総合評価の値
reviewCount レビューの投稿数の合計
recipeingredient 材料
recipeInstructions name:見出し
text:作り方
url:記事URL
image:記事画像
なんか難しそう…。

慣れると簡単に出来るようになります。

WordPress記事終わりに貼りつける

全て入力が完了したらコピペしてブログ記事の最後に貼り付けましょう。

構造化マークアップ WordPress記事終わりに貼りつける

新規の記事なら『公開』を、既存の記事なら『更新』をクリックします。

「リッチリザルトテスト」で確認する

正しくマークアップされたかどうかを「リッチリザルトテスト」でチェックしていきましょう。

外部リンクリッチリザルトテスト

構造化データを作成した記事のURLを貼り付けて『URLをテスト』をクリックします。

「リッチリザルトテスト」で確認

エラーは無かったものの1件の警告が表示されていました。

1件の警告が表示

「任意」となっているこの警告を調べてみる事にしました。

video 動画

YouTube等でレシピ動画を公開している場合にマークアップするみたいですね、ワタシの副サイトでは動画でレシピは紹介していないのでこのままにしておきます。

画像で十分かな?

以上で構造化データの書き方は完了です、写真は1週間ほどで検索に表示されると思います。※検索上位にランクインしないと表示されません

まとめ

今回はGoogleの検索エンジンに料理レシピのサムネイル画像を挿入させる方法として、JSON-LDを使った構造化データのマークアップ方法 を紹介しました。

コピペで簡単に出来てしまうのでブログの新規記事を書き終わったら必ず書き加えておきたいですね、ユーザーエクスペリエンスを向上させて検索流入を増加させましょう。

アクセスが増えると良いですね。

注意点としてすべての記事でリッチリザルトが表示される訳ではありません、SEOキーワード等を使い検索上位に入らなければ写真の表示は難しいと思われます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)