リッチスニペット【JSON-LDで検索にサムネイル画像を表示させる】

リッチスニペット【JSON-LDで検索にサムネイル画像を表示させる】

検索エンジンと言えばGoogleとYahooが両横綱ですね、世間でもそう捉えられていると思います。

ここでは、リッチスニペットを使い検索エンジンにサムネイル画像を表示させる方法を紹介します。

!? 何のこっちゃw

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

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

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

これは目立ちますね!

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

おそらく、クックパッドや楽天レシピみたいなメジャーサイトだけの特権だろうと思っていましたが、個人でも出来る方法があったので書き記していきたいと思います。

リッチスニペットとは

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

リッチなペット?

スニペットとは?

Googleの検索結果に表示される記事タイトルの下の説明文。

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

リッチスニペットとは

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

リッチスニペットとは

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

リッチスニペットとは

おおっ!画像が表れた!

リッチスニペットで表示させているのは、サムネイル画像と調理時間です。

リッチスニペットとは

スポンサーリンク

リッチスニペットの種類

リッチスニペットの種類には、様々な物があります。

  • レシピ
  • パンくずリスト
  • レビュー
  • 動画や音楽
  • 検索窓
  • イベント情報
  • 会社組織
パンのクズを何に使うのかな?

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

パンくずリスト

リッチスニペットのメリット

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

他ではたくさんの情報を載せる事で検索エンジンがページの内容を理解し易くなって検索順位に良い影響を与える事もあります。

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

リッチスニペットの表示条件

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

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

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

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

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

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

スポンサーリンク

素人でもできるリッチスニペットの書き方

では本題に入りましょう。リッチスニペットとは、どの様にしてマークアップするのかを解説していきます。ド素人のワタシでも出来た簡単な方法です。

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

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

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

構造化データの書き方の種類
  1. JSON-LD
  2. Microdata
  3. RDFa

この中でも一番簡単な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",
"recipeYield": "人前",
"ingredients": [
"",
"",
"",
"",
"",
"",
"",
""
],
"recipeInstructions": ""
}
</script>

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

JSON-LDの使い方

 

name 記事タイトル
image 写真
name ブログ投稿者
datePublished 投稿日
description ページの概要文
prepTime 準備時間
cookTime 調理時間
totalTime 合計調理時間
recipeYield 何人前のレシピか?
ingredients 材料
recipeInstructions 作り方

この9項目に記事に当てはまる内容を記入していきます。

JSON-LDの使い方

なんか難しそう…。

慣れると簡単に出来るようになります、全て記入し終えたらコピペしてブログ記事の最後に貼り付けましょう。

JSON-LDの書き終わりブログに貼りつけ

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

構造化データツールで確認する

正しくマークアップされたか、構造化データツールでチェックしていきましょう。

外部リンク構造化データテストツール

追記:「構造化データテストツール」は廃止されます。代わりにリッチリザルトテストの仕様が推奨されています。

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

構造化データツールで確認する

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

構造化データツールで確認する

推奨フィールドとなっている、この2件の警告を調べてみる事にしました。

aggregateRating レビュー
nutrition 栄養価

自分のレシピにレビューは付けられませんね(笑)。栄養価の方も専門家ではないので表示のしようもありません。エラーではなく警告なので、このままでも構わないと思います。

最後に『検索での見え方』をチェックしておきましょう。『プレビュー』をクリックします。

検索での見え方

なかなか良いですね~

以上でリッチスニペットの書き方は終わりです、写真は1週間ほどで検索に表示されると思います。

まとめ

今回は、Googleの検索エンジンにサムネイル画像を挿入させる方法として、JSON-LDを使った構造化データのマークアップ方法 を紹介しました。コピペで簡単に出来てしまうので、ブログの新規記事を書き終わったら必ず書き加えておきたいですね。

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

コメントを残す

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

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