JSON-LDを使った構造化データマークアップ

構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。
Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。

構造化データをマークアップする方法

構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。

<script type='application/ld+json'>
{
	"@context" : "http://schema.org",
	"@type" : "WebPage",
	"name" : "ホームページ制作の株式会社衆｜東京都小金井市",
	"description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。",
	"url" : "https://web.syu-u.com/"
}
</script>

上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。
WEBページとして認識できるよう@typeに「WebPage」のプロパティ（属性）とバリュー（属性値）を使用して構造化データをマークアップ。

構造化データのマークアップの4つの手順

JSON-LDの構造化データは、次の4つのマークアップが基本。

JSON-LDの構造化データマークアップを宣言

JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。
こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。

<script type="application/ld+json">
{
}
</script>

@context属性を宣言

@contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。
文字コードの設定のようなもの。

"@context": "http://schema.org",

@type属性を指定

@typeのプロパティで、ページの種類を指定。
ここの部分を実際に記載するページの種類に合わせて書き換える。

"@type": "WebPage",

ページの種類は下記サイトで確認。

• Full Hierarchy – schema.org

プロパティとバリューを記載

@typeで指定した属性値に関連するプロパティ（nameやurlなど）を、必要に合わせて@type以降にマークアップ。
プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。

"name" : "ホームページ制作の株式会社衆｜東京都小金井市",
"description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。",
"url" : "https://web.syu-u.com/"

プロパティの種類は下記サイトで確認。

• Full Hierarchy – schema.org

構造化データの有効性を確認する方法

構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。

本番に反映（アップロード）する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。

• 構造化データテストツール