1. Microdata
Extending Semantics
jacobtan@2011-11
http://www.hotels2map.com/blog/

2. Semantics
Why?
• Clean - read / edit / reuse
• More accessible - devices
• Search engine friendly - content / code / understand
What?
• Text-Level Semantics Elements - a / em / strong (inline)
• Structural Semantic Elements - p / h1… / article / header (block)
• Interactive Semantics - detail / summary / command / menu
Semantics web
• data’s common formats and integration
• the data relates to real world objects

3. Extending Semantics
Why? - Limited Html labels and attributes/infinite objects of the world
• Mark up a Object? person/event/review/product/movie
<person> <name>your name<name></person>
• Web’s Data? for script / machines
<div yourData=“data for machine”>visible content</div>

4. Extending Semantics
• custom data attribute
Data-* private for your page or app
<div data-name-alice="fake name">your name</div>
elementNode.dataset.nameAlice(); (firefox/chrome/safari/opera)
• WAI-ARIA?

5. Extending Semantics
Mark up a Object : person/movie /product …
public for your page or app and other machines
• Microformats
• RDFa
• Microdata
• …

6. Microformats
<div class="vcard">
My name is
<span class="fn">Bob Smith</span>,
Here is my home page:
<a href="http://www.example.com" class="url">www.example.com</a>.
</div>
Calss
Designed for humans first and machines second, data formats
http://microformats.org/about
Dom API
document.getElementsByClassName("className")
document.querySelectorAll(".className")

7. RDFa
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
My name is <span property="v:name">Bob Smith</span>,
Here is my homepage:
<a href="http://www.example.com" rel="v:url">www.example.com</a>.
</div>
Bridging the Human and Data Webs
a set of XHTML attributes to augment visual data with machine-readable hints
http://www.w3.org/TR/xhtml-rdfa-primer/
vocabulary & property
Dom API
document.getItemsByType("http://xmlns.com/foaf/0.1/Person");
document.getItemByProperty("foaf:name", "Albert Einstein");

8. RDFa Lite
<p vocab="http://schema.org/" typeof="Person">
My name is<span property="name">Manu Sporny</span>
and you can give me a ring via<span property="telephone">1-800-555-
0155</span>.
<img rel="image" src="http://manu.sporny.org/images/manu.png" />
</p>
schema
http://www.w3.org/2010/02/rdfa/sources/rdfa-lite/#about

9. Microdata
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>,
Here is my homepage:
<a href="http://www.example.com" itemprop="url">www.example.com</a>.
</div>
allows machine-readable data to be embedded in HTML documents
in an easy-to-write manner
http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html

10. Choose your way
• Easy?
• Bonus?
• Forward?
• Standard?

11. Microdata
• Easy (simplicity & extensibility)
• HTML5 (forward & standard)
• Schema.org (search engine bonus)

13. Microdata & Schema
<div itemscope itemtype="http://schema.org/Person">
My name is <span itemprop="name">Bob Smith</span>
Here is my homepage:
<a href="http://www.example.com" itemprop="url">www.example.com</a>.
</div>
Itemscope 声明数据
Itemtype 指定数据类型 http://schema.org/Person http://schema.org/Movie ....
Itemprop 指定数据某个属性
DOM API document.getItems("http://schema.org/Person") opera11.60+
详细文档
http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#the-basic-syntax

14. 统一词汇库 schema.org

15. data-vocabulary.org VS schema.org
schema.org
<meta itemprop="priceCurrency" content="CNY" />
<div itemscope itemtype="http://schema.org/WebPage">
<div itemprop="breadcrumb">
<a href="#">数码家电</a> > <a href="#">手机</a> > <a href="#">Htc</a>
</div>
</div>
data-vocabulary.org
<meta itemprop="currency" content="CNY" />
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url"><span itemprop="title">数码家电</span></a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="#" itemprop="url"><span itemprop="title">手机</span></a>
</div>

16. Google富网摘( Rich snippets)
http://www.google.com/support/webmasters/bin/topic.py?hlrm=en&topic=21997
• Microformats
• RDFa
• Microdata

17. Rich Snippets Testing Tool
http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.hotels2map.com%2Fblog%2Fd11004%2F&view=
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Rated <span itemprop="ratingValue">3.5</span>/5
based on <span itemprop="reviewCount">11</span> customer reviews
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$55.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />In stock
</div>
Product description:
<span itemprop="description">0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like
Add-A-Minute and Child Lock.</span>
</div>

18. THX Q&A