はじめてのリッチスニペット!構造化データマークアップ導入のススメ

はじめてのリッチスニペット!構造化データマークアップ導入のススメ

エリカ

エリカ

こんにちは、エリカです。

リッチスニペットとは、通常の検索結果に表示される文字情報よりも、リッチに表示される情報のことです。例えば、画像や動画、パンくずリストなどがこれに該当します。

今回はリッチスニペットとは何かSEOの視点ではどんな対策ができるのかといった点から、リッチスニペットの記述方法を解説します。


※編集部注:この記事は、2017年10月に公開されたものを、最新情報を踏まえ再構成・編集しました。

 

リッチスニペットとは

Googleなどの検索結果では、ページタイトル、URL、短い説明文が表示されるのが普通です。この短い説明文のことを「スニペット(断片)」と呼びます。

「リッチスニペット」とは、検索結果に表示される普通の説明文以外のリッチな情報のことを言います。リッチリザルトと呼ばれることもありますが、どちらも同じ意味と考えて問題ありません。

説明より見た方が早いので、いくつか例をご紹介いたしますね。ページタイトル、URL、短い説明文の他は「リッチスニペット」です。

 

動画のリッチスニペット

リッチスニペット-動画

  • 動画のサムネイル
  • 動画の再生時間
  • 動画公開日
  • アップロード元

 

レシピのリッチスニペット

リッチスニペット-レシピ

  • サムネイル
  • 調理時間
  • カロリー
  • パンくず(卵料理に属することが明示されている)

 

レビューのリッチスニペット

リッチスニペット-口コミ

  • パンくず
  • 平均評価
  • レビュー掲載数
  • 価格帯

 

イベントのリッチスニペット

リッチスニペット-スケジュール

  • パンくず
  • 開催期間
  • イベント名
  • 開催場所

 
どれも一度はご覧になったことがあるのではないでしょうか。

これらの情報は、Webサイト側がリッチスニペット対策をしており、かつGoogleがWebサイトを評価したときに表示されるようになっています。

なお、最終判断はGoogle側なので、絶対に表示されるわけではありません。

SEO対策におけるリッチスニペットのメリット

リッチスニペットは、SEO対策において有利であると聞いたことがある人もいるのではないでしょうか。結論、検索順位に直接的な影響はありません。これについては、Googleのジョン・ミューラー氏が2017年6月にこちらの動画で言及されています。(※英語です)

とはいえ、動画や画像などのリッチスニペットで表示されれば、文字だけの情報よりもユーザーの目につきやすくなります。結果的にクリック率が上がる要因になるため、SEO対策において良い影響が期待できると考えてとよいでしょう。

構造化データマークアップとは

リッチスニペットを表示するために、HTMLをマークアップすることを構造化データマークアップといいます。

Googleなどの検索エンジンは、テキストの意味や文脈を全て理解することができません。そこで構造化データでテキストに意味づけをすることで、より検索エンジンが理解しやすくなり、ユーザーにとって最適な検索結果になっていくというわけです。

構造化データには種類がたくさんあるため、コンテンツ内容にあったものを選び、適切にマークアップをしていく必要があります。

構造化データの記述方法(マークアップ方法)

  1. Googleの検索ギャラリーを見るから、最適なリッチスニペットを選ぶ
  2. 構造化データのサンプルを参照しながら値を変更する
  3. 値の選択肢が多数ある場合はSchema.org のリファレンス(英語)を参照する
  4. Googleの構造化データテストツールでチェックする
  5. Webサイトに貼り付ける

 
Googleが対応していない構造化データを導入してもあまり意味が無いので、最初にGoogleのガイドラインを参照しておくのがオススメです。

 

コーポレートサイトで使える構造化データマークアップ

コーポレートサイトなどで汎用的に使えそうな構造化データをまとめてみました。

