Microdata を使ってイベント情報をページに埋め込む。

この記事は すごい広島 #005 で調べたこととかです。その2。 すごい広島 は個人的な思惑として、「広島にいる表に出てこないエンジニアを発掘する。」という裏の目的があったりなかったりします。 そのためには、SEOとして効果のありそうな技術もいろいろ試してみよう。 ということで、Microformatsを使ってウェブページにイベント情報を付与してみようと思いました。 以前、ブラウザの拡張を使えば、「カレンダーアプリケーションへイベント登録が簡単にできる。」という噂を聞いたことがあったからです。 調べてみると、HTML5 には Microdata というものがあるみたいなので、Microdataを試すことにしました。 しかし、結局カレンダーに簡単に登録する方法はわかっておりません。 Microdata コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - Web Design KOJIKA17 より引用 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3… )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の仕様からMicrodataというものができました。 類似の技術には、MicroformatsやRDFaなどがあります。 これらMicrodata,Microformats, RDFaを指す言葉として「Semantic HTML」などと呼ばれています。 一応自分の理解で説明してみます。 人間はページを読んでこれは「イベント情報だ」とか、「会社の情報だ」とか認識する能力がありますが、コンピュータにはわかりません。 なので、コンピュータがわかるようにするためのルールを用意しました。 このルールに従ってHTMLを書いてください。 というものだと思います。 仕様とかは下記をみてください。 Microdata Working Draft Microdata と Microformats せっかく Microfrmats の話もしたので、比較ページとしては下記のものが面白っかたです。 マイクロフォーマット(microformats) vs. マイクロデータ(microdata) - 檜山正幸のキマイラ飼育記 実際に使ってみた すごい広島のイベントページに使ってみました。 イベントの情報として、場所や日時、名前を設定しています。 Google ウェブマスターツールの構造化データ テストツールを使うと内容や、Google検索での結果を確認することができます。 赤枠の部分に日付や場所が表示されています。 具体的な読取した結果も確認できます。 この部分のHTMLは下記のようにしました。 <div itemscope itemtype="http://schema.org/Event"> <h1>日時</h1> <span itemprop="startDate" content="2013-06-26T19:00">2013年06月26日 19:00</span> <h1>開催場所</h1> <div itemprop="location" itemscope