Download to read offline
Uploaded byTakami Kazuya
WordPress + JSON-LDで構造化するこれからのマークアップ
2016.07.10 WordCamp Kansai 2016 登壇スライド
WordPress + JSON-LDで構造化するこれからのマークアップ
- 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