会社概要を伝える構造化データ

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "株式会社LIG",
  "url": "https://liginc.co.jp/",
  "logo": "https://liginc.co.jp/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+81-3-6240-1253",
    "faxNumber": "+81-3-6240-1980",
    "contactType": "customer support",
    "areaServed": "JP",
    "availableLanguage": "Japanese"
    },
  "location": {
    "@type": "Place",
    "@id": "https://liginc.co.jp/",
    "name": "株式会社LIG 本社オフィス",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "JP",
      "postalCode": "110-0015",
      "addressRegion": "東京都",
      "addressLocality": "台東区",
      "streetAddress": "東上野2-18-7 共同ビル 10F"
      }
    }
}
</script>

 

構造化データの記述内容を解説

"@context": "http://schema.org"

Schema.org に則ると宣言します。

"@type": "Organization",
  "name": "株式会社LIG",
  "url": "https://liginc.co.jp/",
  "logo": "https://liginc.co.jp/logo.png"

 
@type はどのような情報を記載するかを宣言するプロパティです。
ここでは組織( Organization )の情報を記載することを宣言しています。

"contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+81-3-6240-1253",
    "faxNumber": "+81-3-6240-1980",
    "contactType": "customer support",
    "areaServed": "JP",
    "availableLanguage": "Japanese"
    }

 
contactPoint(連絡先)を記載するために入れ子を作りました。
Google のガイドラインでは、telephone、contactType が必須となっているのでご注意ください。

"location": {
    "@type": "Place",
    "@id": "https://liginc.co.jp/",
    "name": "株式会社LIG 本社オフィス",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "JP",
      "postalCode": "110-0015",
      "addressRegion": "東京都",
      "addressLocality": "台東区",
      "streetAddress": "東上野2-18-7 共同ビル 10F"
      }
    }

 
location(場所)、address(住所)を記載するために2段階の入れ子を作りました。
Schema.org のリファレンスには則っているのですが、Google に適切なガイドラインがなかったので、あまり効果はないと思います。

 

構造化データのフォーマット

少々ややこしいのですが、Googleの検索エンジンが対応している構造化データのマークアップ方法は3種類あります。ここまで記述してきたものは、JSON-LDと呼ばれる記述方式です。

なお、GoogleではJSON-LDを推奨しているので、基本的にJSON-LDでの書き方を押さえておけば問題ありません。

JSON-LD ページの見出しまたは本文の<script>タグ内に埋め込まれるJavaScript表記。
microdata HTMLコンテンツ内に構造化データをネストするために使用される、オープンコミュニティのHTML仕様。
RDFa 検索エンジンに伝えたいユーザー表示コンテンツに対応するHTMLタグ属性を追加することによってリンクデータをサポートするHTML5の拡張機能。

出典:Google検索セントラル「構造化データの仕組みについて」

今回はWebサイト全体に共通で埋め込む情報をマークアップしたかったので、ベースのHTMLを汚さずに書けるJSON-LDを採用しました。

以下の記事では、SEO対策で使える構造化データやJSON-LDによる記述方法について紹介しているので、詳しく知りたい方はご覧ください。

 

構造化データマークアップの検証

マークアップが完了したら、Googleが提供している構造化データテストツールでチェックをおこなってください。構造化データは、ブラウザに表示されないデータなので、間違いに気付きにくいです。カンマや括弧の抜けにもお気をつけください。

 

まとめ

リッチスニペットの存在はふわっと知ってはいたのですが、これまで活用したことがありませんでした。なかなかレシピサイトや口コミサイトを作る機会もないので、「コーポレートサイトでも導入できないかな……」と調べたのが今回のきっかけです。

調べてみると、設定がかなり多岐に渡ることを知りました。いろいろ日本語のブログも参照しましたが、最終的にはGoogleのガイドラインを参照するのが確実で、早道だったようです。

今後作るかもしれないサイトのために、今のうちから導入を始めてみてはいかがでしょうか?

 

参考サイト
Schema.org リファレンス
https://schema.org/Thing
Google 構造化データ ガイドライン
https://developers.google.com/search/docs/guides/intro-structured-data
Google 構造化データ テストツール
https://developers.google.com/search/docs/advanced/structured-data

 

この記事のシェア数

146

エリカ
エリカ Webディレクター

ディレクターのエリカです。趣味は美術鑑賞で、絵画や展示などたくさんの作品を眺めるのが好きです。得意料理は「鍋」です。よろしくお願いします。

新人ディレクター向け講座 | 13 articles