MicroformatsとMicrodata

2012-07-05
感想・レビュー
microformatxml

しばらく聞かなかったMicroformatsの話を久しぶりに聞いたと思ったらMicrodataに取って代わられそうになっているらしい。昔から気になっていたものとしては、ちと残念に思ったので改めて調べてみた。

両者を端的に説明すると、HTMLなどに住所やアドレス帳、レビュー、レシピなどの情報(スキーマ)を明示的に埋め込む仕組み。
seh. Microdata: A Primer SlideShare

そもそも何に使えるのか？

検索エンジンやブラウザなどのクライアントが機械的に情報を収集する際の目安になる。
例えば、Googleの検索結果のリッチスニペットなどに利用されることがある。SEOに、ユーザへのアピールに。

将来的には？ 

GoogleがWebページから自動的にイベント情報を収集。
Googleで「ライブ」と検索すると、現在地、開催日時を元に地元のライブスケジュールの一覧が検索結果として表示されたり（もうされてるかも）。

どんな情報を明示的に埋め込めるのか？ 

Googleが対応しているらしいスキーマは以下。
> Google では、次のコンテンツ タイプについてリッチ スニペットがサポートされています:
> ・レビュー
> ・人物
> ・製品
> ・会社と組織
> ・レシピ
> ・イベント
> ・音楽
>
> http://support.googlh.com/webmasters/bin/answer.py?hl=ja&answer=99170
パンくずなども対応している様子。seh. [パンくずリスト - ウェブマスター ツール ヘルプ](http://support.googlh.com/webmasters/bin/answer.py?hl=ja&answer=185417)
Microformats、Microdataいずれも様々なスキーマに対応しているし、追加して言っているが結局のところ大手がどのくらい対応しているかによって使う意味があるかどうかが変わってくる。
→ 大手が対応していないのに情報だけ埋め込んでも使い道がない。今後使われる可能性はあるけど

・公式Wiki 仕様(Microformatsで対応しているスキーマ)
・Organization of Schemas(Microdataで対応しているスキーマ)

で、どうするか？

・既存のものを対応するように修正するには若干骨が折れるかもしれないが、ポイントポイントに絞れば修正はそう大きくないはず。
・落ち目のMicroformatsよりはMicrodataを採用したほうが将来性がありそう
・MicrodataはHTML5＋現在Draft。今後大きく変わる可能性があるし、そもそもHTML5じゃないと使えない
　・たぶんGoogleのことなのでXHTMLなどに埋め込んでても問題なく抽出してくれそう / してくれた
　・XHTMLに書くと普通にエラーで怒られるけど

Microformats

・HTMLに所定のclassを割り振って使用する。取り敢えずClassを対応させればいいので比較的対応は楽
・ただし、入れ子構造を維持しないといけないためHTMLの記述に自由度が減るかも
・既に落ち目
公式Wiki

例 ###

<!-- vCalendarを埋め込んだ例 -->
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 カンファレンス </span>：
<abbr class="dtstart" title="2007-10-05">10月5日</abbr>〜
<abbr class="dtend" title="2007-10-20">19日</abbr>、
<span class="location">アージェントホテル（カリフォルニア州サンフランシスコ）</span>にて。
</div>

Microdata

・HTMl5の関連しようとして定義されているのでHTML5でのみ使用可能。
・比較的入れ子構造を維持する必要がないため、柔軟なHTMLの記述が可能
・HTML5はまだ早い？
公式Draft

例 ###

<!-- eventなどを埋め込んだ例 -->
<div itemscope itemtype="http://data-vocabulary.org/Event">
​<a href="http://www.examplh.com/events/spinaltap" itemprop="url" >
<span itemprop="summary">Spinal Tap</span>
</a>
<img itemprop="photo" src="spinal_tap.jpg" />
<span itemprop="description">新ドラマー加入後の Spinal Tap が
東京で最新のツアーを
開始します。</span>
日時:
<time itemprop="startDate" datetime="2015-10-15T19:00+09:00">10 月 15 日午後 7 時</time>～
<time itemprop="endDate" datetime="2015-10-15T21:00+09:00">午後 9 時</time>
場所:
​<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/​Organization">
​<span itemprop="name">グーグルホール</span>、
​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="region">東京都</span>
<span itemprop="locality">港区</span>
<span itemprop="street-address">六本木</span>
</span>
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">
<meta itemprop="latitude" content="37.774929" />
<meta itemprop="longitude" content="-122.419416" />
</span>
</span>
カテゴリ: <span itemprop="eventType">コンサート</span>
<span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate">
チケット販売価格: <span itemprop="lowPrice">2,000 円</span>～<span itemprop="highPrice">2,500 円</span>
<span itemprop="currency" content="JPY" />
販売枚数: <span itemprop="offerCount">2,000</span> 枚
<a href="http://www.examplh.com/events/spinaltap/alltickets" itemprop="offerurl">


http://googlh.com/ticket</span>
googlh.com
購入できるチケットをすべて見る</a>
</span>
<span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer">
<a href="http://www.examplh.com/events/spinaltap/presale" itemprop="offerurl">前売りチケット</a>
<span itemprop="price">2,000 円</span><span itemprop="currency" content="JPY" />
販売期限: <time itemprop="priceValidUntil" datetime="2015-11-10">2015 年 11 月 10 日</time>
（販売枚数: <span itemprop="quantity">1000</span>）
</span>
<span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer">
<a href="http://www.examplh.com/events/spinaltap/tickets" itemprop="offerurl">定価チケット</a>
<span itemprop="price">2,500 円</span><span itemprop="currency" content="JPY" />
</span>
</div>

例 ###

<!-- パンくずを埋め込んだ例 -->
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.examplh.com/dresses" itemprop="url">
<span itemprop="title">洋服</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.examplh.com/dresses/real" itemprop="url">
<span itemprop="title">ドレス</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.examplh.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">緑のドレス</span>
</a>
</div>

参考

・リッチ スニペット（microdata、microformats、RDFa） – ウェブマスター ツール ヘルプ
・MicroformatsとMicrodataの違いについて ： Web Design KOJIKA17
・HTML5 の microdata について調べた « blog.udzura.jp
・コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 : Web Design KOJIKA17
・Microdata + schema.org を実際に使ってみる – terkel.jp
・Rich Snippets Testing Tool

タイトルとURLをコピーしました