構造化データの記述方法

構造化データについて少し調べる機会があったのでメモ。

構造化データとは

HTMLで記述された情報を、検索エンジンがより正しく理解できるように情報を追加したものが構造化データです。
例えば、以下のようなHTMLがあるとします。

HTML

<div class="profile">
	<div class="profile_image">
		<img src="sakura-nene.jpg" alt="桜ねねの画像">
	</div>
	<dl class="profile_data">
		<dt>桜 ねね</dt>
		<dd>CV:朝日奈丸佳</dd>
		<dd>誕生日:5月5日</dd>
		<dd>血液型:B型</dd>
		<dd>身長:144cm</dd>
		<dd>出身:東京都</dd>
		<dd>学校名:きらら女子大学</dd>
		<dd>アルバイト先:イーグルジャンプ(ゲームプログラマー)</dd>
	</dl>
</div>

検索エンジンはこの情報だけだと内容を正しく理解しにくいため、情報を追加して検索エンジンが理解しやすいようにします。

<div class="profile">
	<div class="profile_image">
		<img src="sakura-nene.jpg" alt="桜ねねの画像">
	</div>
	<dl class="profile_data">
		<dt>桜 ねね</dt>
		<dd>CV:朝日奈丸佳</dd>
		<dd>誕生日:5月5日</dd>
		<dd>血液型:B型</dd>
		<dd>身長:144cm</dd>
		<dd>出身:東京都</dd>
		<dd>学校名:きらら女子大学</dd>
		<dd>アルバイト先:イーグルジャンプ(ゲームプログラマー)</dd>
	</dl>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "桜 ねね",
  "birthDate": "--05-05",
  "height": "144cm",
  "birthPlace": "東京都",
  "affiliation": "きらら女子大学",
  "worksFor": "イーグルジャンプ",
  "jobTitle": "ゲームプログラマー",
  "image": "sakura-nene.jpg"
}
</script>

この追加した情報が構造化データで、上記の場合「人」に関する情報で、名前は「桜 ねね」、生年月日は「5月5日」などといった情報を検索エンジンが理解できるようになります。
構造化データを追加することで、リッチスニペットが表示される可能性があり、通常よりクリックされやすくなるなどのメリットがあります。
(ただし、必ず表示されるわけではないようです。)
　

記述方法

構造化データの記述方法についてみてみます。
記述する際、ボキャブラリーとシンタックスと呼ばれるものを使用します。

ボキャブラリー

ボキャブラリーは構造化データにどのような情報を付与できるかを定義している規格です。
今回は先ほどの例でも使用しましたが、Googleで推奨されているschema.orgについて見てみます。

ボキャブラリの一覧はこちらで確認できますが、先ほど使用したPersonの他に、企業に使用するCorporationや製品に使用するProductなど、多くの種類があります。
内容がわかりにくい場合、日本語訳されたものもありますので、合わせて参照ください。

先ほどの例ではPersonの以下の項目を使用しました。

シンタックス

シンタックスはHTMLにどのように記述するかを決める仕様です。
Googleでは以下の3つをサポートしています。

• JSON-LD
• Microdata
• RDFa

先ほどの例ではJSON-LDを使用していて、Googleが推奨している記述方法になります。
json形式で一箇所にまとめて記述するのが特徴です。

先ほどの例をMicrodataで記述する場合、以下のようにHTMLタグに属性として追加する形になります。

<div class="profile" itemscope itemtype="http://schema.org/Person">
	<div class="profile_image">
		<img src="sakura-nene.jpg" alt="桜ねねの画像" itemprop="image">
	</div>
	<dl class="profile_data">
		<dt itemprop="name">桜 ねね</dt>
		<dd>CV:朝日奈丸佳</dd>
		<dd>誕生日:<span itemprop="birthDate">5月5日</span></dd>
		<dd>血液型:B型</dd>
		<dd>身長:<span itemprop="height">144cm</span></dd>
		<dd>出身:<span itemprop="birthPlace">東京都</span></dd>
		<dd>学校名:<span itemprop="affiliation">きらら女子大学</span></dd>
		<dd>
			アルバイト先:<span itemprop="worksFor">イーグルジャンプ</span>
			(<span itemprop="jobTitle">ゲームプログラマー</span>)
		</dd>
	</dl>
</div>

RDFaの場合もMicrodataと同様に、属性として追加する形になります。

<div class="profile" vocab="http://schema.org/" typeof="Person">
	<div class="profile_image">
		<img src="sakura-nene.jpg" alt="桜ねねの画像" property="image">
	</div>
	<dl class="profile_data">
		<dt property="name">桜 ねね</dt>
		<dd>CV:朝日奈丸佳</dd>
		<dd>誕生日:<span property="birthDate">5月5日</span></dd>
		<dd>血液型:B型</dd>
		<dd>身長:<span property="height">144cm</span></dd>
		<dd>出身:<span property="birthPlace">東京都</span></dd>
		<dd>学校名:<span property="affiliation">きらら女子大学</span></dd>
		<dd>
			アルバイト先:<span property="worksFor">イーグルジャンプ</span>
			(<span property="jobTitle">ゲームプログラマー</span>)
		</dd>
	</dl>
</div>

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

作成した構造化データは、以下のページからテストを行えます。
構造化データテストツール

コードスニペットを選択します。

作成したコードを貼り付けて、テストを実行をクリックします。

テスト結果が表示されました。
構造化データにエラーなどがある場合、右上部分に表示されます。

【参考サイト】

• Introduction to Structured Data  |  Search  |  Google Developers
• Full Hierarchy – schema.org
• 「構造化データ」がよく分かる！初心者向け徹底解説 | SEO HACKS公式ブログ
• 構造化データとは？～HTMLを構造化する前に知っておきたいこと～ | サクラサクLABO公式ブログ
• JSON-LD – Qiita