検索結果の見栄えを変えるリッチリザルトに対応する構造化データの記述方法。

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

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

リッチリザルトの仕組み

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

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

Webページが検索サイトに提供する情報のタイプによってリッチリザルト表示の見た目は異なる。
情報のタイプによって、構造化データとして記述するプロパティー(と値)が異なる。

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

構造化データの記述書式

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の拡張機能。