An overview into using structured data on the web, what it is and why we want to use it

1. Pimp your content with
Structured Data
http://baloo-baloosnon-politicalcartoonblog.blogspot.co.uk/2009/04/santa-pimping-summetime-blues.html

2. Sorry, no lol cats
http://xkcd.com/231/

3. What will we cover?
• What is structured data?
• Why do we care?
• Markup
• Guidelines
• Tools
• Conclusion

4. What is Structured Data?
The markup we add
to our templates to
place our html
content within a
machine-readable
structured context
Gary Larson

5. Why should we care?
• It’s all about data
• Semantic web
• Big data
• Open data
• Linked data
– Facebook social / open graph
– Google knowledge graph

6. Graph DB
http://www.linkeddatatools.com/introducing-rdf

7. More specific benefits
• Gives the content context
http://www.windsorstar.com/life/
Shaggy+dodges+police+handlers+roams+downtown+Moines+after/7639285/story.html
http://www.cargurus.com/Cars/
2010-Dodge-Ram-Pickup-2500-Pictures-c22019_pi35843510?picturesTabFilter=EXTERIOR

8. More specific benefits
• Gives the content context
• Recommended by big search engines
• Rich snippets
• SEO, SERPs

9. The markup types
• RDFa
• Microformats
• Microdata

10. RDFa
• Resource Description Framework in attributes
• Based on RDF
• 2004 - Proposed
• 2012 - RDFa 1.1, non xml documents
• Entities, properties and values (triples)
• Most complex of the 3 types

11. Example HTML
<div>
<h1>Bomberman DS review</h1>
By Stuart Andrews
Reviewed 27 Jul 2005 04:00
<div>8 / 10</div>
<div>Back in the glory years of the SNES, Bomberman
was the Counter-Strike or Halo 2 of the
day...</div>
<div>

12. RDFa example
<div xmlns:v="http://rdf.data-vocabulary.org/#"
typeof="v:Review">
<h1 property="v:itemreviewed">Bomberman DS review</h1>
By <span property="v:reviewer">Stuart Andrews</span>
Reviewed <span property="v:dtreviewed">27 Jul 2005
04:00</span>
<div rel="v:rating">
<span property="v:rating">8</span> / <span
property="v:best">10</span>
<meta content="1" property="v:worst" /></div>
<div property="v:description">Back in the glory years of
the SNES, Bomberman was the Counter-Strike or Halo 2 of
the day…</div>
</div>

13. Microformats
• Uses html classes and rel attributes
• 2004 - concept introduced
• Simplest of the 3 types
• http://microformats.org/

14. Microformats example
<div class=“hReview”>
<h1 class=“item”>Bomberman DS review</h1>
By <a class=“reviewer” rel="author" href="/stuart-
andrews">Stuart Andrews</a>
Reviewed <span class=“dtreviewed”>27 Jul 2005 04:00<span
class="value-title" title="2005-07-27"></span></span>
<div><span class=“rating”>8</span> / <span
class=“best”>10</span></div>
<div class=“description”>Back in the glory years of the
SNES, Bomberman was the Counter-Strike or Halo 2 of the
day...</div>
<div>

15. Microformats 2 example
<div class=“h-review”>
<h1 class=“p-item”>Bomberman DS review</h1>
By <a class=“p-reviewer” rel="author" href="/stuart-
andrews">Stuart Andrews</a>
Reviewed <span class=“dt-reviewed”>27 Jul 2005 04:00<span
class="value-title" title="2005-07-27"></span></span>
<div><span class=“p-rating”>8</span> / <span class=“p-
best”>10</span></div>
<div class=“e-description”>Back in the glory years of the
SNES, Bomberman was the Counter-Strike or Halo 2 of the
day...</div>
<div>

16. Microdata
• Much younger
• Extension to HTML5
• Compromise between the complexity of
RDFa and easy but limited
microformats
• Some browsers add enhanced features
• hCalendar - add to calendar
• hCard - add to address book

17. Microdata example
<div itemscope itemtype="http://data-
vocabulary.org/Review">
<h1 itemprop="itemreviewed”>Bomberman DS review</h1>
By <span itemprop="reviewer”>Stuart Andrews</span>
Reviewed <time itemprop="dtreviewed" datetime="2009-
01-06”>27 Jul 2005 04:00</time>
<div><span itemprop="rating">8</span> / <span
itemprop=“best”>10</span></div>
<div itemprop=“description”>Back in the glory years
of the SNES, Bomberman was the Counter-Strike or
Halo 2 of the day...</div>
<div>

18. Microdata DOM API
var cats =
document.getItems("http://example.com/feline");
• Limited browser support
• MicrodataJS - lib and jQuery plugin that emulates
the DOM API

19. schema.org
• Collaboration of Google, Bing, Yahoo!
and Yandex - 2011
• Shared markup vocabulary
• Based on microdata
• Accounts for 99% of microdata markup
• http://schema.org

20. Schema.org example
<div itemscope itemtype=“http://schema.org/Review”>
<h1 itemprop="name">Bomberman DS review</h1>
By <span itemprop="author">Stuart Andrews</span>
Reviewed <span itemprop="dateCreated" content="2005-
07-27">27 Jul 2005 04:00</span>
<div itemprop="reviewRating" itemscope
itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">8</span> / <span
itemprop="bestRating">10</span>
<meta itemprop="worstRating" content="1"/></div>
<div itemprop="reviewBody">Back in the glory years of
the SNES, Bomberman was the Counter-Strike or Halo
2 of the day…</div>
</div>

21. So what should we use?
• Depends
• Overall aim
• Data complexity
• Other page markup

22. So what should we use?
•
RDFa
•
represent complex data
•
require specific ontologies
•
Microformats
•
easy to implement
•
require browser enhancements
•
Microdata / schema.org
•
search engine focused
•
unified vocabuary for most common ontologies
I would recommend checking schema.org first,
then checking the other types if this doesn’t meet your requirements

23. Guidelines
• Don’t mark up hidden content,
use meta tags instead
• Mark up as much as you can
accurately
• Required video fields (google)
• Take care mixing vocabularies
and entities, esp when nesting Bill
Watterson
• Always always test - markup
and rich snippet preview

24. Tools
• Google rich snippets testing tool
• Bing testing tool
• Data Highlighter - stopgap only
• Webmaster tools structured data tab
• Browser plugins
– Microdata.reveal – chrome
– Operator - firefox
• Many more

25. Any other business
Facebook open graph
Twitter cards
Google custom search markup -
Pagedata, meta tags, page dates

26. Conclusion
http://www.graphicshunt.com/funny/images/pimpin_aint_easy-12621.htm
But it's worth it – get pimping that content!

27. Thank you!
Links
- Open / Linked Data
http://bitly.com/bundles/loonytoons/1
- Structured Data Info and Tools
http://bitly.com/bundles/loonytoons/4
Me
- @loonytoons
- http://loonyblurb.net