Talk microdata

Microdata: A Primermasataka yakura

Web標準Blogstandards.mitsue.co.jp

トピック: Microdata

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

Microdata?

HTML Microdatawhatwg.org/html5#microdata

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

Microformatsとの違い

microformatsはclassやrelを使う。

<div class=vcard>

<div class=hentry>

<a href=... rel=tag>

Microdataは専用の属性を使う。

<div itemscope>

<p itemprop=prop>

<div ... itemtype=“...”>

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

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

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

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

Microdataは処理モデル。

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

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

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

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

Microdataを書く

Microdata専用の属性は5つ。

•itemscope•itemprop•itemtype

•itemref•itemid

•itemscope•itemprop•itemtype

•itemref•itemid

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=bdaydatetime=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=twitterhref=“http://twitter.com/myakura”>Follow me (@myakura) </a>

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

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

<a itemprop=“weblog url”href=“http://....”> my blog </a>

入れ子のアイテム

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

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>

<item><prop id=“name-ruby”><item><prop id=“name”> 矢倉 </prop><prop id=“yomi”> やくら </prop>

</item></prop>

</item>

itemtype ― フォーマット指定

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

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

Microdata Vocabularieswhatwg.org/html5#mdvocabs

Data-Vocabulary.orgwww.data-vocabulary.org

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

<section itemscopeitemtype=“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=urlhref=“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 Templatesmicrodata.freebaseapps.com

Live Microdatafoolip.org/microdatajs/live/

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

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

Rich Snippets

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

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

•レビュー•レシピ•イベント

•プロフィール•製品情報

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

Microdata, RDFa,microformatsに対応。

Rich Snippets andStructured Markupgoo.gl/ZVmq

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

Rich SnippetsTesting Tool Beta

google.com/webmasters/tools/richsnippets

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

まとめ

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

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

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

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

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

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

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

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

[email protected]