A Brief Overview On Structured Data

A quick 15 minute overview I gave at Forefront Leeds on Structured Data, the technologies it contains and how they work.

Transcript

1. STRUCTURED DATA HTML5 @VIPickering VINCENT PICKERING A Quick Primer On: @VIPickering VINCENT PICKERING
2. WHAT IS STRUCTURED DATA?
3. THINGS LOTS of
4. MADE UP OF • Microformats • Schema.org • RDFa & (RDFa lite) • Microdata • JSON for Linked Data
5. MICROFORMATS of www.microformats.org
6. HUMAN CONTEXT MACHINE CODE to Give Microformats
7. SCHEMA.ORG of www.schema.org
8. SCHEMA.ORG Documentation is maintained by Google, Yahoo!, Bing and Yandex
9. Resource Description Framework in Attributes www.rdfa.info
10. MARKUP SYNTAX STRUCTURED DATA for RDFa
11. RDFa lite Use
12. <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>
13. <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>
14. <section vocab="http://schema.org/" resource="#vincent" typeof="Person"> In RDFa you have to select vocab type You can reference this definition like an ID using resource property Definition type
15. <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>
16. <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
17. MICRODATA
18. Microdata annotates the DOM with scoped name/value pairs from custom vocabularies ~ Mark Pilgrim diveintohtml5
19. SHARE CONTEXT SEARCH ENGINES with
20. <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>
21. <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>
22. <section itemscope itemtype="http://schema.org/Person"> The definition only exists within these tags The type of definition we are declaring
23. <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>
24. <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
25. 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”
26. GIVE CONTEXT TO: • Creative works • Events • Health & medical types • Organisations • People • Places • Products • Reviews
27. MICRODATA MICROFORMATS
28. STRUCTURED DATA
29. DATA HIGHLIGHTER GOOGLE NOW CARDS RICH SNIPPETS
30. LETS TALK BEER Over www.vincentp.me @VIPickering