Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress + JSON-LDで構造化するこれからのマークアップ

1,857 views

Published on

2016.07.10 WordCamp Kansai 2016 登壇スライド

Published in: Technology
  • Be the first to comment

WordPress + JSON-LDで構造化するこれからのマークアップ

  1. 1. ©  WordCamp  Kansai  2016 WordPress  +  JSON-‐‑‒LDで構造化する これからのマークアップ WordCamp  Kansai  2016 ver.1.0.0 【Kazuya  Takami】
  2. 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. 3. ©  WordCamp  Kansai  2016 ⾃自⼰己紹介(WordPressへの貢献) 2  
  4. 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. 5. ©  WordCamp  Kansai  2016 はじまり 4   EC サイトの  KGI・KPI と  WordPress
  6. 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. 7. ©  WordCamp  Kansai  2016 どうしよう? 6   ◆サイトの訪問者数を増やすには l  SEO(Search  Engine  Optimization:検索索エンジン最適化) l  有料料広告 l  Social  media l  ⼝口コミ l  メディア(いわゆる4マス:新聞・雑誌・テレビ・ラジオ)   etc...
  8. 8. ©  WordCamp  Kansai  2016 WordPressを使⽤用してとなると? 7   ◆サイトの訪問者数を増やすには l  SEO(Search  Engine  Optimization:検索索エンジン最適化) l  有料料広告 l  Social  media l  ⼝口コミ l  メディア(いわゆる4マス:新聞・雑誌・テレビ・ラジオ)   etc... コンテンツを作って   流流⼊入を計る  (‘ω’)
  9. 9. ©  WordCamp  Kansai  2016 訪問者はどこから? 8   WordPressで考える流流⼊入経路路
  10. 10. ©  WordCamp  Kansai  2016 コンテンツマーケティングを考える 9   ◆WordPressで制作できるコンテンツいろいろ l  記事(お役⽴立立ち情報系・感情系など) l  動画(バイラル系・著名⼈人活⽤用系・商品紹介など) l  ウェビナー l  デモサイト/導⼊入事例例 l  コミュニティ・フォーラム l  レビュー
  11. 11. ©  WordCamp  Kansai  2016 WordPressで⼤大抵のことはできそう 10   ◆WordPressで制作できるコンテンツいろいろ l  記事(お役⽴立立ち情報系・感情系など) l  動画(バイラル系・著名⼈人活⽤用系・商品紹介など) l  ウェビナー l  デモサイト/導⼊入事例例 l  コミュニティ・フォーラム l  レビュー 投稿・固定ページで できそう  :) bbPressやBuddyPress など  :) コメント機能で   できそう  :)
  12. 12. ©  WordCamp  Kansai  2016 ようやく本題 11   Schema.org 構造化マークアップと JSON-LD
  13. 13. ©  WordCamp  Kansai  2016 ⽬目的は? 12   ◆構造化マークアップをする⽬目的(エンジニアができるアプローチ) l  検索索結果のページ(SERP)の表⽰示をリッチにする(リッチスニペット)     →  検索索順位を上げるものではなく、CTRの向上が⽬目的。 l  検索索エンジンに正しい情報を伝える     →  そのページに何の情報があるのかをまとめて渡す準備をしておく。     →  その定義の⼀一つとして  Schema.org  がある。     →  その定義に従ってデータを作成する。 正しい情報を伝えると?
  14. 14. ©  WordCamp  Kansai  2016 Google公式での定義 13   Google Schemas
  15. 15. ©  WordCamp  Kansai  2016 Google お墨付き 14   Google はJSON-LDを推奨しています。
  16. 16. ©  WordCamp  Kansai  2016 Site  Structure 15   出典:h<ps://developers.google.com/search/docs/guides/
  17. 17. ©  WordCamp  Kansai  2016 Authorized  Presence 16   出典:h<ps://developers.google.com/search/docs/guides/
  18. 18. ©  WordCamp  Kansai  2016 Creative  Works 17   出典:h<ps://developers.google.com/search/docs/guides/
  19. 19. ©  WordCamp  Kansai  2016 Commerce 18   出典:h<ps://developers.google.com/search/docs/guides/
  20. 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. 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. 22. ©  WordCamp  Kansai  2016 Twenty Sixteen 21   Twenty Sixteen の対応状況は?
  23. 23. ©  WordCamp  Kansai  2016 hentry 22 hentry  定義がある   (microformats.org) 要素の属性として 設定してある。
  24. 24. ©  WordCamp  Kansai  2016 マークアップの考え⽅方 23   ◆HTML要素の属性値として設定すべきではない l  HTMLの構造(マークアップ)に左右されてしまう。 l  ソースコードが汚染される(⾒見見づらい) l  マークアップ都度度設定を⾏行行う必要がある。(当然抜け漏漏れが発⽣生する) 結論論:WordPressのテーマに直接設定すべきではない。 JSON-‐‑‒LDのシンタックスで懸念念事項を解決できる テーマから分離離できる  =  プラグイン化できる!
  25. 25. ©  WordCamp  Kansai  2016 Markup  (JSON-‐‑‒LD)  structured  in  schema.org 24   構造化マークアップ  +  WordPress  で プラグイン作ってみた
  26. 26. ©  WordCamp  Kansai  2016 Markup  (JSON-‐‑‒LD)  structured  in  schema.org 25  
  27. 27. ©  WordCamp  Kansai  2016 Markup  (JSON-‐‑‒LD)  structured  in  schema.org(管理理画⾯面:⼀一覧) 26   導⼊入したいSchema.org  を 選択します。(^o^)
  28. 28. ©  WordCamp  Kansai  2016 Markup  (JSON-‐‑‒LD)  structured  in  schema.org(管理理画⾯面:詳細) 27   出⼒力力したいページにチェックを ⼊入れます(カスタム投稿対応)   設定項⽬目を記述します。   これだけ!\(^o^)/  
  29. 29. ©  WordCamp  Kansai  2016 このプラグインの未来 28   ◆Googleの更更新をキャッチアップして常に更更新する l  Googleが実験的に⾏行行うものも多いが、公開情報はキャッチアップして試す l  AMPに対応する(実はAutomattic社謹製のAMPプラグインに対応済み) l  実はメールのマークアップもできる。 ★現在はGmailだけの対応だが他のベンダーのメーラも対応するのでは? 他のプラグインのフックポイントを使ってJSON-‐‑‒LDを出⼒力力する プラグインのコラボレーション!
  30. 30. ©  WordCamp  Kansai  2016 最後に 29   まとめ
  31. 31. ©  WordCamp  Kansai  2016 まとめ 30   WordPress  のコンテンツを最⼤大限活⽤用するために 構造化マークアップを意識識しましょう。
  32. 32. ©  WordCamp  Kansai  2016 ご清聴ありがとうございました。 31   ありがとうございました。
  33. 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  

×