Moz - SEOとインバウンドマーケティングの実践情報

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

検索エンジンの検索結果ページでリッチスニペットとしてイベント情報が表示させる方法
この記事の内容はすべて筆者自身の見解であり(ありそうもないことだが、筆者が催眠状態にある場合を除く)、SEOmozの見解を反映しているとは限らない。

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

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

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

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

hEventリッチスニペットの例

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

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

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

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

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

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

プロパティ説明
summary必須。イベント名。
urlイベントの詳細ページへのリンク。
locationイベントが開催される場所や会場。組織や住所のデータを入れ子にして表すこともできる。マークアップを含むページが会場に関するページでない場合や、イベントごとに場所が異なる場合は、指定することを推奨。
descriptionイベントの説明。
startDate (dtstart)必須。イベントの開催日時。ISO日付形式で指定。
endDate (dtend)イベントの終了日時。ISO日付形式で指定。
durationイベント開催期間。ISO日付形式で指定。
eventType (category)「祭り」「コンサート」「講座」など、イベントの種類。
geo場所の物理的座標を指定。latitudeとlongitudeという2つの要素を含む。省略可能。
photoイベントに関する画像や写真へのリンク。

イベント情報実装の例

この間、僕らは数人で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に及ぼす影響について、バス・ファン・デン・ベルト氏とともに論じているから、聞いてみてほしい(英語)。

用語集
Atom / CSS / HTML / RSS / SEO / スニペット / リッチスニペット / リンク / 検索エンジン / 構造化データ
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]