2016.07.10 WordCamp Kansai 2016 登壇スライド

1. ©
WordCamp
Kansai
2016
WordPress + JSON-‐‑‒LDで構造化する
これからのマークアップ
WordCamp Kansai 2016
ver.1.0.0
【Kazuya
Takami】

2. ©
WordCamp
Kansai
2016
⾃自⼰己紹介
1
⾼高⾒見見 和也（Takami Kazuya）
h<ps://twi<er.com/miiitaka
h<ps://www.facebook.com/miiitaka
株式会社アラタナ
Front-‐‑‒End Developer
h<ps://github.com/miiitaka

3. ©
WordCamp
Kansai
2016
⾃自⼰己紹介（WordPressへの貢献）
2

4. ©
WordCamp
Kansai
2016
アジェンダ
3
p ⾃自⼰己紹介（済んだ）
p EC
サイトの KGI・KPI
とWordPress
p WordPressで考える流流⼊入経路路
p Schema.org 構造化マークアップとJSON-­‐LD
p Google
Schemas
p Twenty
Sixteen
のマークアップ状況は？
p 構造化マークアップ
+
WordPress
プラグイン作ってみた
p まとめ

5. ©
WordCamp
Kansai
2016
はじまり
4
EC サイトの KGI・KPI と WordPress

6. ©
WordCamp
Kansai
2016
ECサイトの⽬目的は？
5
◆KGI（Key Goal Indicator：重要⽬目標達成指標）を決める。
→ECサイトでの顧客⼀一⼈人あたりの平均単価は？
＝例例）10,000円
→訪問者数における平均購⼊入率率率は？
＝例例）2%
1,000,000 = 10,000 × ( 1⽇日あたりの訪問者数 × 0.02 ) × 30⽇日(1か⽉月)
- 例例）売上⽬目標 1,000,000円／⽉月 を設定
KPI（Key Performance Indicator）
約168UU以上必要

7. ©
WordCamp
Kansai
2016
どうしよう？
6
◆サイトの訪問者数を増やすには
l SEO（Search Engine Optimization：検索索エンジン最適化）
l 有料料広告
l Social media
l ⼝口コミ
l メディア（いわゆる4マス：新聞・雑誌・テレビ・ラジオ）
etc...

8. ©
WordCamp
Kansai
2016
WordPressを使⽤用してとなると？
7
◆サイトの訪問者数を増やすには
l SEO（Search Engine Optimization：検索索エンジン最適化）
l 有料料広告
l Social media
l ⼝口コミ
l メディア（いわゆる4マス：新聞・雑誌・テレビ・ラジオ）
etc...
コンテンツを作って
流流⼊入を計る (‘ω’)

9. ©
WordCamp
Kansai
2016
訪問者はどこから？
8
WordPressで考える流流⼊入経路路

10. ©
WordCamp
Kansai
2016
コンテンツマーケティングを考える
9
◆WordPressで制作できるコンテンツいろいろ
l 記事（お役⽴立立ち情報系・感情系など）
l 動画（バイラル系・著名⼈人活⽤用系・商品紹介など）
l ウェビナー
l デモサイト／導⼊入事例例
l コミュニティ・フォーラム
l レビュー

11. ©
WordCamp
Kansai
2016
WordPressで⼤大抵のことはできそう
10
◆WordPressで制作できるコンテンツいろいろ
l 記事（お役⽴立立ち情報系・感情系など）
l 動画（バイラル系・著名⼈人活⽤用系・商品紹介など）
l ウェビナー
l デモサイト／導⼊入事例例
l コミュニティ・フォーラム
l レビュー
投稿・固定ページで
できそう :)
bbPressやBuddyPress
など :)
コメント機能で
できそう :)

12. ©
WordCamp
Kansai
2016
ようやく本題
11
Schema.org 構造化マークアップと
JSON-LD

13. ©
WordCamp
Kansai
2016
⽬目的は？
12
◆構造化マークアップをする⽬目的（エンジニアができるアプローチ）
l 検索索結果のページ（SERP）の表⽰示をリッチにする（リッチスニペット）
→ 検索索順位を上げるものではなく、CTRの向上が⽬目的。
l 検索索エンジンに正しい情報を伝える
→ そのページに何の情報があるのかをまとめて渡す準備をしておく。
→ その定義の⼀一つとして Schema.org がある。
→ その定義に従ってデータを作成する。
正しい情報を伝えると？

14. ©
WordCamp
Kansai
2016
Google公式での定義
13
Google Schemas

15. ©
WordCamp
Kansai
2016
Google お墨付き
14
Google はJSON-LDを推奨しています。

