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

エリカ

2017.10.04

Web制作

こんにちは、エリカです。
今回は「リッチスニペット」の導入についてご紹介したいと思います。

リッチスニペットとは
構造化データマークアップとは
- 構造化データマークアップの導入手順
コーポレートサイトでも使える構造化データマークアップ
まとめ

リッチスニペットとは

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

「リッチスニペット」とは、検索結果に表示される普通の説明文以外のリッチな情報のことを言います。

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

動画のリッチスニペット

リッチスニペット-動画

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

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

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

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

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

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

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

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

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

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

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

最終判断は Google 側なので、絶対に掲載できるわけでもありません。

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

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

構造化データマークアップの導入手順

Google のガイドライン（英語）が対応してるリッチスニペットを選ぶ
構造化データのサンプルを参照しながら値を変更する
値の選択肢が多数ある場合はSchema.org のリファレンス（英語）を参照する
Google のテストツールでチェックする
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 に適切なガイドラインがなかったので、あまり効果はないと思います。