The document discusses different methods for adding semantic markup to web pages, including RDFa, Microformats, and Microdata. RDFa embeds RDF triples in HTML attributes, Microformats uses class and rel attributes to mark up specific types of information, and Microdata uses itemscope and itemprop attributes to identify items and properties. The document compares the pros and cons of each approach and provides examples of how to mark up different types of content like movies, people, products, and reviews using these semantic annotation languages.

1. leo picado
backcountry.com

2. 1. What’s behind all of this?
2. The past
3. The present
4. When?
5. Our competition
6. Schemas identified
7. How to test it?
8. FAQ
9. More info

3. http://www.w3.org/TR/xhtml-rdfa-primer/
» browser » user

4. » Semantic Web (Web 3.0)
» Help machines understand semantics
semantics,
yummy

5. 1. RDFa
2. Microformats

6. » 2004: Mark Birbeck (W3C)
» Part of XHTML 2.0
» RDF in HTML attributes = RDFa
» Attributes used: about, src, rel, rev, href,
resource, property, content, datatype,
typeof
» Pros
˃ Publisher Independence
˃ Self Containment: HTML | RDFa
» Cons
˃ XML based
˃ There is not a ‘standards body’ for formats
˃ A bit complex

7. - div:
- standard namespace
- item being coded
- span: title
- span: author
- span: date

8. » 2007: Tantek Çelik, Dan Cederholm
» ‘Support’ for both XHTML/HTML
» Attributes used: class, rel, rev, id
» Pros
˃ Simplicity
» Cons
˃ Short list of elements (9 stable)
˃ Likes IDs!
˃ Accesibility issues
http://bbc.co.uk/blogs/radiolabs/2008/06/removin
g_microformats_from_bbc.shtml

9. - div:
- div: first name
- div: organization name
- div: telephone number
- a: url

10. » Microdata
» schema.org

11. » Part of the HTML5 spec
» Delimited set of attributes: itemscope,
itemtype, itemprop, itemref
» Similar to RDFa’s take
» Pros
˃ Publisher Independence
˃ Self Containment: HTML
˃ Attribute based
˃ Easy to implement
» Cons
˃ Each site can use it’s own standards

12. » Google, Bing and Yahoo!
» Uses HTML5 spec
» Wide range of schemas (611 as of 10/11’)
» Easily Nestable
» Thing based

13. - div scope:movie
- h1: name
- div: director / scope:person
- span: name
- span: birthDate
- span: genre
- a: trailer

14. » where it makes sense (think SEO)

15. » REI is using schema.org
» Altrec is using microformats
» Sierra Trading Post is not using any.

16. 1. Webpage
2. WPHeader
3. SiteNavigation
4. Store

17. 1. WPAdBlock
2. Product
3. AggregateRating
4. Organization

18. 1. AggregateOffer
2. InStock
3. ImageGallery

19. 1. Review
2. Person
3. UserComments
4. ImageObject
5. VideoObject

20. 1. WPAdBlock
2. WPFooter
3. SiteNavigation

21. » Header: 4 | global
» Content: 12
» Footer: 3 | global
» Total: 19

22. » how deep?
˃ “more is better, except for hidden text”
» missing/implicit information?
˃ “meta tag it”
» working with dates
˃ use the html5 tag <time>
» can an itemprop be also a itemscope?
˃ hell yeah

23. » Google’s Rich Snippets Testing Tool
˃ http://google.com/webmasters/tools/richsnippets
» Validator
˃ http://validator.nu/
» Live Microdata
˃ http://foolip.org/microdatajs/live/

24. » http://slideshare.net/fabien_gandon/rdfa-in-a-
nutshell-v1
» http://microformats.org/wiki/Main_Page
» http://schema.org/docs/gs.html