16. ©
WordCamp
Kansai
2016
Site Structure
15
出典：h<ps://developers.google.com/search/docs/guides/

17. ©
WordCamp
Kansai
2016
Authorized Presence
16
出典：h<ps://developers.google.com/search/docs/guides/

18. ©
WordCamp
Kansai
2016
Creative Works
17
出典：h<ps://developers.google.com/search/docs/guides/

19. ©
WordCamp
Kansai
2016
Commerce
18
出典：h<ps://developers.google.com/search/docs/guides/

20. ©
WordCamp
Kansai
2016
Logo Markup
19
<script
type="applicaVon/ld+json">
{
"@context":
"h<p://schema.org",
"@type":
"OrganizaVon",
"url":
"h<p://www.example.com",
"logo":
"h<p://www.example.com/logo.png"
}
</script>
出典：h<ps://developers.google.com/search/docs/guides/

21. ©
WordCamp
Kansai
2016
JSON-‐‑‒LD
20
<script
type="applicaVon/ld+json">
"@context":
"h<p://schema.org",
"@type":
"OrganizaVon",
"url":
"h<p://www.example.com",
"logo":
"h<p://www.example.com/logo.png”
</script>
◆Schema.org の書き⽅方の規則（シンタックス）としてJSON-LD

22. ©
WordCamp
Kansai
2016
Twenty Sixteen
21
Twenty Sixteen の対応状況は？

23. ©
WordCamp
Kansai
2016
hentry
22
hentry
定義がある
(microformats.org)
要素の属性として
設定してある。

24. ©
WordCamp
Kansai
2016
マークアップの考え⽅方
23
◆HTML要素の属性値として設定すべきではない
l HTMLの構造（マークアップ）に左右されてしまう。
l ソースコードが汚染される（⾒見見づらい）
l マークアップ都度度設定を⾏行行う必要がある。（当然抜け漏漏れが発⽣生する）
結論論：WordPressのテーマに直接設定すべきではない。
JSON-‐‑‒LDのシンタックスで懸念念事項を解決できる
テーマから分離離できる ＝ プラグイン化できる！

25. ©
WordCamp
Kansai
2016
Markup (JSON-‐‑‒LD) structured in schema.org
24
構造化マークアップ
+
WordPress
で
プラグイン作ってみた

26. ©
WordCamp
Kansai
2016
Markup (JSON-‐‑‒LD) structured in schema.org
25

27. ©
WordCamp
Kansai
2016
Markup (JSON-‐‑‒LD) structured in schema.org（管理理画⾯面：⼀一覧）
26
導⼊入したいSchema.org
を
選択します。(^o^)

28. ©
WordCamp
Kansai
2016
Markup (JSON-‐‑‒LD) structured in schema.org（管理理画⾯面：詳細）
27
出⼒力力したいページにチェックを
⼊入れます（カスタム投稿対応）
設定項⽬目を記述します。
これだけ！＼(^o^)／

29. ©
WordCamp
Kansai
2016
このプラグインの未来
28
◆Googleの更更新をキャッチアップして常に更更新する
l Googleが実験的に⾏行行うものも多いが、公開情報はキャッチアップして試す
l AMPに対応する（実はAutomattic社謹製のAMPプラグインに対応済み）
l 実はメールのマークアップもできる。
★現在はGmailだけの対応だが他のベンダーのメーラも対応するのでは？
他のプラグインのフックポイントを使ってJSON-‐‑‒LDを出⼒力力する
プラグインのコラボレーション！

30. ©
WordCamp
Kansai
2016
最後に
29
まとめ

31. ©
WordCamp
Kansai
2016
まとめ
30
WordPress のコンテンツを最⼤大限活⽤用するために
構造化マークアップを意識識しましょう。

32. ©
WordCamp
Kansai
2016
ご清聴ありがとうございました。
31
ありがとうございました。

33. ©
WordCamp
Kansai
2016
- Google Schemas
https://developers.google.com/schemas/
- Google Search Document
https://developers.google.com/search/docs/data-types/data-type-selector
- Google ウェブマスター向け公式サイト
http://googlewebmastercentral-ja.blogspot.co.id/2015/03/easier-website-development-with-web.html
- 構造化テストツール
https://search.google.com/structured-data/testing-tool
- schema.org構造化データマークアップのシンタックスにJSON-LDという選択
https://html5experts.jp/miiitaka/17128/
- Markup (JSON-LD) structured in schema.org
https://wordpress.org/plugins/wp-structuring-markup/
- AMP
https://ja.wordpress.org/plugins/amp/
参考URL
32