Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
JSON-LD
(Jerry Hong)
s6323859@gmail.com
www.jerry-hong.com
AGENDA
•
•
•
Background Introduction
•
•
•
• (Semantic Web)
• RDF
• Sechma.org
http://www.bigdata-careers.com/
(Semantic Web)
• W3C ( )
•
•
• Resource Description Framework
(RDF)
http://vanseodesign.com/web-design/semantic-html/
Recourse Description Framework
•
•
(Linked Data)
• (modle)
(syntax)
• : RDFa, RDF/XML, Turtle,
JSON-LD (RDF 1.1)
https://g...
JSON-LD
• JSON for Linked Data
• JSON Linked Data
http://json-ld.org/images/
JSON
• JavaScript Object Notation
•
Linked Data
// JSON
{
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}
JSON
• JavaScript Object Notation
•
• Server/Client
•
•
Linked Data
•
•
• URIs
• HTTP
• (RDF)
JSON + Linked Data = JSON-LD
http://www.spoon-tamago.com/2016/09/26/pen-pineapple-apple-pen-ppap-by-piko-taro/
// JSON
{
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail.com"
}
// type
{
"@type": "http://schema.org/person",
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859@hotmail...
// IRIs
{
"@type": "http://schema.org/person",
"http://schema.org/name": "Jerry Hong",
"http://schema.org/birthDate": "199...
// @context
{
"@context": "http://schema.org/",
"@type": "http://schema.org/person",
"http://schema.org/name": "Jerry Hong...
{
"@context": "http://schema.org/",
"@type": "person",
"name": "Jerry Hong",
"birthDate": "1993-07-15",
"email": "s6323859...
JSON-LD
• JSON for Linked Data
• JSON Linked Data
• 2013 6 schema.org
http://json-ld.org/images/
Schema.org
• Google, Microsoft, Yahoo,
Yandex
•
•
• JSON-LD
• Microdata
• RDFa
http://www.keywordperformance.com/how-impor...
- JSON-LD
• RDF
•
•
-
RDF JSON-LD
-
• (SEO)
•
• Google Now
• Siri
•
• Google Rich Snippet
How to use ?
<script type="application/ld+json">
{...}
</script>
Step 1
• HTML head
script
• JSON-LD script
• script type
application/l...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person"
}
</script>
Step 2
• context htt...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Person",
"name": "Jerry Hong",
"birthDat...
Final
•
• https://
search.google.com/
structured-data/testing-
tool/
React SPA
npm install react-helmet --save
• react-helmet
class NewsPage extend Component {
render(){
return (
<div>
<Helmet
script={[{
"type": "application/ld+json",
"innerHTML": ...
JSON-LD
•
• Google
• Hallanalysis
• Google
• OpenLink Structured Data Sniffer
SEO
• Google Search Console
•
• Bing
• SEO Testing
• (SEO )
Summary
• JSON-LD
• Schema.org
• SEO
JSON-LD
• Microdata, RDFa HTML JSON
<p itemscope itemprop="Person" itemtype="http://
schema.org/Person">
<span itemprop="name">
Christopher Froome
</span>
was...
JSON-LD
• Microdata, RDFa HTML JSON
• HTML CSS
• JSON Microdata, RDFa
• JSON
•
• http://json-ld.org/
• http://schema.org/
• https://www.w3.org/TR/WD-rdf-syntax-971002/#model
• https://www.w3.org/TR/201...
Thank you!
JSON-LD
JSON-LD
JSON-LD
Prochain SlideShare
Chargement dans…5
×

JSON-LD

540 vues

Publié le

JSON-LD (Json for Linked Data) 介紹

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

JSON-LD

  1. 1. JSON-LD (Jerry Hong) s6323859@gmail.com www.jerry-hong.com
  2. 2. AGENDA • • •
  3. 3. Background Introduction
  4. 4. • • • • (Semantic Web) • RDF • Sechma.org http://www.bigdata-careers.com/
  5. 5. (Semantic Web) • W3C ( ) • • • Resource Description Framework (RDF) http://vanseodesign.com/web-design/semantic-html/
  6. 6. Recourse Description Framework • • (Linked Data) • (modle) (syntax) • : RDFa, RDF/XML, Turtle, JSON-LD (RDF 1.1) https://goo.gl/jm5R5F
  7. 7. JSON-LD • JSON for Linked Data • JSON Linked Data http://json-ld.org/images/
  8. 8. JSON • JavaScript Object Notation • Linked Data
  9. 9. // JSON { "name": "Jerry Hong", "birthDate": "1993-07-15", "email": "s6323859@hotmail.com" }
  10. 10. JSON • JavaScript Object Notation • • Server/Client • • Linked Data • • • URIs • HTTP • (RDF)
  11. 11. JSON + Linked Data = JSON-LD http://www.spoon-tamago.com/2016/09/26/pen-pineapple-apple-pen-ppap-by-piko-taro/
  12. 12. // JSON { "name": "Jerry Hong", "birthDate": "1993-07-15", "email": "s6323859@hotmail.com" }
  13. 13. // type { "@type": "http://schema.org/person", "name": "Jerry Hong", "birthDate": "1993-07-15", "email": "s6323859@hotmail.com" }
  14. 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. 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. 16. { "@context": "http://schema.org/", "@type": "person", "name": "Jerry Hong", "birthDate": "1993-07-15", "email": "s6323859@hotmail.com" }
  17. 17. JSON-LD • JSON for Linked Data • JSON Linked Data • 2013 6 schema.org http://json-ld.org/images/
  18. 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. 19. - JSON-LD • RDF • •
  20. 20. - RDF JSON-LD
  21. 21. - • (SEO) • • Google Now • Siri • • Google Rich Snippet
  22. 22. How to use ?
  23. 23. <script type="application/ld+json"> {...} </script> Step 1 • HTML head script • JSON-LD script • script type application/ld+json
  24. 24. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Person" } </script> Step 2 • context http:// schema.org/ • Schema.org (type) • type • Person
  25. 25. <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 • •
  26. 26. Final • • https:// search.google.com/ structured-data/testing- tool/
  27. 27. React SPA
  28. 28. npm install react-helmet --save • react-helmet
  29. 29. 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
  30. 30. JSON-LD • • Google • Hallanalysis • Google • OpenLink Structured Data Sniffer
  31. 31. SEO • Google Search Console • • Bing • SEO Testing • (SEO )
  32. 32. Summary
  33. 33. • JSON-LD • Schema.org • SEO
  34. 34. JSON-LD • Microdata, RDFa HTML JSON
  35. 35. <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
  36. 36. JSON-LD • Microdata, RDFa HTML JSON • HTML CSS • JSON Microdata, RDFa • JSON •
  37. 37. • 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
  38. 38. Thank you!

×