Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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日
 </ti...
アイテムの「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>
 <...
name と yomi は
外側のアイテムに追加されない。
<div itemscope>
<p>
 <ruby itemprop=name-ruby itemscope>
  <span itemprop=name> 矢倉 </span>
  <rt itemprop=yomi> やくら </rt>
...
<item>
 <prop id=“name-ruby”>
   <item>
    <prop id=“name”> 矢倉 </prop>
    <prop id=“yomi”> やくら </prop>
   </item>
 </pro...
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 ite...
fn, bday, url が
hCard のものと認識される。
itemref ― プロパティの参照
スコープ外のプロパティに
id を与え、それを取り込む。
<section itemscope> <!-- 本のデータ -->
 <h1 itemprop=title> HTML5&API入門 </h1>
 <p itemprop=desc> 世界初のHTML5本。...
</section>
......
<section itemscope>
 <h1 itemprop=title> HTML5&API入門 </h1>
 <p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure>
 <img...
photo はスコープの外。
アイテムに追加されない。
<section itemscope>
 <h1 itemprop=title> HTML5&API入門 </h1>
 <p itemprop=desc> 世界初のHTML5本。...
</section>
...
<figure>
 <img...
プロパティに id を与え
itemref から参照させる。
<section itemscope itemref=cover>
 <h1 itemprop=title> HTML5&API入門 </h1>
 <p itemprop=desc> 世界初のHTML5本。...
</section>
...
...
photo のデータが
アイテムに追加される。
itemid ― IDを与える
グローバルなIDを与えられる
ボキャブラリで利用する。
<article itemscope itemtype=“.../book”
  itemid="urn:isbn:978-4-8222-8422-0">
 <h1 itemprop=title> HTML5&API入門 </h1>
 <p i...
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
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Microdata: A Primer
Upcoming SlideShare
Loading in …5
×

of

Microdata: A Primer Slide 1 Microdata: A Primer Slide 2 Microdata: A Primer Slide 3 Microdata: A Primer Slide 4 Microdata: A Primer Slide 5 Microdata: A Primer Slide 6 Microdata: A Primer Slide 7 Microdata: A Primer Slide 8 Microdata: A Primer Slide 9 Microdata: A Primer Slide 10 Microdata: A Primer Slide 11 Microdata: A Primer Slide 12 Microdata: A Primer Slide 13 Microdata: A Primer Slide 14 Microdata: A Primer Slide 15 Microdata: A Primer Slide 16 Microdata: A Primer Slide 17 Microdata: A Primer Slide 18 Microdata: A Primer Slide 19 Microdata: A Primer Slide 20 Microdata: A Primer Slide 21 Microdata: A Primer Slide 22 Microdata: A Primer Slide 23 Microdata: A Primer Slide 24 Microdata: A Primer Slide 25 Microdata: A Primer Slide 26 Microdata: A Primer Slide 27 Microdata: A Primer Slide 28 Microdata: A Primer Slide 29 Microdata: A Primer Slide 30 Microdata: A Primer Slide 31 Microdata: A Primer Slide 32 Microdata: A Primer Slide 33 Microdata: A Primer Slide 34 Microdata: A Primer Slide 35 Microdata: A Primer Slide 36 Microdata: A Primer Slide 37 Microdata: A Primer Slide 38 Microdata: A Primer Slide 39 Microdata: A Primer Slide 40 Microdata: A Primer Slide 41 Microdata: A Primer Slide 42 Microdata: A Primer Slide 43 Microdata: A Primer Slide 44 Microdata: A Primer Slide 45 Microdata: A Primer Slide 46 Microdata: A Primer Slide 47 Microdata: A Primer Slide 48 Microdata: A Primer Slide 49 Microdata: A Primer Slide 50 Microdata: A Primer Slide 51 Microdata: A Primer Slide 52 Microdata: A Primer Slide 53 Microdata: A Primer Slide 54 Microdata: A Primer Slide 55 Microdata: A Primer Slide 56 Microdata: A Primer Slide 57 Microdata: A Primer Slide 58 Microdata: A Primer Slide 59 Microdata: A Primer Slide 60 Microdata: A Primer Slide 61 Microdata: A Primer Slide 62 Microdata: A Primer Slide 63 Microdata: A Primer Slide 64 Microdata: A Primer Slide 65 Microdata: A Primer Slide 66 Microdata: A Primer Slide 67 Microdata: A Primer Slide 68 Microdata: A Primer Slide 69 Microdata: A Primer Slide 70 Microdata: A Primer Slide 71 Microdata: A Primer Slide 72 Microdata: A Primer Slide 73 Microdata: A Primer Slide 74 Microdata: A Primer Slide 75 Microdata: A Primer Slide 76 Microdata: A Primer Slide 77 Microdata: A Primer Slide 78 Microdata: A Primer Slide 79 Microdata: A Primer Slide 80 Microdata: A Primer Slide 81 Microdata: A Primer Slide 82 Microdata: A Primer Slide 83 Microdata: A Primer Slide 84 Microdata: A Primer Slide 85 Microdata: A Primer Slide 86 Microdata: A Primer Slide 87 Microdata: A Primer Slide 88 Microdata: A Primer Slide 89 Microdata: A Primer Slide 90 Microdata: A Primer Slide 91 Microdata: A Primer Slide 92 Microdata: A Primer Slide 93 Microdata: A Primer Slide 94 Microdata: A Primer Slide 95 Microdata: A Primer Slide 96 Microdata: A Primer Slide 97 Microdata: A Primer Slide 98 Microdata: A Primer Slide 99 Microdata: A Primer Slide 100 Microdata: A Primer Slide 101 Microdata: A Primer Slide 102 Microdata: A Primer Slide 103 Microdata: A Primer Slide 104 Microdata: A Primer Slide 105 Microdata: A Primer Slide 106 Microdata: A Primer Slide 107 Microdata: A Primer Slide 108 Microdata: A Primer Slide 109 Microdata: A Primer Slide 110 Microdata: A Primer Slide 111 Microdata: A Primer Slide 112 Microdata: A Primer Slide 113 Microdata: A Primer Slide 114 Microdata: A Primer Slide 115 Microdata: A Primer Slide 116 Microdata: A Primer Slide 117
Upcoming SlideShare
Web Platform -- Moving Forward!
Next
Download to read offline and view in fullscreen.

