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

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

Clock Icon2011.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)の4つのプロパティを定義しています。ただし、例外的にリンク、画像、時間は値の指定が特殊なかたちになります。

<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>

参考リンク

Microdataはすぐに利用でき、Googleなどの検索エンジンに対してパンくずリストやレビュー、イベントスケジュールなどの情報を認識させることができます。
Webサイト、Webアプリケーション共に利用できる機会も多いと思います。

この記事は「Microdata」の転載です。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.