2016.08.27 WordFes Nagoya 2016 登壇資料

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

2. ©
WordFes
Nagoya
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. ©
WordFes
Nagoya
2016
⾃自⼰己紹介（WordPressへの貢献）
2

4. ©
WordFes
Nagoya
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. ©
WordFes
Nagoya
2016
はじまり
4
EC サイトの KGI・KPI と WordPress

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

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

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

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

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

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

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

14. ©
WordFes
Nagoya
2016
Google公式での定義
13
Google Schemas

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

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

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

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

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

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

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

22. ©
WordFes
Nagoya
2016
Twenty Sixteen
21
Twenty Sixteen の対応状況は？

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

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

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

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

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

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

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

30. ©
WordFes
Nagoya
2016
メールの構造化マークアップ
29
<html>
<head>
<script
type="applicaWon/ld+json">
{
"@context":
"h<p://schema.org",
"@type":
"EmailMessage",
"descripWon":
"Check
this
out",
"potenWalAcWon":
{
"@type":
"ViewAcWon",
"target":
"h<ps://html5experts.jp/"
}
}
</script>
</head>
<body>
<p>
This
a
test
for
a
Go-­‐To
acWon
in
Gmail.
</p>
</body>
</html>
◆HTMLメールのhead要素内にJSON-LDでschema.orgの定義を記述します。

31. ©
WordFes
Nagoya
2016
メールの構造化マークアップ
30
funcWon
testSchemas()
{
var
htmlBody
=
HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to:
Session.getAcWveUser().getEmail(),
subject:
'テスト',
htmlBody:
htmlBody,
});
}
◆Googleスプレッドシートでメールを送る実験
Gmailのメール⼀一覧に「表⽰示」ボタンが出現！

32. ©
WordFes
Nagoya
2016
課題など
31
◆メールの構造化マークアップの課題
l Gmailにしか対応していない（⾼高⾒見見が把握している限り）
l ドメインのホワイトリスト登録が必要
https://developers.google.com/gmail/markup/registering-‐‑‒with-‐‑‒google
実際に国内のサイトでも実装しているものもあります。
競合他社との差別化をはかるのに導⼊入もですが、早めに技術検証してみてはどうで
しょう？

33. ©
WordFes
Nagoya
2016
最後に
32
まとめ

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

35. ©
WordFes
Nagoya
2016
ご清聴ありがとうございました。
34
ありがとうございました。

36. ©
WordFes
Nagoya
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/
- Google Email Markup
https://developers.google.com/gmail/markup/overview
参考URL
35