蠍は留守です考

蠍の輪郭を見つめてふける思惟の痕跡

20170509013806

SwapSkills 2010 vol.6

SwapSkills 2010 vol.6 「HTML5を学ぶなら、セマンティックを学べ!」に行ってきた。前半は矢倉さんでマイクロデータの概要、後半は渡辺さんでセマンティックウェブで検索エンジンがどう変わるのかという内容。このエントリでは主にマイクロデータについてまとめておきたい。

Microdata とは

機械処理しやすいように情報をマークアップする仕組みのこと。Microdata の核は「アイテム」で、そのアイテムを単位としてデータを扱う。好きな名前を付けたり、既存のボキャブラリ(Data-Vocabulary.org など)を使ったりもできる。

microformats との違い

microformats Microdata
class や rel を使う 専用の属性を使う
フォーマットの集まり
各フォーマットごとに固有の処理が必要になる
処理モデル
フォーマットによって処理が変わることはない
DOM API も用意されており、スクリプトからも扱いやすい
タスクにフォーカス 処理にフォーカス

Microdata の専用属性

5つぐらいあるようだ。

  • itemscope
  • itemprop
  • itemtype
  • itemref
  • itemid

とりあえず Microdata を書いてみるには

HTML5 Microdata Templates by FreebaseLive Microdata などの便利ツールがあるので、慣れないうちはそれを使うとよさそう。

Live Microdata を使ってみる

Live Microdata で以下のコードを書いてみた。

<section itemscope itemtype="http://www.data-vocabulary.org/Person/">
<dl>
<dt>Name:</dt>
<dd itemprop="name">Hitomi Yamagsihi</dd>
<dt>Name:</dt>
<dd itemprop="nickname">Hitoyam</dd>
<dt>Title:</dt>
<dd itemprop="title">Web Designer</dd>
<dt>Blog:</dt>
<dd itemprop="url"><a href="http://www.hitoyam.com/">蠍は留守です</a></dd>
<dt>Contact:</dt>
<dd itemprop="contact"><a href="https://twitter.com/hitoyam">hitoyam on Twitter</a></dd>
</section>

そうすると、以下の画面のように確認することができる。

Live Microdata での表示画面

Rich Snippets(リッチスニペット)について

リッチスニペットとは、サーチエンジンの検索結果ページにより多くの情報を表示させることができる拡張機能。構造化マークアップを理解し、製品の詳細情報やユーザの評価などを表示させる仕組みという感じだと思う。

Webmaster Tools - Rich Snippets Testing Tool を使うと、書いたもののテストができる。Microdata の他には Microformats と RDFa に対応している。

思ったことなど

個人的な感触としては、Microdata は microformats より取っ付きやすそうというか、取り回しやすい印象だった。実際に運用していったらどうなのかはさておき、だが。

後半の渡辺さんのセッションでは「セマンティックウェブの未来は明るくない」というお話もちょろっとだけ出たが、気になった人は気になったら実装してしまえばいいんだと思う。HTML5が世の中に広まるのと併せて、メタデータについての関心もまた広がっていけばいい。


参考URL

Copyright © Hitoyam.