css,javascript,actionscriptを中心に勉強したことをまとめるブログ

先日の「HTMLの移り変わりを図にしてみた」のエントリで、

たとえば、XHTML内で<address>タグで囲った部分が、どこかのデータベースに自動的に格納されてあるページで全てのホームページの住所や連絡先が分かってしまうような世界なんかになるんでしょうか・・。

というようなことを書いていたんですが、もうあるんですね。「マイクロフォーマット」というものがそれにあたるってことをやっと知りました。自分としては、HTMLコンテンツがデータベース化できるっていうことはとても興味深いことなので、いろいろ調べてみました。

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

まず、マイクロフォーマットとはなんだろうかということですが、HTML内の決められたデータを決められたタグでマークアップし、それをweb上でデータベース化してしまおうということ。
現在、HTMLからXHTMLへの移行が少しづつしてきています。しかし、それだけではXHTML上のデータをデータベース化はできません。それは、同じデータなのに、作り手によってマークアップするタグが変わってしまっているからです。
あるブログの電話番号は<address>タグでマークアップされているのに、別のブログでは<span>でマークアップされてる。これでは、うまくパースできません。まあ、現場からすれば当たり前のことですよね。全てのブログ、会社サイト、ECサイトで同じデータのマークアップを揃えるなんて不可能ですからね。

これを同じタグでマークアップしましょうよ、というのが「マイクロフォーマット」になります。
電話番号にはこのタグ（正確にはclassやrel属性ですが）、商品のレビュー記事にはこのタグ、というように決まりを作り、コンテンツをデータベース化できるようにしようということです。

マイクロフォーマットのマークアップの種類

マイクロフォーマットで決められているマークアップはたくさんあります。代表的なところでは、

• hCalender - イベント情報
• hCard - 連絡先情報
• hReview - 商品等のレビュー
• rel-tag - フォークソノミー（タグ）

などです。他にもかなりありますので、詳しくは「microformats Wiki」をご覧下さい。

マイクロフォーマットのマークアップの方法

上記の中で、hcardを例に挙げると、以下のようにマークアップします。

<div class="vcard">
<div class="fn">taro yamada</div>
<div class="org">The Example Company</div>
<div class="tel">123-456-7890</div>
<a class="url" href="http://wonder-boys.net/">http://wonder-boys.net/</a>
</div>

見るとわかるように、使うのは通常のXHTML。重要なのは、このタグにつけるclass等の属性値。これが決められています。

• class=”vcard” - 一番外側に指定する。この中の情報が「hcard」の情報だということ。
• class=”fn” - 名前
• class=”org” - 所属名
• class=”tel” - 電話番号
• class=”url” - URL

一番外側のタグにvcardをつけ、その中のコンテンツにそれぞれ決められた属性値を指定するだけ。これで、マイクロフォーマットの完成です。

マイクロフォーマットはどのように使われているか。

じゃあ、このマークアップされたデータベースは現在どのように使われているのか？
マイクロフォーマット自体は割りと前からあるようですが、（使われだしたのは2003～2004年のようです）浸透しているとはまだいえません。（僕も、知らなかったですし・・・）まだまだ使っている企業なんかは少ないのかなと思ったんですが、Technorati、Mozilla Foundation、IBM、Microsoft、Google、Digg、Yahoo! といった企業ではもうだいぶ使われているようです。

例えば、google mapの検索結果データは、マイクロフォーマットでマークアップされています。その他、appleストアのレビューなんかもマイクロフォーマットでマークアップされていますね。気づかないところで色々と使われているようです。
日本の企業でもサイト内で使っている例はいくつかありますね。

一方で、このデータベースを活用する方法はというと、メジャーなアプリケーションというのはまだ存在しないようです。ただ、ブラウザのアドオンや、サイト内で使われているマイクロフォーマットをパースするライブラリ等はすでにあります。
アドオンの例としては、

• Firefoxアドオン - 「Tails Export」
• Firefoxアドオン - 「Operator」
• Safariプラグイン - 「Safari Microformats plugin」

等ですかね。
どれも、閲覧しているサイトのマイクロフォーマット情報を表示して、かつgoogle mapやアドレス帳とリンクできるような機能になっているようですね。
それから、IE8にも「Web Slice」という機能がつくみたいです。これは、RSS機能のようなもので、マイクロフォーマットのhAtomと独自のWebsliceを使いデータを配信する仕組みのようです。
詳しくは「IE8 Beta 1でWebSliceを使う方法」に書いてありますので見てみてください。

メジャーな、アプリはないものの、デベロッパーサイドの環境はだいぶ整っているなあと思います。

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

最近では、yahoo!やGoogleまたmicrosoftまでがマイクロフォーマットを使うと宣言しています。検索サイトを持つ大手が言っているのであれば、SEOにも少しくらい関わってくると思うんですがどうなんでしょう？

yahoo!（米国版）においては「search monkey」という技術を公開しています。seach monkeyのサイトを見てもらえばわかる様に、通常の検索結果にレビューや連絡先、画像なんかを載せることができるようになっています。（※日本語での解説サイトが見つからなかったので詳細までは分かりませんでした・・）それらは全てマイクロフォーマットからパースしてきているようです。つまり、マイクロフォーマットを使っていることで、検索結果が充実しクリックしてくれる回数も増えるということですね。

googleにおいても、google mapにすでに使われているように積極的な姿勢が見られますのでこちらも将来サイトの検索結果に影響するようになるかもしれません。
どちらもまだ、一般のサイト検索にはまだ使われていないようですがこのような技術がすでに公開されているということは将来このような方向に進んでいくということでしょうか。幸いにも、マイクロフォーマットはclassの属性値のみで埋め込みができるので、将来のSEO対策としてやっておくのも手かもしれません。

こちらのインタビュー記事が参考になるかと思います。

次世代Webの基盤技術!? 世界的権威が語る、「マイクロフォーマット」の現状

Firefoxアドオンを使ってみる。

ためしに、「Operator」というアドオンを使ってみました。

1.まずはここでインストール「Operator」

と、こんな感じです。
他にも、住所がマークアップされている場合は、google mapやyahoo! mapに飛んだり、イベントはgoogle calenderに登録できたりと、なかなか面白いですね。

まとめ

2003年くらいから始まったマイクロフォーマットですが、一般的にはそう認知されていないものの一般企業や個人のサイトオーナー達、またyahoo!やgoogle等の検索業界の企業はすでに積極的に動いているようです。マイクロフォーマット自体は使用が非常に簡単で、企業サイトやブログにすぐにでも取り入れることができます。現在のマークアップのclass属性を変えるだけでいいですから。（まあ、大きなサイトだと簡単にはいかないかもしれませんが、技術的には容易です）

今後、googleあたりがchromeにマイクロフォーマットをパースする機能をデフォルトで載せるとか、SEO的に大きな意味を持つようになるとか、そういうことで一気に一般にも広がるかもしれません。

なにより、僕が思い描いていた未来が実際に訪れようとしているってことが嬉しいですね。

【参考サイト】

Microformats Wiki
マイクロフォーマットとは？ - xfyコミュニティ
マイクロフォーマット (microformats) - aSEO
「マイクロフォーマット」感想：マイクロフォーマットは漸進的にセマンティック・ウェブを実現中 - du pope : NAKANO Hajime’s Blog