HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね…
さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど、よくあるシチュエーションで使いそうな実際のサンプルソースをいくつか挙げつつ、それに対して Microdata を追加してみて、こんな感じで使うんですよっていう例を示してみようかなと。
マークアップの一例ですので、ここで挙げた例が正しい使い方ですなんて言う気はありません。ただ、Microdata とかよくわからんっていう人が、あぁ、そんな感じにすればいいのねっていう最初の取っかかりになればいいなと思います。ちなみに、使用しているプロパティは schema.org で策定されているものに準拠しています。
では行ってみましょう。
個人のプロフィールなどで使えそうなサンプル
Blog などに個人のプロフィールを掲載している場合も多いと思いますが、よくありがちなプロフィールデータに Microdata を付与してみましょう。まずはサンプルのベースとなる HTML から。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>日本太郎のプロフィール</title> </head> <body> <header> <h1>日本三郎のプロフィール</h1> <p>日本三郎のプロフィールを掲載しています。</p> </header> <section> <h1>日本三郎のプロフィール</h1> <p><img src="/img/profile.png" alt="日本三郎の顔写真" /></p> <p>1980年1月1日、日本太郎の次男として生まれる。日本大学卒業後、父が経営する日本株式会社に入社。</p> <p>2012年に父の後を継ぎ、日本株式会社 代表取締役社長に就任、現在に至る。連絡は<a href="mailto:saburo@example.com">saburo@example.com</a>までお送りください。</p> </section> <footer> … </footer> </body> </html>
ありがちな感じですね。では、Microdata を追加していってみましょう。見出しなどは、見出しの要素に直接、文章の一部などに対しては、span 要素を使ってあげたりすれば大丈夫です。すると下記のようになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>日本三郎のプロフィール</title> </head> <body itemscope="itemscope" itemtype="http://schema.org/WebPage"> <header> <h1 itemprop="name">日本三郎のプロフィール</h1> <p itemprop="description">日本三郎のプロフィールを掲載しています。</p> </header> <section itemscope="itemscope" itemtype="http://schema.org/Person"> <h1 itemprop="name"><span itemprop="familyName">日本</span><span itemprop="givenName">三郎</span></h1> <p><img itemprop="image" src="/img/profile.png" alt="日本三郎の顔写真" /></p> <p><time itemprop="birthDate" datetime="1980-01-01">1980年1月1日</time>、日本太郎の次男として生まれる。日本大学卒業後、父が経営する日本株式会社に入社。</p> <p>2012年に父の後を継ぎ、<span itemprop="worksFor">日本株式会社</span> <span itemprop="jobTitle">代表取締役社長</span>に就任、現在に至る。連絡は<a itemprop="email" href="mailto:saburo@example.com">saburo@example.com</a>までお送りください。</p> </section> <footer> … </footer> </body> </html>
各属性に関する解説
ここで使用しているのは下記の 3つの属性になります。
- itemscope
- itemtype
- itemprop
itemscope 属性
itemscope 属性は簡単に言えば、この要素には Microdata を持ったデータが含まれてますよと宣言するための属性です。つまりこの属性が指定されていることが、その要素内で Microdata を使うためには必須ということです。
ちなみに、上のサンプルでは XHTML 文書で使用する場合を考慮し、itemscope="itemscope" と書いていますが、itemscope 属性は論理型の属性 （Boolean attributes） ですので、HTML 文書であれば
<body itemscope itemtype="http://schema.org/WebPage">
という書き方でも大丈夫。
itemtype 属性
itemscope 属性で、これから Microdata を使いますよーと宣言したら、次はじゃあどの種類の Microdata を使うの？っていうのを指定してあげます。それが itemtype 属性の役割。
上のサンプルでは 2種類の属性値を持った itemtype 属性があると思います。1つは、body 要素に指定された
itemtype="http://schema.org/WebPage"
と、section 要素に指定された
itemtype="http://schema.org/Person"
ですね。この属性値として指定されている URI が使用している Microdata の種別を表しています。この種別は schema.org で下記のように定められています。
最も上位に、「Thing」 という種別があり、その下に
といった感じに種別が存在し、さらに例えば 「CreativeWork」 の下には下記のような感じで続く、階層構造になっています。
それぞれの種別ごとに、次で述べる itemprop 属性で使用できる属性値が決められていて、これによって明確な意味付けができるというわけですね。
itemprop 属性
Microdata のプロパティを指定するための属性です。プロパティって、つまり属性なんですが、「Microdata の属性を指定する属性」 ってわかりにくいですね… なので、itemprop 属性の値に関して、ここではプロパティと呼びます。
上記 2つの属性、itemscope 属性で 「ここで Microdata 使いますよー」 と宣言、itemtype 属性で 「この種別のプロパティを使いますよー」 と指定して、この itemprop 属性で実際にプロパティを指定という流れですので、そう考えればそんなに難しい仕組みではないと思います。
で、itemprop 属性で指定するプロパティは、それを内包する要素に付与した itemtype 属性で指定した種別によって意味が確定します。また、先に階層構造になっていますと書きましたが、上位階層に位置する種別で使用できるプロパティは下位の階層に位置する種別でも使用できます。
例えば、上のサンプルで使用した 「Person」 という種別に含まれるプロパティは下記に一覧がありますが、
上位階層の 「Thing」 にあるプロパティも使えるますので、「name」 というプロパティは、「Person」 内で使用すれば、「人の名前」 として意味を伝えますし、他の種別、「Place」 内で使用すれば 「場所の名前」 になりますね。つまり、親要素に指定された itemtype 属性の値によって意味が変わるわけですが、それによって柔軟に意味づけを行うことができる仕組みになっています。
この、itemprop 属性で指定できるプロパティに関しては、Microdata の仕様の方には含まれていなくて、いくつかの団体が Microdata で使えるプロパティを定めていますが、schema.org もその中の 1つ。Google、Yahoo!、Microsoft という検索大手 3社が共同で設立し、Microdata を主軸に、セマンティックウェブを推進するための仕様策定を行っています。
会社情報などで使えそうなサンプル
次に、企業の会社情報などで使えそうな例を挙げてみます。例えば下記のような感じの会社情報データがあったとしますね。
<section>
<h1><img src="/img/logo.png" alt="日本株式会社" /></h1>
<p><img src="/img/company.png" alt="日本株式会社 本社社屋の写真" /></p>
<p>日本株式会社は日本の会社です。「にっぽんかぶしきがいしゃ」と読みます。主要製品「日本プリン」はお菓子の得点王です。</p>
<section>
<h1>会社概要</h1>
<table summary="会社概要">
<tr>
<th>会社名</th>
<td>日本株式会社</td>
</tr>
<tr>
<th>会社名 英語表記</th>
<td>Nippon Co., Ltd.</td>
</tr>
<tr>
<th>会社設立日</th>
<td>1940年1月1日</td>
</tr>
<tr>
<th>代表取締役社長</th>
<td>日本三郎</td>
</tr>
<tr>
<th>本社住所</th>
<td>
〒100-1000<br />
東京都港区赤坂 0-0-0 日本ビル 1階
</td>
</tr>
<tr>
<th>電話番号</th>
<td>03-0000-0000</td>
</tr>
<tr>
<th>FAX番号</th>
<td>03-0000-0000</td>
</tr>
</table>
</section>
</section>
Microdata を付与してみましょう。
<section itemscope="itemscope" itemtype="http://schema.org/Corporation">
<h1><img itemprop="logo" src="/img/logo.png" alt="日本株式会社" /></h1>
<p><img itemprop="image" src="/img/company.png" alt="日本株式会社 本社社屋の写真" /></p>
<p itemprop="description">日本株式会社は<span itemprop="addressCountry">日本</span>の会社です。「にっぽんかぶしきがいしゃ」と読みます。主要製品「<span itemprop="brand">日本プリン</span>」はお菓子の得点王です。</p>
<section>
<h1>会社概要</h1>
<table summary="会社概要">
<tr>
<th>会社名</th>
<td><span itemprop="name" lang="ja">日本株式会社</span></td>
</tr>
<tr>
<th>会社名 英語表記</th>
<td><span itemprop="name" lang="en">Nippon Co., Ltd.</span></td>
</tr>
<tr>
<th>会社設立日</th>
<td><time itemprop="foundingDate" datetime="1940-01-01">1940年1月1日</time></td>
</tr>
<tr itemprop="member">
<th itemprop="jobTitle">代表取締役社長</th>
<td><span itemprop="familyName">日本</span><span itemprop="givenName">三郎</span></td>
</tr>
<tr>
<th>本社住所</th>
<td>
〒<span itemprop="postalCode">100-1000</span><br />
<span itemprop="addressRegion">東京都</span><span itemprop="addressLocality">港区</span><span itemprop="streetAddress">赤坂 0-0-0 日本ビル 1階</span>
</td>
</tr>
<tr>
<th>電話番号</th>
<td><span itemprop="telephone">03-0000-0000</span></td>
</tr>
<tr>
<th>FAX番号</th>
<td><span itemprop="faxNumber">03-0000-0000</span></td>
</tr>
</table>
</section>
</section>
上の例では、Thing > Organization の下層にある 「Corporation」 を指定しています。
Blog の記事などで使えそうなサンプル
お次は Blog の記事とか、会社の Web サイトで言えばプレスリリースみたいな記事のページを例に挙げてみましょう。
記事一覧の場合
例えば、1ページに複数の記事が並んでいる、記事一覧ページがあったとします。下記のような感じですね。
<div class="articleList"> <article id="articleNo002"> <header> <h1><a href="/article_002.html">新商品「日本ゼリー」を発売開始しました</a></h1> <p>日本株式会社は、2012年12月5日、新商品として日本ゼリーを発売しました。</p> </header> <p><img src="/img/product.png" alt="新商品「日本ゼリー」の写真" /></p> <footer> <p>投稿日時 ： 2012年12月5日 12時51分37秒</p> </footer> </article> <article id="articleNo001"> …省略… </article> </div>
この場合なら、Microdata を付与すると下記のような感じになるかもしれません。
<div class="articleList"> <article id="articleNo002" itemscope="itemscope" itemtype="http://schema.org/Article"> <header> <h1 itemprop="name"><a itemprop="url" href="/article_002.html">新商品「日本ゼリー」を発売開始しました</a></h1> <p itemprop="description">日本株式会社は、2012年12月5日、新商品として日本ゼリーを発売しました。</p> </header> <p><img itemprop="image" src="/img/product.png" alt="新商品「日本ゼリー」の写真" /></p> <footer> <p>投稿日時 ： <time itemprop="datePublished" pubdate="pubdate" datetime="2012-12-05T12:51:37+09:00">2012年12月5日 12時51分37秒</time></p> </footer> </article> <article id="articleNo001" itemscope="itemscope" itemtype="http://schema.org/Article"> …省略… </article> </div>
article 要素に
itemtype="http://schema.org/Article"
を指定していますが、Blog の場合なら、「Article」 の下層に 「BlogPosting」 という種別がありますので、それを指定して、
itemtype="http://schema.org/BlogPosting"
としてもいいですね。
個別記事ページの場合
個別の記事ページで、下記のようなページがあったとしたら、
<article> <header> <h1>新商品「日本ゼリー」を発売開始しました</h1> <p>日本株式会社は、2012年12月7日、新商品として日本ゼリーを発売しました。</p> </header> <p><img src="/img/product.png" alt="新商品「日本ゼリー」の写真" /></p> <p>日本株式会社は、2012年12月7日、新商品として日本ゼリーを発売しました。創業以来培ってきた秘伝の技術が云々…</p> <p>全国の百貨店等でお買い求めいただけます。</p> <section> <h1>商品に関するお問い合わせ</h1> <p>商品に関するお問い合わせは下記の連絡先までお願いします。</p> <p> 日本株式会社 営業部<br /> 電話番号：03-0000-0000 / FAX番号：03-0000-0000 </p> </section> <footer> <p>投稿日時 ： 2012年12月5日 12時51分37秒</p> </footer> </article>
Microdata を付与するとこんな感じですかね。
<div itemscope="itemscope" itemtype="http://schema.org/Article">
<article>
<header>
<h1 itemprop="name">新商品「日本ゼリー」を発売開始しました</h1>
<p itemprop="description">日本株式会社は、2012年12月7日、新商品として日本ゼリーを発売しました。</p>
<meta itemprop="url" content="http://example.com/article_002.html" />
</header>
<div itemprop="articleBody">
<p><img itemprop="image" src="/img/product.png" alt="新商品「日本ゼリー」の写真" /></p>
<p>日本株式会社は、2012年12月7日、新商品として日本ゼリーを発売しました。創業以来培ってきた秘伝の技術が云々…</p>
<p>全国の百貨店等でお買い求めいただけます。</p>
<section>
<h1>商品に関するお問い合わせ</h1>
<p>商品に関するお問い合わせは下記の連絡先までお願いします。</p>
<p itemprop="creator" itemscope="itemscope" itemtype="http://schema.org/Organization">
<span itemprop="contactPoint">日本株式会社 営業部</span><br />
電話番号：<span itemprop="telephone">03-0000-0000</span> / FAX番号：<span itemprop="faxNumber">03-0000-0000</span>
</p>
</section>
</div>
<footer>
<p>投稿日時 ： <time itemprop="datePublished" pubdate="pubdate" datetime="2012-12-05T12:51:37+09:00">2012年12月5日 12時51分37秒</time></p>
</footer>
</article>
</div>
itemref 属性
今までは、すべて itemscope した要素に Microdata を付与したデータが内包されている前提でマークアップしてきましたが、文書構造上、必ずしもそうならないときもあります。例えば、記事本文のブロックとは別の場所、例えばページのフッタなどにその記事を書いた執筆者のプロフィールがあるような場合に、記事本文と、執筆者の情報を関連付けたい時、itemref 属性が便利です。
文章で説明してもわかりにくいと思いますので下にサンプルを挙げますが、
<div itemscope="itemscope" itemtype="http://schema.org/Article"> <article> …省略… </article> </div> …省略… <footer> <p id="author">記事の著作者名などがここに書いてあったとします。</p> </footer>
上記のように、記事ページのフッタにあるデータを記事の著作者として関連付けたい場合、下記のように itemref 属性を使って、その関連付けたいデータを内包する要素の id 属性を指定した上で、itemprop 属性でプロパティを指定します。
<div itemscope="itemscope" itemref="author" itemtype="http://schema.org/Article"> <article> …省略… </article> </div> …省略… <footer> <p id="author"><span itemprop="author">記事の著作者名</span>などがここに書いてあったとします。</p> </footer>
ちなみに、
itemref="a b c"
のように、複数の id 属性を指定して関連付けることも可能です。ただし、itemscope 属性が指定された要素以外では使ってはいけません。必ず、itemref 属性と itemscope 属性はセットで使用します。
その他のサンプル
その他にも、Blog とかで使いそうなサンプルを下記に。
例えば、記事に対するコメントとかにも使えますし…
<div itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
<article>
…省略…
<aside>
<h1>この記事に寄せられたコメント</h1>
<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">
<p itemprop="commentText">とても参考になりました。ありがとうございます。</p>
<p><time itemprop="commentTime" datetime="2012-12-05">2012年12月5日</time>に<span itemprop="creator">世界二郎</span>さんがコメント</p>
</div>
</aside>
</article>
</div>
イベントなんかだと、下記のような感じですかね。
<div itemscope="itemscope" itemtype="http://schema.org/Event"> <h1 itemprop="name">HTML5 勉強会 in 軍艦島</h1> <dl> <dt>開催日</dt> <dd> <time itemprop="startDate" datetime="2013-01-01T10:00:00+09:00">2013年元旦 10時</time> ～ <time itemprop="endDate" datetime="2013-01-01T18:00:00+09:00">18時</time> </dd> <dt>開催場所</dt> <dd itemscope="itemscope" itemprop="location" itemtype="http://schema.org/Place"> <a itemprop="url" href="http://ja.wikipedia.org/wiki/%E8%BB%8D%E8%89%A6%E5%B3%B6" target="_blank">軍艦島</a> </dd> <dt>会場住所</dt> <dd itemscope="itemscope" itemprop="address" itemtype="http://schema.org/PostalAddress"> <span itemprop="addressRegion">長崎県</span><span itemprop="addressLocality">長崎市</span><span itemprop="streetAddress">端島</span> </dd> <dt>チケット</dt> <dd itemscope="itemscope" itemprop="offers" itemref="paymentMethod" itemtype="http://schema.org/AggregateOffer"> お一人様: <span itemprop="price">1,000円</span><br /> 残りチケットは<span itemprop="offerCount">10</span>枚です。お早めにどうぞ。 </dd> <dt>お支払い方法</dt> <dd id="paymentMethod" itemprop="acceptedPaymentMethod">現地で現金払い</dd> </dl> </div>
上の例では、itemref 属性の使い方としてもサンプルになっています。
あと、上のサンプルではすべて body 要素以下で使っていますが、head 要素内とかでも使えますよ。
<!DOCTYPE html> <html lang="ja" itemscope="itemscope" itemtype="http://schema.org/WebPage"> <head> <meta charset="utf-8" /> <title itemprop="name">文書のタイトル</title> <meta itemprop="description" content="文書の概要テキスト" /> <link itemprop="author" href="http://example.com/aboutme/" /> </head>
ということで、長かった… 最初にも書きましたが、ここで挙げたサンプルソースはあくまでひとつの例ですので、これが正しいマークアップですということはありません。ただ、何となくこんな感じで使うのねってことはおわかり頂けるかと思いますので、あとは実際の文書内容に応じて調整してみてください。
本気で間違っている点があれば指摘してもらえるとありがたいです。たくさんソース書いたのでチェックが抜けてるかも。
2012年12月19日追記
一部のソースコードに間違いがありましたので修正しました。ご指摘感謝です。
2013年1月23日追記
補足記事を書きました。「meta 要素に対する Microdata の指定」
では最後に、もう少し詳しく知りたいっていう方向けに、下記に参考リンクを掲載しておきます。
