この記事は公開されてから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」の転載です。