Microdata semantic-extend
Download as PPTX, PDF2 likes508 views
This document discusses different ways to extend semantics on the web through microdata, microformats, RDFa, and schema.org. It explains the basic syntax for using microdata to embed machine-readable data in HTML documents. Microdata provides a simple way to do this while being standardized in HTML5. It also recommends using schema.org as a unified vocabulary for semantic markup.
Microdata semantic-extend
- 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=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttp%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