GooglePlay、YouTubeも導入しているマイクロデータschema.orgとは？

セマンティック・ウェブとマイクロデータの関係

第3回となる今回は、マイクロデータについて取り上げます。マイクロデータは、文書の意味や属性を伝える構文の１つで、セマンティック・ウェブの実現には不可欠です。HTML5はページの「構造」を伝えるものですが、マイクロデータは、「属性（エンティティ）」を伝えるものです。

マイクロデータの前に、セマンティック・ウェブについて簡単におさらいしましょう。セマンティック・ウェブとは、ウェブ上にあるあらゆる情報を、データとして正確に認識し整理しようする考え方、技術の向上を促進する動きを指します。詳しくは第1回をご覧ください。

セマンティック・ウェブを実現すると、検索エンジンをはじめとする様々なプログラムは、ユーザーが欲しい情報やそれに関連した多くの情報を正確に提供できるようになります。そのためには、HTMLの文書から、情報やデータなどのいわゆる「属性」や「意味」を、検索エンジンやプログラムに伝えることが必要です。HTML5は文書構造のアウトラインを伝えることができますが、文書内の属性を伝えることができません。そこで、必要となるのがマイクロデータなどのセマンティックなマークアップを実現する構文になります。

属性を伝えるためのマークアップにはいくつかの構文があります。マイクロデータはその構文の１つで、他の代表的な例としては、マイクロフォーマットやRDFaなどが挙げられます。基本的にこれら3つの構文は、HTML文書、またはXHTML文書内に使用することで、文書内の情報やデータを意味づけし、「属性」を伝えることができますが、マークアップ方法や仕様などが異なります。

なぜ、マイクロデータを採用しているのか、それには理由があります。

それは、マイクロデータは他の構文と比べて「サイトへの導入がしやすい」ことです。また、この後に詳しく説明するschema.orgの優先構文としてもマイクロデータは採用されており、現時点ではGoogleも推奨していることも理由として挙げられます。

なぜ、マイクロデータは他の構文と比べて導入しやすいのでしょうか。それは、拡張性とシンプルさを両立しているからです。

もともとマイクロデータはHTML5の一部の仕様だったものが独立してできました。それゆえ、HTML5とともに成長した規格として、HTML5で提唱されていた拡張性とシンプルさが引き継がれています。
→参照：HTML Microdata

図1：HTML5マイクロデータの仕様書（クリックで拡大）

マイクロデータは、マイクロフォーマットと比較して、シンプルになり、定義がしやすく、汎用性も改善されました。また、マイクロデータの値は標準的なDOM操作で取り扱うことができます。加えて、RDFaのメリットであった拡張性も持ち合わせています。マイクロデータはRDFaの拡張性と、マイクロフォーマットの簡易性の、中間の性質を持つと言う理由からGoogleもマイクロデータを推奨しているようです。

マイクロデータのマークアップ導入例

上記の理由から、マイクロデータを採用したマークアップが今後トレンドとなると予想されるため、マイクロデータを使用した導入例を説明していきます。まず、マイクロデータでマークアップする際に使用するのは、主に以下の3つの要素です。

• itemscope
• itemtype
• itemprop

これらは基本的に、div要素やspan要素などのHTML要素内に追記して使用することとなります。では実際に、例を挙げながら進めていきましょう。

以下のような文書があるとします。

<section>
<h1>映画：タイタニック</h1>
監督：ジェームズ・キャメロン
出演：レオナルド・ディカプリオ
      ケイト・ウィンスレット
あらすじ：
アカデミー賞11部門を受賞した、ジェームズ・キャメロン監督、レオナルド・ディカプリオ、ケイト・ウィンスレット主演の大ヒットラヴストーリー
</section>

この場合、まずは、マイクロデータで意味づけをしたいブロックを定義します。ここで使用するのが「itemscope」です。マークアップ例は以下になります。

<section itemscope>
<h1>映画：タイタニック</h1>
監督：ジェームズ・キャメロン
出演：レオナルド・ディカプリオ
      ケイト・ウィンスレット
あらすじ：
アカデミー賞11部門を受賞した、ジェームズ・キャメロン監督、レオナルド・ディカプリオ、ケイト・ウィンスレット主演の大ヒットラヴストーリー
</section>

itemscopeは、「これからこのブロックに意味づけをします」と伝えるための宣言です。ここでは

、

タグで囲またHTMLのブロックが、何か意味を示そうとしている、と言うことが定義されています。

しかし、これだけでは「何らかのデータ」を表していることは分かっても、「どんな種類のデータ」かは分かりません。そこで使用するのが、「itemtype」です。itemtypeは、itemscopeの直後に使用し、基本的にはセットで使用します。

<section itemscope itemtype=”http://schema.org/Movie”>
<h1>映画：タイタニック</h1>
監督：ジェームズ・キャメロン
出演：レオナルド・ディカプリオ
ケイト・ウィンスレット
あらすじ：
  アカデミー賞11部門を受賞した、ジェームズ・キャメロン監督、レオナルド・ディカプリオ、ケイト・ウィンスレット主演の大ヒットラヴストーリー
</section>

ここで初めて、このセクションが「映画」についてのセクションであると意味づけができました。このitemtypeの指定には、データの種類を表すURLが入ります。itemtypeに指定できるURLを規定しているのは、schema.orgやdata-vocabulary.orgなどの「ボキャブラリ」（語彙）であり、そのボキャブラリが定義しているタイプに沿って、意味づけの指定をします。上記の例は、schema.orgに定義されている「Movie」タイプを使用し、このセクションが映画についての意味を示していることを指定しています。このボキャブラリについては後で詳しく説明するとし、ここでは、マイクロデータのマークアップ例を続けます。

さて、マークアップをしたこのセクションは、itemtypeでデータ型を指定し、「映画」についてのセクションであるということが意味づけできました。しかしまだ、映画についての詳細情報までは意味づけできていません。

さらに詳細な意味づけをするために使用するのがitempropです。itempropはそのデータ型が定義しているプロパティ名を指定します。schema.orgを使用したプロパティの指定は以下になります。

<section itemscope itemtype=”http://schema.org/Movie”>
<h1 itemprop=”name”>映画：タイタニック</h1>
監督：<span itemprop=”director”>ジェームズ・キャメロン</span>
出演：<span itemprop=”actors”>レオナルド・ディカプリオ</span>
      <span itemprop=”actors”>ケイト・ウィンスレット</span>
あらすじ：
<span itemprop=”description”>アカデミー賞11部門を受賞した、ジェームズ・キャメロン監督、レオナルド・ディカプリオ、ケイト・ウィンスレット主演の大ヒットラヴストーリー</span>
</section>

各itempropで、name（映画名）、director（監督）、actors（出演者）などを表していることがお分かりかと思います。これでようやく、1つ1つの文書または文字群に対して、どんな「属性」であるかを意味づけすることができました。