イベント情報を検索結果に出せるようにhCalendarマイクロフォーマットで書いてみよう

今日はマイクロフォーマット（microformats）について話そう。マイクロフォーマットとは、HTMLを拡張する形でページ内に記述することで、ページ内の特定データに意味を持たせるためのものだ。公式な定義を引用すると、「人やイベント、ブログ記事、レビュー、タグのような、一般的に公開されているものをWebページ上で記述する際に使うマークアップのルール」となる。SEO担当者にとって、特にサイト内にレビュー、レシピ、連絡先情報や場所のデータがある場合は、マイクロフォーマットで追加のマークアップをすることで、グーグルの検索結果ページに表示されるスニペットでよりわかりやすく表示されるようになる。

この記事では、ウェブサイトにイベント告知のデータを持つウェブ運営者が使えるマイクロフォーマット標準を取り上げる。カンファレンスや催し物、演劇、さらにはオペラなどを考えてほしい。これらはみな、マイクロフォーマットのhCalendarというコンポーネントで記述できるイベントだ。

イベント主体のリッチスニペットはどう表示されるか？

hCalendarを使って改善したリッチスニペットが表示されている検索結果の一例を紹介しよう。

この検索結果は東京で催されるIT系のイベントを紹介するサイトのもので、イベントカレンダーページで紹介されているイベントがグーグルの検索結果に取り込まれているのがわかる。

hCalendarマイクロフォーマットとは？

Microformats.orgによるhCalendarの定義を紹介しよう。ちょっと技術者寄りだが、過不足なく説明されているので、心して読んでほしい。

hCalendarは、カレンダーとイベント情報を配信するためのシンプルでオープンなフォーマットであり、セマンティックHTMLあるいはXHTMLにおけるiCalendar（RFC2445）標準のVEVENT（Vイベント）コンポーネントで用いられるプロパティおよび値と1対1で対応する。hCalendarは、いくつかあるオープンなマイクロフォーマット標準の1つであり、HTML、XHTML、Atom、RSS、および任意のXMLに埋め込むのに適している。

どのプロパティに注意を払うべきか？

グーグルはウェブページのマークアップのなかで、次のようなhCalendarマイクロフォーマットの要素に注目する（イベント情報に関するグーグルのヘルプ）。リストアップした要素のすべてが必須というわけではないが、データがあるならできるだけ完璧な形で正しく実装した方がお得だろう。グーグルでは、注目している要素を次のように分類している。

イベント情報実装の例

この間、僕らは数人でWirelessフェスティバル（7月2日～4日開催）に行き、太陽の下で音楽と（そしてもちろん）ちょっとだけビールを楽しんできた。そんなわけで、このイベントをウェブサイトで紹介すると仮定しよう。

HTMLはこんな感じになるだろうか。

<div>
<a href="http://www.wirelessfestival.co.uk/lineup/">Wireless 2010</a>
<img src="wireless.jpg" />
<p>4つのステージで繰り広げられる世界的演奏
しかも、素晴らしい音楽だけに留まらず、
見どころは盛りだくさん……</p>
<ul>
<li>日時：7月3日（土）12:00pm～11:00pm</li>
<li>会場：ロンドン、ハイドパーク</li>
<li>カテゴリ：コンサート</li>
</ul>
</div>

ではこのイベントをhCalendarの要素でマークアップするとどうなるだろうか。

<div class="vevent">
<a href=”http://www.wireless.co.uk/" class="url summary">Wireless 2010</a>
<img src="wireless.jpg" class="photo" />
<p><span class="description">
4つのステージで繰り広げられる世界的演奏
しかも、素晴らしい音楽だけに留まらず、
見どころは盛りだくさん……
</span></p>
<ul>
<li>日時：
<span class="dtstart">
  7月3日 12:00pm
  <span class="value-title" title="2010-07-03T1200Z00"></span>
</span>
～
<span class="dtend">
  11:00pm
  <span class="value-title" title="2010-07-03T2300Z00"></span>
</span>
</li>

<li>会場：
<div class="location vcard">
  <span class="fn org">ハイドパーク</span>,
  <span class="adr">
    <span class="region">ロンドン</span>
    <span class="locality">パディントン</span>,
    <span class="street-address">ハイドパーク</span>,
  </span>
  <span class="geo">
    <span class="latitude">
      <span class="value-title" title="51.50716" ></span>
    </span>
    <span class="longitude">
      <span class="value-title" title="-0.17066" ></span>
    </span>
  </span>
</div>
</li>

<li>カテゴリ：<span class="category">コンサート</span></li>
</ul>
</div>

たいていの場合、これは実装も簡単で、CSSの変更もほんの少しだけだ。実装にどれくらい作業が必要かウェブ制作者と話し合ってみよう。

テストして、実装する

利用できるイベントデータがサイト上にすでに書かれている場合、マイクロフォーマットの実装はかなり楽だ。グーグルは、マイクロフォーマットをもう少し簡単に利用できるように、URLを指定すればマークアップが正しいかどうか確認できるリッチスニペットのテストツールを公開している（ツール自体は英語版のみだが、日本語での説明が提供されている）。

ただし、リッチスニペットがグーグルの検索結果に表示されるようになるまでは時間と忍耐が必要だ。グーグルはサイトを一件ずつ審査しているから、次にやるべきはこのフォームに入力して待つことだ。とはいえ、忍耐は報われる。グーグルはセマンティックウェブと構造化データを非常に重視している。サンフランシスコで開かれたSemantic Technology Conference（SemTech 2010：6月21～25日）を報じた記事によれば、リッチスニペットは現在40の言語で利用でき、検索結果に表示されるリッチスニペットの件数は2009年10月時点から4倍に増えているという。グーグルは将来、ビデオ、地元の企業やショッピングなど、サポートするフォーマットを拡大していく計画だ。すばらしい！

マイクロフォーマットを含むリッチスニペットについてもっと知りたければ、グーグルヘルプのリッチ スニペットと構造化マークアップを調べてみるといいだろう。

また、ヨースト・デ・ファルク氏がWordpressでhReviewを実装する方法をすばらしいチュートリアルで解説している（英語）。また、45分ほど時間があれば、デ・ファルク氏と僕が、WebmasterRadio.FMの番組「State of Search」で、マイクロフォーマットとSEOに及ぼす影響について、バス・ファン・デン・ベルト氏とともに論じているから、聞いてみてほしい（英語）。