Structured Data

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

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