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.
Upcoming SlideShare
Wapuu 5th - WordCamp Kansai 2016
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

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

Download to read offline

2016.07.10 WordCamp Kansai 2016 登壇スライド

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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  
  • flashingwind

    Mar. 28, 2017
  • HiroyukiKuroda

    Jul. 10, 2016

2016.07.10 WordCamp Kansai 2016 登壇スライド

Views

Total views

2,910

On Slideshare

0

From embeds

0

Number of embeds

426

Actions

Downloads

5

Shares

0

Comments

0

Likes

2

×