「リッチスニペット」と「構造化マークアップ」について調べてみる

リッチスニペットを検索結果に表示したい

ということで、今回の記事では「リッチスニペット」について書いていきたいと思います。また、「構造化マークアップ」や「構造化データ」などの用語もGoogleの引用や参考サイトを交えて、解説できればと思います！

今回の記事の目的

検索結果にリッチスニペットを表示させたい（例ではレシピを扱っています）
「リッチスニペット」を知る
「構造化マークアップ」を知る

リッチスニペットを検索結果に表示させてみよう。そのためには何をどう書けばいいのか、そもそも「リッチスニペット」や「構造化マークアップ」ってなんだろう。そんな疑問をわたしも記事を書きながら勉強し、解決していきたいと思います！

どんな検索結果になっているかチェックしておこう

自分のサイトやブログの検索結果を見たことはありますか？わたしは普段Googleアナリティクスなどで、ユーザーがどんなキーワードでサイトに来てくれているか確認しているのですが、その時、実際にそのキーワードで検索をおこない、どんな検索結果になるのかもチェックしています。

そのキーワードにあった検索結果が適切にされているかを確認するためです。キーワードにできるだけ沿った内容が表示されていれば、検索したユーザーもクリックしやすくなるはずです。そのため、検索結果をチェックをして適時調整をおこなっていくということをしています。 ※表示自体はGoogleが自動的におこなうものなので、調整しても思った通りの表示になるわけではありません。

「タイトル」についても必ずしも意図した表示にならないので、慌てないためにも覚えておくと安心ですね。

検索結果の説明文の表示を「スニペット」という

上図のような検索結果のタイトルの下部の説明文のことを「スニペット」と呼びます。検索したユーザーがページの内容を知るために表示されます。記事を書いている現在の段階では、1記事も公開していないためドメインで検索する状態で恐縮です・・・。例では短めに設定してあるので分かりづらいですが、基本的にはmetaタグの「description」で設定をします。

<meta name="description" content="【thirdparty】デザイン・WEBサイト制作など京都でひっそり活動しています。">

基本的には概要文が検索結果に表示されるため、検索したユーザーがクリックしたくなるような文章を考えてみましょう。例に挙げた表記ではクリックしたくなりませんので、もっとサイトの良さを伝わる概要文になるといいですね。キーワードに沿った適切な文章を入れておくことで、クリックされる確率を上げるためには重要な施策になりそうです！

「スニペット」を豪華にするから「リッチスニペット」

それでは次に「リッチスニペット」とはなにを指すのでしょうか。ここまでの話で「スニペット」を理解した方には何の心配もいりません。スニペットに画像や日付などテキスト以外の情報を追加し、豪華にしたものが「リッチスニペット」と呼ばれているんです。

上の画像は「ハンバーグ　レシピ」と検索した結果のキャプチャですが、2つ目の検索結果で画像付のリッチスニペットが表示されています。もちろん説明文も大事ですが、1つ目の検索結果よりも画像付で目に付くと思いませんか？リッチスニペットは検索結果で目を引くので、ぜひ調整したい施策です。

どんな情報が表示されるのか

とはいえ、何でも情報がリッチに表示される訳ではありません。さきほどの検索結果の例では「レシピ」のリッチスニペットを紹介しましたが、現在サポートされているリッチスニペットの情報を挙げてみます。

レビュー
人物
商品
会社と組織
レシピ
イベント

では、どのようなことをおこなえば表示されるのでしょうか。ここで冒頭に出てきた「構造化マークアップ」の話へとつながっていきます。

「構造化マークアップ」でリッチスニペットを設定する

普段HTMLでサイトを作ったり、CMSを使ってブログを更新しているかと思います。しかしHTMLで書かれているテキストは、検索エンジンから見た時「ただのテキスト」でしかありません。もちろん、Googleは進化し続けているので、文脈をある程度読み取れるかもしれませんが、基本的にはテキストと認識しています。

