JSON-LDを使った構造化データマークアップ
2019.10.20
構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。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",
ページの種類は下記サイトで確認。
プロパティとバリューを記載
@typeで指定した属性値に関連するプロパティ(nameやurlなど)を、必要に合わせて@type以降にマークアップ。プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。
"name" : "ホームページ制作の株式会社衆|東京都小金井市",
"description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作(パンフレットや動画、イラスト等)もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。",
"url" : "https://web.syu-u.com/"
プロパティの種類は下記サイトで確認。
構造化データの有効性を確認する方法
構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。
本番に反映(アップロード)する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。
構造化データテストツール