13 Likes

Share

Download to read offline

Microdata: A Primer

Download to read offline

HTML5の拡張として用意されるMicrodataの入門用スライドです。2010年7月31日のSwapSkills vol.6で利用した資料です。GoogleのRich Snippetsについても言及しています。

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Microdata: A Primer

  1. 1. Microdata: A Primer masataka yakura
  2. 2. Web 標準 Blog standards.mitsue.co.jp
  3. 3. トピック: Microdata
  4. 4. 1. Microdataとは? 2. Microdata の書き方 3. Rich Snippets
  5. 5. Microdata?
  6. 6. HTML Microdata whatwg.org/html5#microdata
  7. 7. 機械処理しやすいように 情報をマークアップする仕組み。
  8. 8. Microformats との違い
  9. 9. microformats は classやrelを使う。
  10. 10. <div class=vcard> <div class=hentry> <a href=... rel=tag>
  11. 11. Microdata は専用の属性を使う。
  12. 12. <div itemscope> <p itemprop=prop> <div ... itemtype=“...”>
  13. 13. Microformats は フォーマットの集まり。
  14. 14. hCard, hCalendar, hAtom, hReview, hRecipe, hProduct, etc...
  15. 15. 各フォーマットごとに 固有の処理が必要になる。
  16. 16. hCardの処理系を作っても hCalendarには対応できない……
  17. 17. Microdata は処理モデル。
  18. 18. フォーマットによって 処理が変わることはない。
  19. 19. 書き方を覚えてしまえば どのフォーマットも使える。
  20. 20. DOM APIも用意されており スクリプトからも扱いやすい。
  21. 21. μf はタスクにフォーカス。 Microdata は処理にフォーカス。
  22. 22. Microdata を書く
  23. 23. Microdata 専用の属性は5つ。
  24. 24. •itemscope •itemref •itemprop •itemid •itemtype
  25. 25. •itemscope •itemref •itemprop •itemid •itemtype
  26. 26. Microdata の核は「アイテム」
  27. 27. アイテムを単位として データを記述していく。
  28. 28. itemscope ― アイテムの宣言
  29. 29. itemscope が アイテムを定義する。
  30. 30. <p> 矢倉といいます。
  31. 31. <section itemscope> <p> 矢倉といいます。 </section>
  32. 32. このアイテムには まだデータがない。
  33. 33. itemprop ― データを与える
  34. 34. プロパティと値を与えて データを表現する。
  35. 35. <section itemscope> <p> 矢倉といいます。 </section>
  36. 36. <section itemscope> <p> <span itemprop=name> 矢倉 </span> といいます。 </section>
  37. 37. アイテムの「name」に 「矢倉」という値が入る。
  38. 38. 基本的には 要素の内容が値になる。
  39. 39. リンクや画像、時間などは例外。
  40. 40. <p> 1984年3月19日生まれです。 うお座です。
  41. 41. <p> <time datetime=1984-03-19> 1984年3月19日 </time> 生まれです。
  42. 42. <time> の場合は datetime の値が使われる。
  43. 43. <section itemscope> <p><span itemprop=name> 矢倉 </span> ... <p><time itemprop=bday datetime=1984-03-19> 1984年3月19日 </time> 生まれです。うお座です。 </section>
  44. 44. アイテムの「name」は「矢倉」 「bday」は「1984-03-19」
  45. 45. <a href=“http://twitter.com/myakura”> Follow me (@myakura)</a>
  46. 46. <a> の場合は href の値が使われる。
  47. 47. <a itemprop=twitter href=“http://twitter.com/myakura”> Follow me (@myakura) </a>
  48. 48. 「twitter」は 「http://twitter.com/myakura」
  49. 49. 複数のプロパティを スペースで区切って指定可能。
  50. 50. <a itemprop=“weblog url” href=“http://....”> my blog </a>
  51. 51. 入れ子のアイテム
  52. 52. アイテムを入れ子にして 複雑なデータを表現できる。
  53. 53. Q.「矢倉」ってなんて読む?
  54. 54. A.「やくら」です。
  55. 55. <p> <ruby> 矢倉 <rt> やくら </rt> </ruby> といいます。
  56. 56. <p><ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。
  57. 57. itemprop を持つ要素に itemscope を与え入れ子にする。
  58. 58. <div itemscope> <p><ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。 </div>
  59. 59. name と yomi は 外側のアイテムに追加されない。
  60. 60. <div itemscope> <p> <ruby itemprop=name-ruby itemscope> <span itemprop=name> 矢倉 </span> <rt itemprop=yomi> やくら </rt> </ruby> といいます。 </div>
  61. 61. <item> <prop id=“name-ruby”> <item> <prop id=“name”> 矢倉 </prop> <prop id=“yomi”> やくら </prop> </item> </prop> </item>
  62. 62. itemtype ― フォーマット指定
  63. 63. Microdata では 好きな名前をつけられる。
  64. 64. 既存のボキャブラリを 使ってもよい。
  65. 65. Microdata Vocabularies whatwg.org/html5#mdvocabs
  66. 66. Data-Vocabulary.org www.data-vocabulary.org
  67. 67. itemtype に ボキャブラリの URLを指定する。
  68. 68. <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>
  69. 69. fn, bday, url が hCard のものと認識される。
  70. 70. itemref ― プロパティの参照
  71. 71. スコープ外のプロパティに id を与え、それを取り込む。
  72. 72. <section itemscope> <!-- 本のデータ --> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <!-- 本の表紙 --> <img src=cover.jpg ...> </figure>
  73. 73. <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img src=cover.jpg ... itemprop=photo> </figure>
  74. 74. photo はスコープの外。 アイテムに追加されない。
  75. 75. <section itemscope> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img src=cover.jpg ... itemprop=photo> </figure>
  76. 76. プロパティに id を与え itemref から参照させる。
  77. 77. <section itemscope itemref=cover> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </section> ... <figure> <img ... id=cover itemprop=photo> </figure>
  78. 78. photo のデータが アイテムに追加される。
  79. 79. itemid ― IDを与える
  80. 80. グローバルなIDを与えられる ボキャブラリで利用する。
  81. 81. <article itemscope itemtype=“.../book” itemid="urn:isbn:978-4-8222-8422-0"> <h1 itemprop=title> HTML5&API入門 </h1> <p itemprop=desc> 世界初のHTML5本。... </article>
  82. 82. Microdata の作成と確認
  83. 83. HTML5 Microdata Templates microdata.freebaseapps.com
  84. 84. Live Microdata foolip.org/microdatajs/live/
  85. 85. JSON Outputで 生成されるデータを確認できる。
  86. 86. 型を指定していれば vCard, iCalendar の出力もできる。
  87. 87. Rich Snippets
  88. 88. Google が導入した 検索結果表示の仕組み。
  89. 89. 検索結果のスニペット部分が ちょっと目立つ (ことがある)。
  90. 90. •レビュー •プロフィール •レシピ •製品情報 •イベント
  91. 91. 構造化マークアップが 検索結果に反映される。
  92. 92. Microdata, RDFa, microformats に対応。
  93. 93. Rich Snippets and Structured Markup goo.gl/ZVmq
  94. 94. Rich Snippets の紹介や 各フォーマットの説明など。
  95. 95. Rich Snippets Testing Tool Beta google.com/webmasters/tools/richsnippets
  96. 96. Rich Snippets の表示を 確認するWebサービス。
  97. 97. まとめ
  98. 98. Microdata は HTML から データを表現する仕組み。
  99. 99. Microformats と異なり まずデータの処理方法を定義。
  100. 100. Microdataの核はアイテム。 アイテムがデータを構成する。
  101. 101. itemscopeでアイテムを定義し itempropでプロパティを与える。
  102. 102. Microdata の導入例に Rich Snippets がある。
  103. 103. ドキュメントや ツールも提供されている。
  104. 104. 使えるので、使ってみよう!
  105. 105. ありがとうございました。
  106. 106. Contact yakura-masataka@mitsue.co.jp
  • makotoohmori

    Jul. 18, 2015
  • masakomiyazaki712

    May. 17, 2015
  • takueof

    Feb. 7, 2014
  • sowaka

    Dec. 19, 2013
  • fokizaki

    Oct. 23, 2012
  • yasu00000

    Aug. 22, 2012
  • boblet

    Sep. 1, 2011
  • kojinoda

    Jun. 2, 2011
  • t32k

    Apr. 5, 2011
  • yatsu

    Aug. 19, 2010
  • dynamis

    Aug. 3, 2010
  • shoito

    Aug. 2, 2010
  • zazietokyo

    Aug. 2, 2010

HTML5の拡張として用意されるMicrodataの入門用スライドです。2010年7月31日のSwapSkills vol.6で利用した資料です。GoogleのRich Snippetsについても言及しています。

Views

Total views

11,022

On Slideshare

0

From embeds

0

Number of embeds

1,047

Actions

Downloads

55

Shares

0

Comments

0

Likes

13

×