でも検索エンジンに書いている記事やサイトのコンテンツをしっかり伝えたいですよね・・・。そこで登場したのが「構造化マークアップ」という記述方法です。「構造化マークアップ」はただのテキストに「意味」を持たせるマークアップ（記述）をし、その文脈や意図を解釈してもらおう、という記述方法なんです。

構造化データマークアップを監視する

Googleでは、ページ上でマークアップを認識すると、その情報を使ってリッチスニペットやその他の機能を検索結果に追加できます。たとえば、レストランの検索スニペットでは、そのレストランのレビューの平均や価格帯が表示されます。構造化データは、Microdata、RDF といった schema.org のボキャブラリや形式のほか、Microformats などの手法を使ってページに追加できます。また、構造化データはデータハイライターを使ってページ上のデータにタグを付ける方法でも追加できます。

引用元：構造化データマークアップを監視する

こちらは GoogleのSearch Console ヘルプからの引用ですが、オレンジ色で強調した文章のように、マークアップを認識するとその情報を利用してリッチスニペットを検索結果に追加できる、とあります。

さらに、緑色の強調部分で、「Microdata」「RDF」などの「schema.org のボキャブラリ」や「Microformats」などの手法・・・と出てきます。これらは先ほどのセクションで書いた「構造化マークアップ」の手法となり、記述の仕方は複数あるということになります。

構造化マークアップはコピー＆ペーストでも問題なく記述できますが、構造化データを理解しておくと理解がスムーズになると思います。ここでは詳細な解説はおこないませんが、鈴木謙一さんの海外SEOブログの以下の記事は非常に参考になるので、チェックしてみてください！

[構造化データ初級者向け] schema.orgとMicrodata、RDFaって何が違うの？

「レシピ」について構造化マークアップをしてみましょう

リッチスニペットや構造化マークアップについて簡単に説明をしてきました。それでは実際に「レシピ」について構造化データを使ってマークアップをしてみましょう！「Microdata」を使ったマークアップを紹介したいと思います。

「Microdata」は、HTML5の一部として作成された仕様のため、コーディングをおこなう人には比較的馴染みやすい記述方法だと思います。「class」を振るイメージで、「itemprop=”name”」などプロパティを設定していきます。

記述内容

実際に記述の内容を見てきましょう。以下はレシピのリッチスニペットを表示させるための必須プロパティなので、次のうち少なくとも2つを含んでおく必要があります。構造化マークアップをするために、必須な情報です。

画像
準備時間・調理時間・合計時間　もしくは、材料
栄養情報（カロリー）
レビュー

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

<div itemscope itemtype="http://schema.org/Recipe">
  <h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
  <img itemprop="image" src="apple-pie.jpg" />
  By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
       <span itemprop="name">Carol Smith</span>
     </span>
  Published: <time datetime="2009-11-05" itemprop="datePublished">
    November 5, 2009</time>
  <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a
    dash of nutmeg.</span>
  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews </span>
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span>
    Calories per serving: <span itemprop="calories">250 cal</span>
    Fat per serving: <span itemprop="fatContent">12 g</span>
  </span>
  Ingredients:
    Thinly-sliced <span itemprop="ingredients">apples</span>:
     6 cups
      <span itemprop="ingredients">White sugar</span>:
      3/4 cup
  ...

  Directions:
    <div itemprop="recipeInstructions">
      1. Cut and peel apples
      2. Mix sugar and cinnamon. Use additional sugar for tart apples.
      ...
    </div>
</div>

引用元：Enabling Rich Snippets for Recipes

引用した「Microdata」に一部日本語のコメントを付けてみました。このまま貼り付けても何の情報もないデータになってしまうので、適時レシピの情報を入力する必要があります。

<div itemscope itemtype="http://schema.org/Recipe">

<h1 itemprop="name">レシピの名前</h1>
<img itemprop="image" src="レシピ画像のURL.jpg" />
By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">レシピの作者</span>
</span>

公開日: <time datetime="2009-11-05" itemprop="datePublished"><!-- 公開日をISO日付形式で -->日付</time>
<span itemprop="description">レシピの概要文</span>

