Tweet
Tweet

Slide 1

Slide 1 text

STRUCTURED DATA HTML5 VINCENT PICKERING A Quick Primer On: Freelance UI/UX Designer ! @VIPickering VINCENT PICKERING

Slide 2

Slide 2 text

WHAT IS STRUCTURED DATA?

Slide 3

Slide 3 text

THINGS LOTS of

Slide 4

Slide 4 text

MADE UP OF • Microformats • Schema.org • RDFa • Microdata • JSON-LD

Slide 5

Slide 5 text

MICROFORMATS of www.microformats.org

Slide 6

Slide 6 text

HUMAN CONTEXT MACHINE CODE to Give

Slide 7

Slide 7 text

EASILY MARK UP • People • Addresses • Dates • Events • and more..

Slide 8

Slide 8 text

LIMITED in SCOPE

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Link Link THE WEB WORKS How

Slide 11

Slide 11 text

WEB & DATA The HTML / JS / CSS JSON Humans Machines

Slide 12

Slide 12 text

HOW DOES LINKED DATA WORK?

Slide 13

Slide 13 text

Tom Bob Julie James Parent Parent Partner Knows GIVES CONTEXT

Slide 14

Slide 14 text

SHARED CONTEXT PREVENTS MIS-COMMUNICATION

Slide 15

Slide 15 text

SEE YOUR TITLE? If Someone Asked To

Slide 16

Slide 16 text

YOUR PERSONAL TITLE “MR” It Could Be

Slide 17

Slide 17 text

YOUR JOB TITLE “WEB DESIGNER” It Could Be

Slide 18

Slide 18 text

THE DEED TO YOUR HOUSE It Could Be

Slide 19

Slide 19 text

MEANINGLESS WITHOUT CONTEXT it’s

Slide 20

Slide 20 text

GIVE CONTEXT TO LINKED DATA? How Can We

Slide 21

Slide 21 text

SCHEMA.ORG of www.schema.org

Slide 22

Slide 22 text

MARKUP GIVES CONTEXT to

Slide 23

Slide 23 text

DEFINITIONS • Creative Works • Events • Health • Organisations • Persons • Places • Products • Reviews No Markup, Just

Slide 24

Slide 24 text

SCHEMA.ORG Documentation is maintained by Google, Yahoo!, Bing and Yandex

Slide 25

Slide 25 text

HOW CAN I USE IT?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

MICRODATA

Slide 28

Slide 28 text

SHARE CONTEXT SEARCH ENGINES with

Slide 29

Slide 29 text

Vincent Pickering

Portrait Image

Blog

!

Slide 30

Slide 30 text

Vincent Pickering

Portrait Image

Blog

!

Slide 31

Slide 31 text

The definition only exists within these tags The vocab type we are declaring

Slide 32

Slide 32 text

Vincent Pickering

Portrait Image

Blog

defines the persons name the url belongs to the person the persons photo

Slide 33

Slide 33 text

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”

Slide 34

Slide 34 text

RDFa www.rdfa.info

Slide 35

Slide 35 text

MARKUP SYNTAX STRUCTURED DATA for

Slide 36

Slide 36 text

Vincent Pickering

Portrait Image

Blog

!

Slide 37

Slide 37 text

Vincent Pickering

Portrait Image

Blog

!

Slide 38

Slide 38 text

the vocab type defines the context You can reference this definition like an ID using resource property Definition type

Slide 39

Slide 39 text

Vincent Pickering

Portrait Image

Blog

defines the persons name the url belongs to the person the persons photo

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

JSON-LD www.json-ld.org

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

CREATE A NETWORK OPEN DATA Of

Slide 44

Slide 44 text

UNIVERSAL SHARE DATA Way To

Slide 45

Slide 45 text

UNIVERSAL STORE DATA Way To

Slide 46

Slide 46 text

{ "@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" } }

Slide 47

Slide 47 text

{ "@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" } } You need to add context and type declare as ld+json

Slide 48

Slide 48 text

JSON-LD

Slide 49

Slide 49 text

EMBED DATA IN HTML { "@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" }

Slide 50

Slide 50 text

EMBED DATA IN HTML { "@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" } You need to add context to the email

Slide 51

Slide 51 text

LINKED DATA

Slide 52

Slide 52 text

DATA HIGHLIGHTER GOOGLE NOW CARDS RICH SNIPPETS GMAIL SUPPORTED

Slide 53

Slide 53 text

SUM UP To Microdata Search Engines RDFa Human markup context JSON-LD Machine markup context schema.org Vocab Type Microformats Humans

Slide 54

Slide 54 text

THANKYOU Follow Me At: @VIPickering www.vincentp.me