機械がHTML文章の中のメタデータをより認識しやすくする「Microdata」

#HTML5

#RIA

野中龍一

2011.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

機械がHTML文章の中のメタデータをより認識しやすくするための仕様です。
具体的には「itemscope」や「itemprop」などの特殊な属性を利用します。この属性を利用して、HTML文章内の情報を意味づけすることができます。

Microdataのサンプル

<section itemscope>
	<p itemprop="name">Ryuichi Nonaka</p>
	<p itemprop="age">24</p>
	<p itemprop="desc">都内で働く気ままなWeb制作者です。</p>
	<p itemprop="image"><img src="profile.png" alt="プロフィール画像" /></p>
</section>

Microdata専用の属性

以下を見てもらえればわかるように、Microdataはアイテム（item）という単位を重要視します。

itemscope
itemprop
itemtype
itemref
itemid

アイテムの宣言：itemscope

itemscopeは、アイテムの範囲を宣言します。
このサンプルでは、プロフィールを定義しています。ハイライトされたitemscopeの範囲がアイテムとして定義されます。

<section itemscope>
	<h1 itemprop="name">Ryuichi Nonaka</h1>
	<p itemprop="age">24</p>
	<p itemprop="desc">都内で働く気ままなWeb制作者です。</p>
	<p itemprop="image"><img src="profile.png" alt="プロフィール画像" /></p>
</section>

アイテムのデータを指定：itemprop

itempropはプロパティを定義し、その値を指定します。
このサンプルでは、名前（name）、年齢（age）、説明（desc）、画像（image）の４つのプロパティを定義しています。ただし、例外的にリンク、画像、時間は値の指定が特殊なかたちになります。

<section itemscope>
	<p itemprop="name">Ryuichi Nonaka</p>
	<p itemprop="age">24</p>
	<p itemprop="desc">都内で働く気ままなWeb制作者です。</p>
	<p><img itemprop="image" src="profile.png" alt="プロフィール画像" /></p>
	<time itemprop="bday" datetime="1986-08-22">1986年8月22日</time>
	<p><a itemprop="link" href="http://carava.co/">ブログ</a></p>
</section>

時間の場合

時間指定にtimeタグを利用した場合、datetime属性が値となります。

<section itemscope>
	<time itemprop="bday" datetime="1986-08-22">1986年8月22日</time>
</section>

リンクの場合

リンク指定の場合、href属性が値となります。

<section itemscope>
	<p><a itemprop="link" href="http://carava.co/">ブログ</a></p>
</section>

複数のプロパティを指定

半角スペースで区切ることで、複数のプロパティを定義することもできます。

<section itemscope>
	<p><a itemprop="blog link" href="http://carava.co/">ブログ</a></p>
</section>

フォーマットの指定：itemtype

hCardのボキャブラリを指定すると、fn, bday, url が hCard のプロパティと認識され、値となります。

<section itemscope itemtype=“http://microformats.org/profile/hcard”>
	<p><span itemprop=fn>Ryuichi Nonaka</span><p>
	<time itemprop="bday" datetime="1986-08-22">1986年8月22日</time>
	<p><a itemprop="url" href=“http://blog.carava.co/”>Blog</a></p>
	</section>

既存のボキャブラリ

プロパティの参照：itemref

itemrefはitemscope外のプロパティに対し、IDを与えることでそれをitemscope内のitempropとして取り込みます。

<section itemscope itemref="blogLink">
	<p itemprop="name">Ryuichi Nonaka</p>
	<p itemprop="age">24</p>
	<p itemprop="desc">都内で働く気ままなWeb制作者です。</p>
	<p><img itemprop="image" src="profile.png" alt="プロフィール画像" /></p>
	<time itemprop="bday" datetime="1986-08-22">1986年8月22日</time>
</section>

<p><a id="blogLink" itemprop="link" href="http://carava.co/">ブログ</a></p>

IDを与える：itemid

itemidはグローバルなIDを付与し、ボキャブラリで利用できるようにします。

<section itemscope itemid="xxx" itemtype=“http://microformats.org/profile/hcard”>
	<p><span itemprop=fn>Ryuichi Nonaka</span><p>
	<time itemprop="bday" datetime="1986-08-22">1986年8月22日</time>
	<p><a itemprop="url" href=“http://blog.carava.co/”>Blog</a></p>
	</section>