<!-- レーティングは難しい場合取ってしまう -->
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.0</span> stars based on
<span itemprop="reviewCount">35</span> reviews </span>
<!-- レーティングは難しい場合取ってしまう -->

準備時間: <time datetime="PT30M" itemprop="prepTime">30分</time>
調理時間: <time datetime="PT1H" itemprop="cookTime">1時間</time>
合計調理時間: <time datetime="PT1H30M" itemprop="totalTime">1時間30分</time>
量: <span itemprop="recipeYield">量 (8人前)</span>

<!-- 栄養 -->
  <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
    サイズ: <span itemprop="servingSize">1カット</span>
    カロリー: <span itemprop="calories">250 cal</span>
    脂肪分: <span itemprop="fatContent">12 g</span>
  </span>
<!-- 栄養 -->

<p>食材:三人前</p>
<span itemprop="ingredients">リンゴ</span>:2個
<span itemprop="ingredients">砂糖</span>: 3/4 カップ...
<p>作り方:</p>
<div itemprop="recipeInstructions">
<ol>
<li>リンゴをカットします</li>
<li>砂糖とシナモンを混ぜます<li>
<li>...</li>
</ol>
</div>

</div>

このような記述を書くことで、Googleに「レシピ情報を書いてるよ！」と文脈や意図を伝えることができ、適切に伝えられれば前述したような検索結果の表示なる、というわけです。

これが先ほど引用した「Googleでは、ページ上でマークアップを認識すると、その情報を使ってリッチスニペットやその他の機能を検索結果に追加できます。」という部分の結果となります。

構造化マークアップは、情報を認識してもらうための記述ですが、必ず例のような表示がされる訳ではありませんので、ご注意ください。

レシピの構造化マークアップについて「JSON-LD」でマークアップする場合の記事も書きましたので、参考にしたい方はこちらもどうぞ。

レシピの構造化データを「JSON-LD」で書こう

リッチスニペットに対応しているコンテンツを書いてない場合

ここまでリッチスニペットについて書いてきましたが、そもそもリッチスニペットがサポートしているコンテンツを書いていないよ！という場合には、まだリッチではありませんが、構造化データを伝える方法を紹介したいと思います。

このページは「ブログ記事」です、と伝えたい場合

ブログを運用されている場合、各記事のページがこれに該当しそうです。ここでは「schema.org」と「Microdata」を利用して”ブログ記事”であることを記述していきたいと思います。

「BlogPosting」を使ったプロパティの設定

それではまず、記事全体をブログ記事と設定します。以下のような記述を追加していきます。

<html lang="ja" itemscope itemtype="http://schema.org/BlogPosting">

「BlogPosting」にもレシピの時のような必須プロパティがあり、以下の3点になります。こちらはブログを書いていれば大抵の場合扱う要素なので、問題ないかと思います。ただし、それぞれを設定するために出力を調整する必要があるかもしれません。

画像
見出し
公開日

HTMLの構成によって異なると思いますので、サイトに合わせて設定する形になります。わたしの場合は以下のように設定しています。

<meta itemprop="image" content="画像URL" />
<h1 itemprop="headline">記事のタイトル</h1>
<time itemprop="datePublished" content="2015-07-29">公開日</time><!-- 公開日をISO日付形式で -->

画像は「meta」で設定し、見出しは「h1」、公開日はそのまま公開日を表示している「time」に設定しています。 WordPressを利用しているので、「単一記事の投稿 (single.php)」テンプレート内では以下のような記述です。利用する場合は、ご自身のサイトに合わせて設置してみてください。

<h1 itemprop="headline"><?php the_title(); ?></h1>
<time itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>"><?php the_time(get_option('date_format')); ?></time>
<?php 
$thumbnail_id = get_post_thumbnail_id(); 
$prop_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
echo '<meta itemprop="image" content="'.$prop_img[0].'" />';　
?>

ここまでの設定で、このページは「ブログ記事」という構造化データのマークアップができました。実際にデータが適切に伝えられているか、Googleの「構造化データテストツール」を使って確認してみましょう。

Structured Data Testing Tool