Schema.orgについての社内ディスカッション資料

1. Web制作初心者でもわかる
Schema.org
長田太彪

2. 目次
Schema.orgについて
• 前提知識：セマンティック・ウェブ
• schemaとは
• shcemaでできること
• schemaのデメリット
Schmea.orgの現状
• 大手3社による管理
• 導入状況
• 対応状況
Schema.orgの使い方
• 3つのシンタックス
• Microdata/RDFaの具体例とメリット・デメリット
• JSON-LDの具体例とメリット・デメリット

3. Schema.orgについて

4. セマンティック・ウェブ
"セマンティックウェブとは、Webページおよびそ
の中に記述された内容について、それが何を
意味するかを表す情報(メタデータ)を一定の規
則に従って付加することで、コンピュータが効率
よく情報を収集・解釈できるようにする構想”
IT用語辞典 e-Words：
http://e-words.jp/w/セマンティックWeb.html
HTML5の例
div → header、footer、section、article、nav

5. Schema.orgとは
• webサイトの構造化を行うボキャブラリー
の１つ。
• セマンティックの世界のボキャブラリー
– ECサイトで使用する GoodRelations
– 人物の情報を表す FOFA (Friend of a Friend)
– ニュース関連の情報を表す rNews
– 幅広いジャンルをカバーする Data-Vocabulary.org

6. Schema.orgとは
<h1>アバター</h1>
• ただの文字列。
<section itemscope itemtype=“http://schema.org/Movie”>
<h1>アバター</h1>
</section>
• アバターという映画。

7. 構造化前
<section>
<h1>アバター</h1>
<div>監督: ジェームズ・キャメロン （生年月日 1956年8月16日)）</div>
<div>サイエンス・フィクション</div>
<a href=“../movies/avatar-theatrical-trailer.html”>予告ムービー</a>
</section>
構造化後
<section itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">アバター</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
監督: <span itemprop=“name”>ジェームズ・キャメロン</span>
(生年月日<span itemprop=“birthDate” datetime="1956-08-16" >1956年8月16日</span>）
</div>
<div itemprop="genre">サイエンス・フィクション</div>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">予告ムービー</a>
</section>

8. Schema.orgでできること
• リッチスニペットの表示。
• 検索エンジンにコンテンツの情報を伝える。
• 付加情報によるCTRの増加を狙える。
Googleマップのアイトラッキング調査で明らかになったソーシャルシグナルの重要性
http://www.seojapan.com/blog/google-map-social-signal
リッチスニペットの例

9. Schema.orgのデメリット
• ソースコードの量が増える分、
ごくわずかな遅延が発生する。
• ほぼ無いと考えて良い。

10. Schema.orgの現状

11. 大手3社による管理
• Google、Bing、Yahoo!が共同で開発。
• Googleはもちろん、Bingも一部
Schema.orgに対応
http://www.bing.com/webmaster/help/marking-up-your-site-with-structured-data-3a93e731

12. Schema.orgの導入状況
120億のページの調査結果。
• 500万のドメイン ―― 全体の6%
• 150億のEntities（エンティティ）
• 650億のTriples（トリプル）
• 25億以上のページがschema.orgを設定 ―― 全体の21%
schema.orgのこれまでと今、そしてこれから at #SemTechBiz 2014 | 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/past-present-and-future-of-schema-org/

13. Schema.orgの対応状況
• 小さい規模でしか活用されていない。
• 普及が進んでおらず、検索順位に与える影
響が少ない。
• 2011年、当初100のカテゴリしかなかったが、
2014年11月時点で1200以上登録されている。
• パンくずリストは未対応。
2015年6月12日からサポートを開始。

14. Schema.orgの使い方

15. 3つのシンタックス
• Microdata
• RDFa
• JSON-LD

16. Microdataの具体例
構造化前
<section>
<h1>長田太彪</h1>
<div>職業：フロントエンドエンジニア</div>
<div>勤務先：株式会社ベイジ</div>
<div>勤務先の住所：東京都</div>
</section>
構造化後
<section itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">長田太彪</h1>
<div>職業：<span itemprop="jobtitle">フロントエンドエンジニア</span></div>
<div itemprop="memberof" itemscope itemtype="http://schema.org/Organization">
<div>勤務先：<span itemprop="name">株式会社ベイジ</span></div>
<div>勤務先の住所：<span itemprop="address">東京都</span></div>
</div>
</section>

17. Microdataと、RDFaについて
HTMLのタグに、構造化データを
マークアップする。
メリット
• 既存のタグに追記していくだけで、直感的にできる。
デメリット
• 構造化に合わせて新しくタグを追加する必要が出てくる場合、
レイアウトの調整が必要になる可能性がある。
• HTMLの視認性が悪くなる。

18. JSON-LDの具体例
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name":"長田太彪",
"jobtitle":"フロントエンドエンジニア",
"memberof": {
"@type":"Organization",
"name":"株式会社ベイジ",
"address":"東京都"
}
}
</script>

19. JSON-LDについて
JavaScriptの記述方法を使用する。
メリット
• １箇所にまとめて記述できる。
• どこにでも記述できる。
• htmlが汚くならない。
デメリット
• 同じ内容をHTML本文中とJSON-LDフォーマットとで2回書かなければならない。

20. よくある質問
• なぜ競合の3社が共同で開発しているのか
• マークアップする理由
• 今後どのように展開していくか
• なぜ自動でデータを拡張してくれないのか
内容はSchema.org 日本語訳のサイトを参照
schema.org 日本語訳 http://schema-ja.appspot.com/docs/faq.html