Microdata: A Primer

Microdata: A Primer masataka yakura

Web 標準 Blog standards.mitsue.co.jp

トピック: Microdata

1. Microdataとは? 2. Microdata の書き方 3. Rich Snippets

Microdata?

HTML Microdata whatwg.org/html5#microdata

機械処理しやすいように情報をマークアップする仕組み。

Microformats との違い

microformats は classやrelを使う。

Microdata は専用の属性を使う。

Microformats はフォーマットの集まり。

hCard, hCalendar, hAtom, hReview, hRecipe, hProduct, etc...

各フォーマットごとに固有の処理が必要になる。

hCardの処理系を作っても hCalendarには対応できない……

Microdata は処理モデル。

フォーマットによって処理が変わることはない。

書き方を覚えてしまえばどのフォーマットも使える。

DOM APIも用意されておりスクリプトからも扱いやすい。

μf はタスクにフォーカス。 Microdata は処理にフォーカス。

Microdata を書く

Microdata 専用の属性は5つ。

•itemscope •itemref •itemprop •itemid •itemtype

Microdata の核は「アイテム」

アイテムを単位としてデータを記述していく。

itemscope ― アイテムの宣言

itemscope がアイテムを定義する。

<p> 矢倉といいます。

<section itemscope> <p> 矢倉といいます。 </section>

このアイテムにはまだデータがない。

itemprop ― データを与える

プロパティと値を与えてデータを表現する。

<section itemscope> <p> 矢倉といいます。 </section>

<section itemscope> <p> <span itemprop=name> 矢倉 </span> といいます。 </section>

アイテムの「name」に「矢倉」という値が入る。

基本的には要素の内容が値になる。

リンクや画像、時間などは例外。

<p> 1984年3月19日生まれです。うお座です。

<p> <time datetime=1984-03-19> 1984年3月19日 </time> 生まれです。

<time> の場合は datetime の値が使われる。

<section itemscope> <p><span itemprop=name> 矢倉 </span> ... <p><time itemprop=bday datetime=1984-03-19> 1984年3月19日 </time> 生まれです。うお座です。 </section>

アイテムの「name」は「矢倉」「bday」は「1984-03-19」

<a href=“http://twitter.com/myakura”> Follow me (@myakura)</a>

<a> の場合は href の値が使われる。

<a itemprop=twitter href=“http://twitter.com/myakura”> Follow me (@myakura) </a>

「twitter」は「http://twitter.com/myakura」

複数のプロパティをスペースで区切って指定可能。

入れ子のアイテム

アイテムを入れ子にして複雑なデータを表現できる。

Q.「矢倉」ってなんて読む?

A.「やくら」です。

<p> <ruby> 矢倉 <rt> やくら </rt> </ruby> といいます。

<p><ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。

itemprop を持つ要素に itemscope を与え入れ子にする。

<div itemscope> <p><ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。 </div>

name と yomi は外側のアイテムに追加されない。

<div itemscope> <p> <ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。 </div>

itemtype ― フォーマット指定

Microdata では好きな名前をつけられる。

既存のボキャブラリを使ってもよい。

Microdata Vocabularies whatwg.org/html5#mdvocabs

Data-Vocabulary.org www.data-vocabulary.org

itemtype にボキャブラリの URLを指定する。

<section itemscope itemtype=“http://microformats.org/profile/hcard”> <p><span itemprop=fn> 矢倉 </span>といいます。 <p><time itemprop=bday datetime=1984-03-19> 1984年3月19日</time> 生まれです。うお座です。 <p><a itemprop=url href=“http://twitter.com/myakura”> Follow me (@myakura)</a> </section>

fn, bday, url が hCard のものと認識される。

itemref ― プロパティの参照

スコープ外のプロパティに id を与え、それを取り込む。

<section itemscope>  <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure>  <img src=cover.jpg ...> </figure>

<section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img src=cover.jpg ... itemprop=photo> </figure>

photo はスコープの外。アイテムに追加されない。

<section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img src=cover.jpg ... itemprop=photo> </figure>

プロパティに id を与え itemref から参照させる。

<section itemscope itemref=cover> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img ... id=cover itemprop=photo> </figure>

photo のデータがアイテムに追加される。

itemid ― IDを与える

グローバルなIDを与えられるボキャブラリで利用する。

<article itemscope itemtype=“.../book” itemid="urn:isbn:978-4-8222-8422-0"> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </article>

Microdata の作成と確認

HTML5 Microdata Templates microdata.freebaseapps.com

Live Microdata foolip.org/microdatajs/live/

JSON Outputで生成されるデータを確認できる。

型を指定していれば vCard, iCalendar の出力もできる。

Rich Snippets

Google が導入した検索結果表示の仕組み。

検索結果のスニペット部分がちょっと目立つ (ことがある)。

•レビュー •プロフィール •レシピ •製品情報 •イベント

構造化マークアップが検索結果に反映される。

Microdata, RDFa, microformats に対応。

Rich Snippets and Structured Markup goo.gl/ZVmq

Rich Snippets の紹介や各フォーマットの説明など。

Rich Snippets Testing Tool Beta google.com/webmasters/tools/richsnippets

Rich Snippets の表示を確認するWebサービス。

まとめ

Microdata は HTML からデータを表現する仕組み。

Microformats と異なりまずデータの処理方法を定義。

Microdataの核はアイテム。アイテムがデータを構成する。

itemscopeでアイテムを定義し itempropでプロパティを与える。

Microdata の導入例に Rich Snippets がある。

ドキュメントやツールも提供されている。

使えるので、使ってみよう!

ありがとうございました。

Contact yakura-masataka@mitsue.co.jp

http://www.kots.jp	89
http://design.dooga.co.jp	14
http://wiki.skyward-design.net	6
http://a0.twimg.com	2
https://si0.twimg.com	2
http://twitter.com	1
http://paper.li	1
http://webcache.googleusercontent.com	1
https://twimg0-a.akamaihd.net	1

Microdata: A Primer

by Masataka Yakura on Jul 30, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 117

Statistics

Microdata: A Primer — Presentation Transcript