イベント情報の構造化データを使って、検索結果で注目を集めよう

先日、パンくずリストの構造化マークアップについて記事を投稿したところ、思わぬ反響があり非常にたくさんの方にご覧いただきました。
でもご存知でしたか?実は構造化マークアップを適用できるポイントはこんなにたくさんあるんです!
- イベント
- ソフトウェア アプリケーション
- パンくずリスト
- レシピ
- レビュー
- 人物
- 動画
- 商品
- 組織
今日はバレンタインデーということで、この中でも「イベント」情報の構造化マークアップについてご紹介します。(無理やり)
定期的に事例紹介セミナーを開催しているIT会社さんや町おこしの一環で毎月イベントを開いている自治体など、もしかするとあなたのサイトに当てはまることもあるのでは無いでしょうか?
検索結果の占有率が広がるイベント情報のリッチスニペット
まずはイベント情報を構造化データとしてマークアップすることによるメリットをご覧いただきましょう。

これは@ITさんの例。いかがですか?目立ってますでしょう?イベント情報は3行で表示されることが多く、検索結果における占有面積は通常の1.5倍近くなります。
またパンくずリストにせよイベント情報にせよ、Googleは構造化マークアップを適用すればかなり高い確率でリッチスニペットとして採用してくれます。
おそらく普及率がいまひとつであるため、積極的に検索結果に取り入れているのでは無いでしょうか。裏を返せば、Googleはページの中身をもっと伝えて欲しいんですよね。これは私が構造化データやセマンティック・マークアップ(HTMLコードが持つ意味情報に配慮したコーディング)にこだわる理由でもあります。
イベント情報をmicrodata形式で構造化する
では具体的なコーディング方法の例をご紹介しましょう。以前もお伝えした通り構造化マークアップの形式にはmicrodata、microformats(前述の@ITさんはこの方式を採用)、RDFaなど、仕様が乱立していましたが紆余曲折ありまして現在はmicrodata形式(schema.orgが定義)が主流になりつつあります。
microdata形式でイベント情報をマークアップする際に必須の属性は以下の通り。
- summary
- イベント名。
- url
- 詳細ページのリンク先URL。
- startDate
- 開始日時。
- location
- 場所。(複数ある場合は省略可)
この他にもイベントの「説明文」や「終了日時」など、たくさんオプションがあるんですが、あんまり色々伝えすぎると読者の方をゲンナリさせてしまうので詳しく知りたい方はウェブマスター ツール ヘルプの該当ページをご覧ください。
以下では必須の属性のみを用いてサンプルを記述します。
適用前
<dt>イベント名</dt>
<dd>手作りチョコレート講座</dd>
<dt>日時</dt>
<dd>2012年2月14日午前10時</dd>
<dt>場所</dt>
<dd>バレンタイン公民館</dd>
</dl>
適用後
<dt>イベント名</dt>
<dd><a href="http://www.example.com/event/01.html" itemprop="url" ><span itemprop="summary">手作りチョコレート講座</span></a></dd>
<dt>日時</dt>
<dd itemprop="startDate" datetime="2012-02-14T10:00+09:00">2012年2月14日午前10時</dd>
<dt>場所</dt>
<dd itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization"><span itemprop="name">バレンタイン公民館</span></dd>
</dl>
一見複雑に見えますが、適用前・後で追加されている内容に注目していただければそんなに難しいこと書かれていないことに気づいていただけるはずです。特にイベント情報を動的に出力しているサイトなどは一括で実装可能なケースもあるでしょう。
HTMLコードに自信が無い方は、システム担当者の方や制作会社さんにこの記事を見せて相談してみてください。
外部リンクが増えなくても、ユーモアあふれるコンテンツを掲載することが難しくても、自分たちでできることをやり切る。それだけで少しずつ結果は変わってくるはずです。


COMMENTS
皆様のコメントをお待ちしております。
ご意見・ご感想はTwitter、Facebook、Googleプラスからもどうぞ。