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

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

リッチスニペットとは

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

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

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

動画のリッチスニペット

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

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

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

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

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

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

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

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

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

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

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

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

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 に適切なガイドラインがなかったので、あまり効果はないと思います。

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

少々ややこしいのですが、構造化データをマークアップする方法は複数あります。
Schema.org には、Microdata、RDFa、JSON-LD という3種類の方法が紹介されています。

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

ご興味がありましたら、フロントエンドエンジニアいなばの記事もご参照ください。

SEO強化のサポート役「構造化データマークアップ」って何？ そのやり方は？

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

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

まとめ

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

調べてみると、設定がかなり多岐に渡り、リファレンスは英語サイトばかりで、なかなか読み解くのが難しい情報なのだと知りました。いろいろ日本語のブログも参照しましたが、最終的にはGoogle のガイドラインを参照するのが確実で、早道だったようです。

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

参考サイト

Schema.org リファレンス
http://schema.org/Thing

Google 構造化データ ガイドライン
https://developers.google.com/search/docs/guides/intro-structured-data

Google 構造化データ テストツール
https://search.google.com/structured-data/testing-tool/u/0/