pimp your content with structured data
TRANSCRIPT
Pimp your content with Structured Data
http://baloo-baloosnon-politicalcartoonblog.blogspot.co.uk/2009/04/santa-pimping-summetime-blues.html
Sorry, no lol cats
http://xkcd.com/231/
What will we cover?
• What is structured data?
• Why do we care?
• Markup
• Guidelines
• Tools
• Conclusion
What is Structured Data?
The markup we add to our templates to place our html content within a machine-readable structured context
Gary Larson
Why should we care?
• It’s all about data
• Semantic web
• Big data
• Open data
• Linked data– Facebook social / open graph– Google knowledge graph
Graph DB
http://www.linkeddatatools.com/introducing-rdf
More specific benefits
• Gives the content context
http://www.cargurus.com/Cars/2010-Dodge-Ram-Pickup-2500-Pictures-c22019_pi35843510?picturesTabFilter=EXTERIOR
http://www.windsorstar.com/life/Shaggy+dodges+police+handlers+roams+downtown+Moines+after/7639285/story.html
More specific benefits
• Gives the content context• Recommended by big search engines• Rich snippets• SEO, SERPs
The markup types
• RDFa
• Microformats
• Microdata
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
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>
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>
Microformats
• Uses html classes and rel attributes
• 2004 - concept introduced
• Simplest of the 3 types
• http://microformats.org/
• Some browsers add enhanced features• hCalendar - add to calendar
• hCard - add to address book
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>
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>
Microdata
• Much younger
• Extension to HTML5
• Compromise between the complexity of RDFa and easy but limited microformats
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>
Microdata DOM API
var cats = document.getItems("http://example.com/feline");
• Limited browser support• MicrodataJS - lib and jQuery plugin that emulates the DOM API
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
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>
So what should we use?
Depends Overall aim Data complexity Other page markup
So what should we use? RDFa
represent complex data require specific ontologies
Microformats easy to implement provide 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
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• Always always test - markup
and rich snippet preview
Bill Watterson
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
Any other business
Facebook open graph
Twitter cards
Google custom search markup - Pagedata, meta tags, page dates
Conclusion
http://www.graphicshunt.com/funny/images/pimpin_aint_easy-12621.htm
But it's worth it – get pimping that content!
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