Talk microdata

Microdata: A Primer
masataka yakura

Web 標準 Blog
standards.mitsue.co.jp

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

HTML Microdata
whatwg.org/html5#microdata

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

microformats は
classやrelを使う。

Microdata は専用の属性を使う。

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

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

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

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

Microdata は処理モデル。

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

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

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

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

Microdata 専用の属性は5つ。

•itemscope •itemref
•itemprop •itemid
•itemtype

Microdata の核は「アイテム」

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

itemscope ― アイテムの宣言

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

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

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

itemprop ― データを与える

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

<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.「矢倉」ってなんて読む?

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

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

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

<div itemscope>
<p><ruby itemprop=name-ruby itemscope>
</ruby> といいます。
</div>

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

<div itemscope>
<p>
<ruby itemprop=name-ruby itemscope>
</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>

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

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

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

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

HTML5 Microdata Templates
microdata.freebaseapps.com

Live Microdata
foolip.org/microdatajs/live/

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

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

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

Talk microdata

Recommandé

Recommandé

Contenu connexe

Similaire à Talk microdata

Similaire à Talk microdata (20)

Plus de SwapSkills

Plus de SwapSkills (6)

Talk microdata