More Related Content
Similar to JSON-LD schema.org定義によるデータ構造化のススメ (20)
More from Takami Kazuya (20)
JSON-LD schema.org定義によるデータ構造化のススメ
- 1. ©aratana
Inc.
{
“company”:
“株式会社アラタナ”,
“name”:
“⾼高⾒見見和也”,
“posi1on”:
“Front
End
Engineer”
}
JSON-LD
schema.org 定義による構造化データのススメ
- 7. 具体的な情報を定義
©aratana
Inc.
7
要素にプラスして、さらに具体的な情報を定義できます。
Googleが2009年年から独⾃自に策定していたもの。
Data-‐Vocabulary.org
<nav>
<ul>
<li
itemscope
itemtype="h<p://data-‐vocabulary.org/Breadcrumb">
<a
itemprop="url"
href="/"><span
itemprop="Etle">HOME</span></a></li>
<li
itemscope
itemtype="h<p://data-‐vocabulary.org/Breadcrumb">
<a
itemprop="url"
href="/member/"><span
itemprop="Etle">メンバー紹介</span></
a></li>
<li
itemscope
itemtype="h<p://data-‐vocabulary.org/Breadcrumb">
<a
itemprop="url"
href="/member/detail.php?id=47"><strong
itemprop="Etle”>高見和也
</strong></a></li></ul></nav>
- 8. 具体的な情報を定義
©aratana
Inc.
8
要素にプラスして、さらに具体的な情報を定義できます。
Googleが2009年年から独⾃自に策定していたもの。
Data-‐Vocabulary.org
2011-‐06-‐02
共同で開発・サポートすることを発表
協力しましょ。
- 10. JSON-‐LD?
©aratana
Inc.
10
JSON-‐LD
(JSON
for
Linking
Data)
JSON-LDが
いいよ
JSONを使ってLinked Opend Dataを表現するために策定を進めてきた仕様で、
2014年年1⽉月16⽇日に正式にW3C勧告となりました。
http://json-ld.org
- 11. JSON-‐LD?
©aratana
Inc.
11
JSON-‐LD
(JSON
for
Linking
Data)
そうそう
JSONを使ってLinked Opend Dataを表現するために策定を進めてきた仕様で、
2014年年1⽉月16⽇日に正式にW3C勧告となりました。
http://json-ld.org
何と言っても
見やすい!
- 13. microdataの例
©aratana
Inc.
13
例)レビュー:microdata
<div
itemscope
itemtype="h<p://schema.org/Review">
<div
itemprop="itemReviewed"
itemscope
itemtype="hZp://schema.org/Book">
<span
itemprop="name">The
Catcher
in
the
Rye</span>
(
<a
itemprop="sameAs"
href="hZp://en.wikipedia.org/wiki/
The_Catcher_in_the_Rye">wikipedia</a>)
</div>
<span
itemprop="reviewRaEng"
itemscope
itemtype="hZp://schema.org/RaEng">
<span
itemprop="raEngValue">4</span>
</span>
stars
-‐
<b>"<span
itemprop="name">A
good
read.</span>"
</b>
<span
itemprop="author"
itemscope
itemtype="hZp://schema.org/Person">
<span
itemprop="name">Bob
Smith</span>
</span>
<span
itemprop="reviewBody">Catcher
in
the
Rye
is
a
fun
book.
It's
a
good
book
to
read.</span>
</div>
可読性が
悪い!
- 14. JSON-‐LDの例
©aratana
Inc.
14
例)レビュー:JSON-LD
<div>
<div>
<span>The
Catcher
in
the
Rye</span>
(
<a
href="hZp://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">wikipedia</a>)
</div>
<span>
<span>4</span>
</span>
stars
-‐
<b>"<span>A
good
read.</span>"
</b>
<span>
<span>Bob
Smith</span>
</span>
<span>Catcher
in
the
Rye
is
a
fun
book.
It's
a
good
book
to
read.</span>
</div>
HTMLは
そのまま
- 15. JSON-‐LDの例
©aratana
Inc.
15
<script
type="applica1on/ld+json">
{
"@context":
"hZp://schema.org/",
"@type":
"Review",
"itemReviewed":{
"@type":
"Book",
"name":
"The
Catcher
in
the
Rye",
"sameAs":
"hZp://en.wikipedia.org/wiki/The_Catcher_in_the_Rye"
},
"reviewRaEng":{
"@type":
"RaEng",
"raEngValue":
"4"
},
"name":
"A
good
read.",
"author":{
"@type":
"Person",
"name":
"Bob
Smith"
},
"reviewBody":
"Catcher
in
the
Rye
is
a
fun
book.
It's
a
good
book
to
read."
}
</script>
scriptで
別に定義