JSON-LD schema.org定義によるデータ構造化のススメ

©aratana
Inc.
{

“company”:
“株式会社アラタナ”,

“name”:
“⾼高⾒見見和也”,

“posi1on”:
“Front
End
Engineer”

}
JSON-LD
schema.org 定義による構造化データのススメ

自己紹介
2

⾼高⾒見見　和也（Takami Kazuya）
株式会社アラタナ
ECテクノロジー事業本部：デザイングループ所属
フロントエンドエンジニア
Twitter@miiitaka
Facebook@miiitaka

構造化データ？
©aratana
Inc.
4

構造化データとは？
HTMLに書かれている情報が検索索ロボット（クローラ）が理理解できるよ
うに意味のある(セマンティック)情報にしてあげるメタデータのこと。

HTML5でセマンティックな要素が増えました。

©aratana
Inc.
5

HTML5でセマンティックな
要素が増えました。
<header>
<footer>
<main>
<nav>
<figure>
<section>
<aside>
<article>
<figcaption>
<mark>

具体的な情報を定義
©aratana
Inc.
6

要素にプラスして、さらに具体的な情報を定義できます。

©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

<a
itemprop="url"
href="/member/"><span
itemprop="Etle">メンバー紹介</span></
a></li>

<li
itemscope

<a
itemprop="url"
href="/member/detail.php?id=47"><strong
itemprop="Etle”>高見和也
</strong></a></li></ul></nav>

©aratana
Inc.
8

Googleが2009年年から独⾃自に策定していたもの。
Data-‐Vocabulary.org
2011-‐06-‐02

共同で開発・サポートすることを発表
協力しましょ。

構造化データ（schema.org）のシンタックス
©aratana
Inc.
9

Microdata

JSON-‐LD

RDFa

schema.org のシンタックス（構文規則）
JSON-LDが
いいよ

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

JSON-‐LD？
©aratana
Inc.
11

JSON-‐LD
(JSON
for
Linking
Data)

そうそう
JSONを使ってLinked Opend Dataを表現するために策定を進めてきた仕様で、
2014年年1⽉月16⽇日に正式にW3C勧告となりました。
http://json-ld.org
何と言っても
見やすい！

シンタックス比較
©aratana
Inc.
12

レビューの
リッチスニペット
例）レビュー：microdata

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>

可読性が
悪い！

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は
そのまま

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で
別に定義

JSON-LD schema.org定義によるデータ構造化のススメ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie JSON-LD schema.org定義によるデータ構造化のススメ

Ähnlich wie JSON-LD schema.org定義によるデータ構造化のススメ (20)

Mehr von Takami Kazuya

Mehr von Takami Kazuya (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (8)

JSON-LD schema.org定義によるデータ構造化のススメ