Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pimp your content with structured data

1,216 views

Published on

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

Published in: Technology
  • Be the first to comment

Pimp your content with structured data

  1. 1. Pimp your content with Structured Data http://baloo-baloosnon-politicalcartoonblog.blogspot.co.uk/2009/04/santa-pimping-summetime-blues.html
  2. 2. Sorry, no lol cats http://xkcd.com/231/
  3. 3. What will we cover?• What is structured data?• Why do we care?• Markup• Guidelines• Tools• Conclusion
  4. 4. What is Structured Data?The markup we addto our templates toplace our htmlcontent within amachine-readablestructured context Gary Larson
  5. 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. 6. Graph DBhttp://www.linkeddatatools.com/introducing-rdf
  7. 7. More specific benefits • Gives the content context http://www.windsorstar.com/life/ Shaggy+dodges+police+handlers+roams+downtown+Moines+after/7639285/story.htmlhttp://www.cargurus.com/Cars/2010-Dodge-Ram-Pickup-2500-Pictures-c22019_pi35843510?picturesTabFilter=EXTERIOR
  8. 8. More specific benefits• Gives the content context• Recommended by big search engines• Rich snippets• SEO, SERPs
  9. 9. The markup types• RDFa• Microformats• Microdata
  10. 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. 11. Example HTML<div><h1>Bomberman DS review</h1>By Stuart AndrewsReviewed 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. 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. 13. Microformats• Uses html classes and rel attributes• 2004 - concept introduced• Simplest of the 3 types• http://microformats.org/
  14. 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. 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. 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. 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. 18. Microdata DOM APIvar cats = document.getItems("http://example.com/feline");• Limited browser support• MicrodataJS - lib and jQuery plugin that emulates the DOM API
  19. 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. 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. 21. So what should we use?• Depends • Overall aim • Data complexity • Other page markup
  22. 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 ontologiesI would recommend checking schema.org first,then checking the other types if this doesn’t meet your requirements
  23. 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. 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. 25. Any other businessFacebook open graphTwitter cardsGoogle custom search markup - Pagedata, meta tags, page dates
  26. 26. Conclusion http://www.graphicshunt.com/funny/images/pimpin_aint_easy-12621.htmBut its worth it – get pimping that content!
  27. 27. Thank you!Links- Open / Linked Data http://bitly.com/bundles/loonytoons/1- Structured Data Info and Tools http://bitly.com/bundles/loonytoons/4Me- @loonytoons- http://loonyblurb.net

×