Structured Data

4b86e791cadf9cc2c0a4a7bfc32d9e9e?s=47 Vincent Pickering
December 09, 2013

Structured Data

An expanded version of my structured data from Forefront Leeds. The talk was given at Hey Stac!

4b86e791cadf9cc2c0a4a7bfc32d9e9e?s=128

Vincent Pickering

December 09, 2013
Tweet

Transcript

  1. STRUCTURED DATA HTML5 VINCENT PICKERING A Quick Primer On: Freelance

    UI/UX Designer ! @VIPickering VINCENT PICKERING
  2. WHAT IS STRUCTURED DATA?

  3. THINGS LOTS of

  4. MADE UP OF • Microformats • Schema.org • RDFa •

    Microdata • JSON-LD
  5. MICROFORMATS of www.microformats.org

  6. HUMAN CONTEXT MACHINE CODE to Give

  7. EASILY MARK UP • People • Addresses • Dates •

    Events • and more..
  8. LIMITED in SCOPE

  9. LINKED DATA • Schema.org • RDFa • Microdata • JSON-LD

    Enter
  10. Link Link THE WEB WORKS How

  11. WEB & DATA The HTML / JS / CSS JSON

    Humans Machines
  12. HOW DOES LINKED DATA WORK?

  13. Tom Bob Julie James Parent Parent Partner Knows GIVES CONTEXT

  14. SHARED CONTEXT PREVENTS MIS-COMMUNICATION

  15. SEE YOUR TITLE? If Someone Asked To

  16. YOUR PERSONAL TITLE “MR” It Could Be

  17. YOUR JOB TITLE “WEB DESIGNER” It Could Be

  18. THE DEED TO YOUR HOUSE It Could Be

  19. MEANINGLESS WITHOUT CONTEXT it’s

  20. GIVE CONTEXT TO LINKED DATA? How Can We

  21. SCHEMA.ORG of www.schema.org

  22. MARKUP GIVES CONTEXT to

  23. DEFINITIONS • Creative Works • Events • Health • Organisations

    • Persons • Places • Products • Reviews No Markup, Just
  24. SCHEMA.ORG Documentation is maintained by Google, Yahoo!, Bing and Yandex

  25. HOW CAN I USE IT?

  26. TO IMPLEMENT How Microdata RDFa Search Engines Humans JSON-LD Machines

  27. MICRODATA

  28. SHARE CONTEXT SEARCH ENGINES with

  29. <section> <h1>Vincent Pickering</h1> <p> <img src="http://www.example.com/photo.jpg" alt="Portrait Image"> </p> <p>

    <a href="http://vincentp.me">Blog</a> </p> ! </section>
  30. <section itemscope itemtype="http://schema.org/Person"> <h1>Vincent Pickering</h1> <p> <img src="http://www.example.com/photo.jpg" alt="Portrait Image">

    </p> <p> <a href="http://vincentp.me">Blog</a> </p> ! </section>
  31. <section itemscope itemtype="http://schema.org/Person"> The definition only exists within these tags

    The vocab type we are declaring
  32. <h1 itemprop="name">Vincent Pickering</h1> <p> <img itemprop="photo" src="http://www.example.com/photo.jpg" alt="Portrait Image"> </p>

    <p> <a itemprop="url" href="http://vincentp.me">Blog</a> </p> defines the persons name the url belongs to the person the persons photo
  33. JUST REMEMBER itemscope - *Required* when you define a schema

    type schema type - Always in the form of: http://www.schema.org/xxx properties - In the form itemprop=“xxx”
  34. RDFa www.rdfa.info

  35. MARKUP SYNTAX STRUCTURED DATA for

  36. <section> <h1>Vincent Pickering</h1> <p> <img src="http://www.example.com/photo.jpg" alt="Portrait Image"> </p> <p>

    <a href="http://vincentp.me">Blog</a> </p> ! </section>
  37. <section vocab="http://schema.org/" resource="#vincent" typeof="Person"> <h1>Vincent Pickering</h1> <p> <img src="http://www.example.com/photo.jpg" alt="Portrait

    Image"> </p> <p> <a href="http://vincentp.me">Blog</a> </p> ! </section>
  38. <section vocab="http://schema.org/" resource="#vincent" typeof="Person"> the vocab type defines the context

    You can reference this definition like an ID using resource property Definition type
  39. <h1 property="name">Vincent Pickering</h1> <p> <img property="photo" src="http://www.example.com/photo.jpg" alt="Portrait Image"> </p>

    <p> <a property="url" href="http://vincentp.me">Blog</a> </p> defines the persons name the url belongs to the person the persons photo
  40. JUST REMEMBER typeof - defines top level node to assign

    context vocab type - URL to your definitions properties - In the form property=“xxx” resource - shortcut reference for context
  41. JSON-LD www.json-ld.org

  42. Website Website { “name": "Vincent", "title": “Web Designer” } {

    “name": "Vincent", "title": “Mr” } We can see the data is probably related, but there is ambiguity Our System
  43. CREATE A NETWORK OPEN DATA Of

  44. UNIVERSAL SHARE DATA Way To

  45. UNIVERSAL STORE DATA Way To

  46. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "John Doe",

    "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams", "additionalName": "Johnny", "url": "http://www.example.com", "address": { "@type": "PostalAddress", "streetAddress": "1234 Peach Drive", "addressLocality": "Wonderland", "addressRegion": "Georgia" } } </script>
  47. <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Person", "name": "John Doe",

    "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams", "additionalName": "Johnny", "url": "http://www.example.com", "address": { "@type": "PostalAddress", "streetAddress": "1234 Peach Drive", "addressLocality": "Wonderland", "addressRegion": "Georgia" } } </script> You need to add context and type declare as ld+json
  48. JSON-LD

  49. EMBED DATA IN HTML <script type="application/ld+json"> { "@context": "http://json-ld.org/contexts/person.jsonld", "@id":

    "http://dbpedia.org/resource/John_Lennon", "name": "John Lennon", "born": "1940-10-09", "spouse": "http://dbpedia.org/resource/Cynthia_Lennon" } </script>
  50. EMBED DATA IN HTML <script type="application/ld+json"> { "@context": "http://json-ld.org/contexts/person.jsonld", "@id":

    "http://dbpedia.org/resource/John_Lennon", "name": "John Lennon", "born": "1940-10-09", "spouse": "http://dbpedia.org/resource/Cynthia_Lennon" } </script> You need to add context to the email
  51. LINKED DATA

  52. DATA HIGHLIGHTER GOOGLE NOW CARDS RICH SNIPPETS GMAIL SUPPORTED

  53. SUM UP To Microdata Search Engines RDFa Human markup context

    JSON-LD Machine markup context schema.org Vocab Type Microformats Humans
  54. THANKYOU Follow Me At: @VIPickering www.vincentp.me