検索結果の見栄えを変えるリッチリザルトに対応する構造化データの基礎知識。

「構造化データ」(検索サイトの検索結果での見栄えを変えるリッチリザルトに対応させるために記述するページ情報)のマークアップ方法に関する基礎知識のメモ。

※ ページに記述された「構造化データ」を検証できる「schema.org」のオンラインツール(スキーマ マークアップ検証ツール)。

※ ページがリッチリザルトに対応しているか確認できるGoogleのオンラインツール(リッチリザルトテスト)。

「構造化データ」に関するGoogle公式ドキュメント(構造化データの仕組みについて)。

※ 「構造化データ」のマークアップは、サーバーから返されるときのHTMLに含まれている必要があり、クライアントサイドでJavaScriptで動的にマークアップを生成することはできない。

※ 提供する情報のタイプによって、記述が必須となる「構造化データ」のプロパティー(と値)は異なる。

リッチリザルトの仕組み

リッチリザルトの機能に関するGoogle公式ドキュメント「構造化データを使用する機能」参照。

1. 「構造化データ」(Webページ内でコンテンツとして記載されている情報に関するデータ)を、定められた書式でそのページのHTML内の任意の場所に記述。
2. 検索サイトのクローラーが「構造化データ」を持つページをインデックス。
3. 「構造化データ」の内容から、検索サイトが自動的に検索結果の表示にリッチリザルトとして反映。

※ Webページが検索サイトに提供する情報のタイプによって、表示されるリッチリザルトの見た目は異なる。

構造化データの記述書式

[ 記述書式 ]

Google, Microsoft, Yahoo, Yandexと共にインターネットにおける構造化データの策定を行っている「schema.org」が定義している方法で記述する。

※ schema.orgの公式ドキュメント。

構造化データの記述書式は、以下の3つの形式がサポートされている。

• 「JSON-LD」(JavaScript Object Notation-Linked Data)
• 「microdata」
• 「RDFa」(Resource Description Framework in attributes)

※ Googleが推奨している「JSON-LD」で統一するのが無難。

書式1. JSON-LD

JSON-LD(JavaScript Object Notation-Linked Data)。JSON-LDの公式サイト。

Webページが検索クローラーへ提供する情報を、データ定義言語のJSONで記述する書式。

• HTML内の任意の場所にscript要素タグで囲って記述する。
• 記述する内容のタイプを指定し、タイプごとに指定されているプロパティーと値を情報として代入していく。
• データ内容のタイプごとに最低限の必須プロパティーが定義されている。
• 指定されている必須プロパティーが無いアイテムはリッチリザルトに表示されない。
• ページ上に複数のアイテムがある場合、その全てを構造化データとしてマークアップしても良い。
• 複数のアイテムがある場合は、ネストしても個別に記述しても良い。
• プロパティーの定義は多い方がリッチリザルトの評価は上がるが、不正確な内容や書式が含まれるようなら少数の正確な定義の方が良い。

※ Googleは、「schema.org」での必須プロパティーを必ずしも必須とはしていないので、必須プロパティーは「developers.google.com」の公式ドキュメントで確認する。

※ ガイドラインに違反すると、構文的に正しくてもGoogle検索でリッチリザルトとして表示されなくなったり、構造化データがスパムとしてマークされたりすることがある。

[ 記述方法 ]

HTML内の任意の場所に所定の書式でページ情報を記述する。

※ 他にも、「Googleタグマネージャー」で動的に設定を反映させる方法と、Googleのsearch consoleの「データハイライター」ツール内でサイトのプレビュー画面から視覚的に要素を選択して設定する方法がある。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "記述する情報のタイプ名",
  "プロパティー": "値",
  "プロパティー": "値",
  "プロパティー": "値"
}
</script>

1. MIMEタイプ「application/ld+json」のscript要素ダグで囲う。
2. そのオブジェクトの「”@context”」を定義。(詳細不明。おそらく採用する文法の定義。)
3. そのオブジェクトの「”@type”」を定義。(記述する情報の種類を定義。)
4. プロパティーと値を順次記述。(クローラーに提供する情報の詳細を定義。)

※ JSONではダブルクォーテーションのみ使える。(シングルクォーテーションは不可。)
※ 「@」はオブジェクトのプロパティーのエイリアスを意味する。(「@type」は「obj.type」のエイリアス。)

書式2. microdata

microdataの公式サイト。

検索クローラーに提供したい情報が書かれているHTML要素のタグに「属性名=”値”」として直接記述するHTML仕様の書式。

書式3. RDFa

RDFaの公式サイト。

microdata同様、HTML要素のタグに「属性名=”値”」として直接記述する書式。HTML5の拡張機能。