#037
posted on 2021.04.29

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

検索サイトの検索結果での見栄えを変えるリッチリザルトに対応させるための構造化データのマークアップ方法のメモ。

 

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

構造化データとは、ページに関する情報を提供し、そのコンテンツ(たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど)を分類するために標準化されたデータ形式。

 

 

リッチリザルトの仕組み

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

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

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

 

ページがリッチリザルトに対応しているか確認するツール(リッチリザルトテスト)。

 

 

構造化データの記述書式

Google, Microsoft, Yahoo, Yandexと共にインターネットにおける構造化データの策定を行っているschema.orgが定義している方法でマークアップする。schema.orgの公式ドキュメント

 

記述の書式は、「JSON-LD」、「microdata」、「RDFa」の3つの形式がサポートされているが、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の拡張機能。

 

 

この記事をシェア