SlideShare a Scribd company logo
1 of 117
Download to read offline
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を使う。
<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   •itemref
•itemprop    •itemid
•itemtype
•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」
複数のプロパティを
スペースで区切って指定可能。
<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 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

More Related Content

Similar to Microdata: A Primer

Springでdao 20070413
Springでdao 20070413Springでdao 20070413
Springでdao 20070413Funato Takashi
 
Webサーバ勉強会 発表資料
Webサーバ勉強会 発表資料Webサーバ勉強会 発表資料
Webサーバ勉強会 発表資料oranie Narut
 
Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks Hiroshi Ito
 
Rユーザのためのspark入門
Rユーザのためのspark入門Rユーザのためのspark入門
Rユーザのためのspark入門Shintaro Fukushima
 
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015Masahiro Nagano
 
Ruby way-openstack.keynote
Ruby way-openstack.keynoteRuby way-openstack.keynote
Ruby way-openstack.keynoteUchio Kondo
 
DBFlute Mavenプラグインを用いてCRUD作成
DBFlute Mavenプラグインを用いてCRUD作成DBFlute Mavenプラグインを用いてCRUD作成
DBFlute Mavenプラグインを用いてCRUD作成Shinsuke Sugaya
 
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-Deep Learning JP
 
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版Masahiro Nagano
 
メタな感じのプログラミング(プロ生 + わんくま 071118)
メタな感じのプログラミング(プロ生 + わんくま 071118)メタな感じのプログラミング(プロ生 + わんくま 071118)
メタな感じのプログラミング(プロ生 + わんくま 071118)Tatsuya Ishikawa
 
再考: お買い得物件を機械学習で見つける方法
再考: お買い得物件を機械学習で見つける方法再考: お買い得物件を機械学習で見つける方法
再考: お買い得物件を機械学習で見つける方法智志 片桐
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)Kenji Shirane
 
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウ
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウ
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウKentaro Yoshida
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Nakazawa Yuichi
 
東京工業大学「ロボット技術」 ロボットミドルウェア
東京工業大学「ロボット技術」 ロボットミドルウェア東京工業大学「ロボット技術」 ロボットミドルウェア
東京工業大学「ロボット技術」 ロボットミドルウェアopenrtm
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210cmtomoda
 
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門Hirokazu Nishi
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドTetsuji Hayashi
 

Similar to Microdata: A Primer (20)

Springでdao 20070413
Springでdao 20070413Springでdao 20070413
Springでdao 20070413
 
Webサーバ勉強会 発表資料
Webサーバ勉強会 発表資料Webサーバ勉強会 発表資料
Webサーバ勉強会 発表資料
 
Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks
 
Rユーザのためのspark入門
Rユーザのためのspark入門Rユーザのためのspark入門
Rユーザのためのspark入門
 
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015ISUCONの勝ち方 YAPC::Asia Tokyo 2015
ISUCONの勝ち方 YAPC::Asia Tokyo 2015
 
Ruby way-openstack.keynote
Ruby way-openstack.keynoteRuby way-openstack.keynote
Ruby way-openstack.keynote
 
DBFlute Mavenプラグインを用いてCRUD作成
DBFlute Mavenプラグインを用いてCRUD作成DBFlute Mavenプラグインを用いてCRUD作成
DBFlute Mavenプラグインを用いてCRUD作成
 
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-
[DLHacks LT] PytorchのDataLoader -torchtextのソースコードを読んでみた-
 
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版
ISUCONで学ぶ Webアプリケーションのパフォーマンス向上のコツ 実践編 完全版
 
メタな感じのプログラミング(プロ生 + わんくま 071118)
メタな感じのプログラミング(プロ生 + わんくま 071118)メタな感じのプログラミング(プロ生 + わんくま 071118)
メタな感じのプログラミング(プロ生 + わんくま 071118)
 
再考: お買い得物件を機械学習で見つける方法
再考: お買い得物件を機械学習で見つける方法再考: お買い得物件を機械学習で見つける方法
再考: お買い得物件を機械学習で見つける方法
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウ
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウ
ElasticSearch+Kibanaでログデータの検索と視覚化を実現するテクニックと運用ノウハウ
 
MDX with Next.js
MDX with Next.jsMDX with Next.js
MDX with Next.js
 
Haikara
HaikaraHaikara
Haikara
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
 
東京工業大学「ロボット技術」 ロボットミドルウェア
東京工業大学「ロボット技術」 ロボットミドルウェア東京工業大学「ロボット技術」 ロボットミドルウェア
東京工業大学「ロボット技術」 ロボットミドルウェア
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門第3回 Magento Cafe Plus モジュール開発入門
第3回 Magento Cafe Plus モジュール開発入門
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 

Recently uploaded

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 

Recently uploaded (8)

新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 

Microdata: A Primer