実践！構造化マークアップ

実践！構造化マークアップ
小川裕之
2015.05.11 書籍『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント

2012 年 4 月よりフリーランスとして独立。
Webデザイン・コーディングの受託を中心に、雑誌への寄稿、
最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。
横浜在住。
小川裕之
barchin hiro.ogw
「レスポンシブWebデザイン入門」
「現場のプロが教えるHTML+CSSコーディングの最新常識
知らないと困るWebデザインの新ルール4」執筆

今日話すこと
•構造化データとは
•構造化マークアップの実践

! ?
『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント
開催日時：2015年5月11日（月）19:30∼21:30
会場：株式会社ディー・エヌ・エー
参加費：1,000円
講演者：小川裕之、大竹孔明、中江亮

構造化データ
『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント
開催日時：2015年5月11日（月）19:30∼21:30
会場：株式会社ディー・エヌ・エー
参加費：1,000円
講演者：小川裕之、大竹孔明、中江亮
!
Event
Event location
Event performer
!?

メリット
• 情報が正確にインデックスされる
• 音声検索や地図検索で適切な情報が得られる
• リッチスニペットやナレッジグラフに反映

情報
(HTML)
シンタックスボキャブラリー
++
構造化データ

情報
(HTML)
シンタックスボキャブラリー
++
構造化データ
記述方法
意味を表す
定義

シンタックス
• RDFa(RDFa Lite) 
HTMLだけでなく、XML(X)HTML、にも使える。勧告済み。
• Microdata 
HTML5の仕様の一つとして策定。現在は止まってる。
• JSON-LD 
JSONベースのリンクトデータ。勧告済み。

ボキャブラリ
• Scheme.org 
Google、Yahoo!、Bing（後にYandex）が中心となって策定。
• Data-vocabulary 
開発終了。Scheme.orgに引き継がれる。

<h1>『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント</h1>
<dl>
<dt>開催日時</dt>
<dd>2015年5月11日 19:30∼21:30</dd>
<dt>会場</dt>
<dd>株式会社ディー・エヌ・エー（東京都渋谷区渋谷2-21-1）</dd>
<dt>講演者</dt>
<dd>小川裕之、大竹孔明、中江亮</dd>
</dl>

<h1 itemprop="">『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念
イベント</h1>
<dl>
<dd>2015年5月11日 19:30∼21:30</dd>
<dt>会場</dt>
<dt>講演者</dt>
</dl>
</div>

<h1 itemprop="name">『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念
イベント</h1>
<dl>
<dd>2015年5月11日 19:30∼21:30</dd>
<dt>会場</dt>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
<dd><time itemprop="startDate">2015年5月11日 19:30</time>
∼21:30</dd>
<dt>会場</dt>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
<dd><time itemprop="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time>
∼21:30</dd>
<dt>会場</dt>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
∼<time itemprop="endDate" datetime="2015-05-11T21:30">21:30</time></dd>
<dt>会場</dt>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
<dt>会場</dt>
<dd itemprop="location">株式会社ディー・エヌ・エー（東京都渋谷区渋谷2-21-1）</dd>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
<dt>会場</dt>
<dd itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">株式会社ディー・エヌ・エー</span>
(<span itemprop="address"> 東京都渋谷区渋谷2-21-1</span>)
</span>
</dd>
<dt>講演者</dt>
</dl>
</div>

イベント</h1>
<dl>
<dt>会場</dt>
<dd itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">株式会社ディー・エヌ・エー</span>
(<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressRegion">東京都</span>
<span itemprop="addressLocality">渋谷区</span>
<span itemprop=“streetAddress">渋谷2-21-1</span>
</span>)
</dd>
<dt>講演者</dt>
</dl>

<dt>講演者</dt>
<dd>
<span itemprop="performer" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">小川裕之</span>
<span itemprop="worksFor">ツクリベ</span>
</span>、
<span itemprop="name">大竹孔明</span>
<span itemprop="worksFor">株式会社ディー・エヌ・エー</span>
</span>、
<span itemprop="name">中江亮</span>
<span itemprop="worksFor">株式会社ディー・エヌ・エー</span>
</span>
</dd>
</dl>
</div>

https://developers.google.com/structured-data/testing-tool/

<div vocab="http://schema.org/" typeof="Event">
<h1 property="name">『現場のプロが教えるHTML＋CSSコーディングの最新常識』
発売記念イベント</h1>
<dl>
<dd><time property="startDate" datetime="2015-05-11T19:30">2015年5月11日 19:30</time>
∼<time property="endDate" datetime="2015-05-11T21:30">21:30</time>
</dd>
<dt>会場</dt>
<dd property="location" typeof="Place">
<span property="name">株式会社ディー・エヌ・エー</span>
<span property="address" typeof="PostalAddress">
<span property="addressRegion">東京都</span>
<span property="addressLocality">渋谷区</span>
<span property="streetAddress">渋谷2-21-1</span>
</span>
</dd>
<dt>講演者</dt>
<dd>

{
"@context": "http://schema.org"
}
</script>

{
"@context": "http://schema.org",
"@type": "Event",
}
</script>

{
"@type": "Event",
"name": "『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント"
}
</script>

{
"@type": "Event",
"name": "『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント”,
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30"
}
</script>

{
"@type": "Event",
"name": "『現場のプロが教えるHTML＋CSSコーディングの最新常識』発売記念イベント",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location":"株式会社ディー・エヌ・エー（東京都渋谷区渋谷2-21-1）"
}
</script>

{
"@type": "Event",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location":{}
}
</script>

{
"@type": "Event",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location": {
"@type": "Place",
"name": "株式会社ディー・エヌ・エー",
"address":"東京都渋谷区渋谷2-21-1"
}
}
</script>

{
"@type": "Event",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressRegion": "東京都",
"addressLocality": "渋谷区",
"streetAddress": "渋谷2-21-1"
}
},

{
"@type": "Event",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location": {
"@type": "Place",
"address": {
}
},
"performer":["小川裕之","大竹孔明","中江亮"]
}
</script>

{
"@type": "Event",
"startDate": "2015-05-11T19:30",
"endDate": "2015-05-11T21:30",
"location": {
"@type": "Place",
"address": {
}
},
“performer”:[{},{},{}]
}
</script>

"performer": [
{
"@type" : "Person",
"name" : "小川裕之",
"worksFor" : "ツクリベ"
},
{
"@type" : "Person",
"name" : "大竹孔明",
"worksFor" : "株式会社ディー・エヌ・エー"
},
{
"@type" : "Person",
"name" : "中江亮",
"worksFor" : "株式会社ディー・エヌ・エー"
}
]
}
</script>

JOSON-LDの特徴
• HTMLと分離できる
• データを取得して処理がしやすい
• 各種言語から生成ができる

まとめ
• 構造化データにすることで、情報を正確に発信でき
効果的に扱うことができる
• 構造化データは作りやすくなっている
• アプリ・IoTの普及を考えると更に必要性は高まる

ご清聴ありがとうございました。

実践！構造化マークアップ

Recommended

More Related Content

Similar to 実践！構造化マークアップ (20)

Recently uploaded (9)

実践！構造化マークアップ

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.