pimp your content with structured data
Post on 20-Aug-2015
818 Views
Preview:
TRANSCRIPT
Pimp your content with Structured Data
http://baloo-baloosnon-politicalcartoonblog.blogspot.co.uk/2009/04/santa-pimping-summetime-blues.html
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
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
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? 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!
top related