JSON-LD (Json for Linked Data) 介紹

1. JSON-LD
(Jerry Hong)
s6323859@gmail.com
www.jerry-hong.com

2. AGENDA
•
•
•

3. Background Introduction

4. •
•
•
• (Semantic Web)
• RDF
• Sechma.org
http://www.bigdata-careers.com/

5. (Semantic Web)
• W3C ( )
•
•
• Resource Description Framework
(RDF)
http://vanseodesign.com/web-design/semantic-html/

6. Recourse Description Framework
•
•
(Linked Data)
• (modle)
(syntax)
• : RDFa, RDF/XML, Turtle,
JSON-LD (RDF 1.1)
https://goo.gl/jm5R5F

7. JSON-LD
• JSON for Linked Data
• JSON Linked Data
http://json-ld.org/images/

8. JSON
• JavaScript Object Notation
•
Linked Data

9. // JSON
{
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}

10. JSON
• JavaScript Object Notation
•
• Server/Client
•
•
Linked Data
•
•
• URIs
• HTTP
• (RDF)

11. JSON + Linked Data = JSON-LD
http://www.spoon-tamago.com/2016/09/26/pen-pineapple-apple-pen-ppap-by-piko-taro/

12. // JSON
{
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}

13. // type
{
"@type": "http://schema.org/person",
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}

14. // IRIs
{
"@type": "http://schema.org/person",
"http://schema.org/name": "Jerry Hong",
"http://schema.org/birthDate": "1993-07-15",
"http://schema.org/email": "s6323859@hotmail.com"
}

15. // @context
{
"@context": "http://schema.org/",
"@type": "http://schema.org/person",
"http://schema.org/name": "Jerry Hong",
"http://schema.org/birthDate": "1993-07-15",
"http://schema.org/email": "s6323859@hotmail.com"
}

16. {
"@context": "http://schema.org/",
"@type": "person",
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}

17. JSON-LD
• JSON for Linked Data
• JSON Linked Data
• 2013 6 schema.org
http://json-ld.org/images/

18. Schema.org
• Google, Microsoft, Yahoo,
Yandex
•
•
• JSON-LD
• Microdata
• RDFa
http://www.keywordperformance.com/how-important-is-schema-markup-for-seo-in-2015/

19. - JSON-LD
• RDF
•
•

20. -
RDF JSON-LD

21. -
• (SEO)
•
• Google Now
• Siri
•
• Google Rich Snippet

23. How to use ?

24. <script type="application/ld+json">
{...}
</script>
Step 1
• HTML head
script
• JSON-LD script
• script type
application/ld+json

25. <script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person"
}
</script>
Step 2
• context http://
schema.org/
• Schema.org
(type)
• type
• Person

26. <script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "mailto:s6323859@gmail.com"
}
</script>
Step 3
•
•

27. Final
•
• https://
search.google.com/
structured-data/testing-
tool/

28. React SPA

29. npm install react-helmet --save
• react-helmet

30. class NewsPage extend Component {
render(){
return (
<div>
<Helmet
script={[{
"type": "application/ld+json",
"innerHTML": `{
"@context": "http://schema.org",
"@type": "NewsArticle"
}`
}]}
/>
...
</div>);
}
Helmet
• Helmet
•
JSON-LD

31. JSON-LD
•
• Google
• Hallanalysis
• Google
• OpenLink Structured Data Sniffer

32. SEO
• Google Search Console
•
• Bing
• SEO Testing
• (SEO )

33. Summary

34. • JSON-LD
• Schema.org
• SEO

35. JSON-LD
• Microdata, RDFa HTML JSON

36. <p itemscope itemprop="Person" itemtype="http://
schema.org/Person">
<span itemprop="name">
Christopher Froome
</span>
was sponsored by
<span itemprop="sponsor" itemtype="http://
schema.org/Organization">
<a itemprop="url" href="http://
www.skysports.com/">
Sky
</a>
</span>
in the Tour de France.
</p>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"name": "Christopher Froome",
"sponsor":
{
"@type": "Organization",
"name": "Sky",
"url": "http://www.skysports.com/"
}
}
</script>
JSON-LD Microdata

37. JSON-LD
• Microdata, RDFa HTML JSON
• HTML CSS
• JSON Microdata, RDFa
• JSON
•

40. • http://json-ld.org/
• http://schema.org/
• https://www.w3.org/TR/WD-rdf-syntax-971002/#model
• https://www.w3.org/TR/2014/REC-json-ld-20140116/
• https://developers.google.com/search/docs/guides/intro-structured-data
• http://www.slideshare.net/gkellogg1/jsonld-json-for-the-social-web
• https://speakerdeck.com/bobo52310/json-ld-jian-jie
• https://speakerdeck.com/winwu/json-ld-jian-jie
• https://www.youtube.com/watch?v=4x_xzT5eF5Q
• http://blog.schema.org/2013/06/schemaorg-and-json-ld.html

41. Thank you!