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