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.

時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoya 2016

1,718 views

Published on

ウェブサイトや検索で流入することが少なくなってきた昨今、SNS を介して、サイトへの訪問や情報発信を行うようになってきました。
このセミナーでは数々のメディアサイトを運用しているスピーカーが、自身のブログや運営サイトに、数々の SNS 連携機能を実装した体験談をお話します。

・Twitter, Facebook への自動投稿プラグイン
・Instagram 連携
・Google AMP (Acceralated Mobile Page)
・Facebook の Instant Article 対策

を紹介しました。

Published in: Internet
  • Be the first to comment

時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoya 2016

  1. 1. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 WordPress サイトの SNS 連携, AMP & Instant Article 対策体験記 2016/8/27 (土) WordFesNagoya 2016 @ 名古屋工業大学 1 時代は SNS 連携!
  2. 2. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 本日の目次 ● 自己紹介 ● 「詳しくは Web へ」の終わり ● 理想と現実 - SNS連携で楽をしよう ● Google AMP とは? ● Facebook Instant Article とは? ● WordPress サイトでの AMP 対策と Instant Article 対策 2
  3. 3. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 今日のスライドのターゲット ● ブロガー様 ● メディア様 ● メディア系コンテンツを自社サイトで運営してい る Web 担当者様 ● ソーシャルメディアマーケティング担当者 3
  4. 4. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 今日のスライドは ● 詰め込んでいるので枚数多いです ● ペース早めます ● スライドすぐに Slideshare で公開します! 4
  5. 5. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 自己紹介 5
  6. 6. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com コンクリートファイブジャパン株式会社 取締役 Chief Communciations Officer http://concrete5.co.jp 名古屋で concrete5 CMS の普及 TOEIC 990点 でカレーが大好き 6
  7. 7. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 concrete5 (CMS) 日本コミュニティをスタートしました concrete5-japan.org 7
  8. 8. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 共著の紹介 「concrete5 公式活用ガイドブッ ク」 買ってねー ● マイナビ ● 3542円 ● 書籍 & 電子書籍版 8
  9. 9. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Mautic Nagoya Meetup オーガナイザー ● 無料オープンソースのマー ケティングオートメーショ ンの名古屋勉強会。毎月 開催 ● 9/20 (火) に、アメリカから創 始者の David Hurley さんが名 古屋に来る! 9 http://meetup.com/Mautic-Meetup-Nagoya/
  10. 10. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 他の CMS のことは置いといて 10
  11. 11. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 普段は WordBench 名古屋 を中心に活動 ほぼ毎月勉強会に参加 WordCamp 登壇 WordFes 2014から 副実行委員長 ● Ustream ● サイト制作 11 詳細は http://wordbench.org/groups/nagoya/
  12. 12. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 WordPress プラグイン開発してます 公式ディレクトリで公開中 ● Ustream Status ○ Ustream で生放送中かをウィジェットで表示できるsシン プルなプラグイン ● Twitcasting Status ○ ツイキャスで生放送中かをウィジェットで表示できるシンプ ルなプラグイン 12
  13. 13. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 そして・・・ 13
  14. 14. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記14
  15. 15. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記15 WordBench Nagoya で 結婚しました!
  16. 16. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記16 なので・・・ ● concrete5 や mautic は 仕事ですが ● WordPress は家族です! (仕事もしてます)
  17. 17. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 自分とメディア 17
  18. 18. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記18 アメリカへ留学 ロサンゼルスで インディーズ映画製作 バイトでテキサス州の エネルギー・医療関連 出版社に務める ロスの1967年創刊の 小さいエンタメ雑誌 なぜか編集長に
  19. 19. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 外国人向けのインバウンドメディア YokosoNews を立ち上げメディアからも取材を受ける 19
  20. 20. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 既存メディアから 新メディアを 渡り歩いてきました。 20
  21. 21. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 さて・・・ 21
  22. 22. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記22 2016/8/27 (土) WordFesNagoya 2016 @ 名古屋工業大学 時代は SNS 連携! WordPress サイトの SNS 連携, AMP & Instant Article 対策体験記
  23. 23. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 WHY!? SNS 連携が必要? 23
  24. 24. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記24 きっかけは WordCamp Tokyo 2015
  25. 25. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記25 Photo Cortesy of WordCamp Tokyo Flickr
  26. 26. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Content Publishing in 2016 Noel Tockさん (Human Made) セッションを通訳 26
  27. 27. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Content Publishing in 2016 簡単に言うと ● 「詳しくは web へ」 の終焉 ● 各プラットフォームで コンテンツが完結 ○ Instagram なら写真とコ メントだけで完結 ○ ユーザーは他のアプリを 行き来したくない 英語が分かる人は YouTube動画 を 27 Photo Cortesy of WordCamp Tokyo Flickr
  28. 28. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記28 まず、大前提 今、ネットユーザーは スマホデバイスで 情報を収集している
  29. 29. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記29 1. Facebook で気になる記事を見つける 2. 記事のサイトに飛ぶ 3. Facebook アプリだと見づらい 4. Safari アプリ (別アプリ) を起動する 5. Facebook に戻るのが面倒くさい 例えば、こんな経験?
  30. 30. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記30 1. Facebook で気になる記事を見つける 2. 記事のサイトに飛ぶ 3. Facebook アプリだと見づらい 4. Safari アプリ (別アプリ) を起動する 5. Facebook に戻るのが面倒くさい 例えば、こんな経験? 他の人のFB投稿見たいから FB アプリを抜けたくない
  31. 31. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 「詳しくは web へ」 は終わってます 31
  32. 32. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記32 ということは? Webコンテンツ制作者 の視点で 今後どうしたら?
  33. 33. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記33 これからは
  34. 34. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記34 コンテンツを分散 する時代へ これからは
  35. 35. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 コンテンツを分散する理想の形 35 各コンテンツが理想とするコンテンツとは ● 記事 (ブログ、お知らせなど) ● Facebook ● Twitter ● Instagram 各メディアの特性に合った投稿を行うこと
  36. 36. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 コンテンツを分散する理想の形 Facebook の場合 36 参考: The Handy Character Count Guide for Blog Posts, Facebook Pages & More by HubSpot (2016/1/20) 2016/8月時点の情報 文字数 最大 63,206文字 理想文字数 40~100文字 ビデオ 最大120分 (4GB) 参考:Facebookヘルプ 理想のビデオ 30~40秒 内容 数十秒〜数分以内で読める、見れる 気軽な内容。コメント、いいね、シェア を促すものが良い
  37. 37. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 コンテンツを分散する理想の形 Twitter の場合 37 参考: The Handy Character Count Guide for Blog Posts, Facebook Pages & More by HubSpot (2016/1/20) 2016/8月時点の情報 文字数 最大 140文字。 ● リンク (RT や URL) 挿入時は114文字まで ● メディア (画像・ビデオ)挿入時は115文字まで ● リンク+メディア挿入時は93文字まで ビデオ 最大140秒 ● 32x32 ~ 1920x1200 (縦長可) ● 縦横比: 1:2.39~2.39:1の範囲(両方の値を含む) ● 最大フレームレート: 40fps ● 最大ビットレート: 25Mbps 参考:Twitter ヘルプ 内容 数十秒〜数分で楽しめるコンテンツ FB よりも短い。
  38. 38. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 コンテンツを分散する理想の形 Instagram の場合 38 参考: The Handy Character Count Guide for Blog Posts, Facebook Pages & More by HubSpot (2016/1/20) 2016/8月時点の情報 文字数 最大 2200文字。 ● 3行目以降は「もっと読む」としてカットされる。 ビデオ 3~60秒 参考:Instagram ヘルプ 内容 ビジュアル第一。画像やビデオが気になった 人にキャプションを読んでもらう。
  39. 39. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 コンテンツを分散する理想の形 記事 (おしらせ・ブログなど)の場合 39 見出し 70文字以内が理想 記事の長さ 1記事 7分ぐらいまでが理想 最大 2800〜4200文字 (参照: 日本人の平均 400〜600文字。Katz は636文字でした) メタ説明 155文字か、それ以下 内容 テキスト、画像を盛り込んだ読み物。 時間をかけて読むコンテンツ。 参考: The Handy Character Count Guide for Blog Posts, Facebook Pages & More by HubSpot (2016/1/20) 2016/8月時点の情報
  40. 40. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記40 理想は 各メディアに向けて 最適化されたコンテンツを 作成&投稿すること
  41. 41. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記41 理想は 各メディアに向けて 最適化されたコンテンツを 作成&投稿すること 普通は 無理時間がないです
  42. 42. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記42 だけど
  43. 43. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記43 出来る限り やりましょう
  44. 44. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記44 ということで
  45. 45. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記45 ちょっと楽をする = ① SNS 連携
  46. 46. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記46 と
  47. 47. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記47 シームレスな情報提供UX = ②AMP & Instant Article
  48. 48. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記48 を
  49. 49. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記49 自分のWP サイト に
  50. 50. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記50 試してみた 体験記を 紹介します
  51. 51. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記51 サイトの例
  52. 52. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 サイト1: katzueno.com 52
  53. 53. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 サイト2: entertainmenttoday.net 53
  54. 54. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記54 ① SNS 連携
  55. 55. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ① SNS 連携 ● できるだけプラグインでやっちゃおう ● SNS 連携とは ○ 1-1. WordPress サイト記事シェアボタン等 ○ 1-2. コンテンツを SNS 投稿するプラグイン 55
  56. 56. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ① SNS 連携 ● できるだけプラグインでやっちゃおう ● SNS 連携とは ○ 1-1. WordPress サイト記事シェアボタン等 ○ 1-2. コンテンツを SNS 投稿するプラグイン 56 今後はこっちが重要。
  57. 57. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNSシェアボタンプラグイン比較 自分のサイトをシェア 57
  58. 58. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNSシェアボタンプラグイン ● 個人的に使用経験のあるアドオン ○ Share Buttons by AddThis ○ Simple Share ○ JetPack ○ WP Social Bookmarking Light 58
  59. 59. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNSシェアボタンプラグイン ● 個人的に使用経験のあるアドオン ○ Share Buttons by AddThis 海外サービス。英語サイトでよく使う ○ Simple Share 串本の宮内さん作。凄くシンプル。ブログで使用中 ○ JetPack JetPackのシェアボタン機能で十分なとき ○ WP Social Bookmarking Light 日本のSNSシェアボタンも結構網羅している古くからの 定番(?)アドオン 59
  60. 60. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記60 Simple Share (シンプル実装が良い) か JetPack (JetPack を使うなら) 迷ったら
  61. 61. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. コンテンツをSNS投稿 Facebook や Twitter にコンテンツを投 稿しよう 61
  62. 62. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● WordPress サイトで記事を投稿したら、 自動的にSNSに投稿 ○ 主に WP サイトから Twitter や Facebook へ投稿 ○ Instagram は WordPress から投稿できない Instagram のポリシーで外部アプリからの投稿ができない。 Instagram から WordPress サイトへの投稿はできる 62
  63. 63. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● WordPress サイトで記事を投稿したら、 自動的にSNSに投稿 ○ 主に WP サイトから Twitter や Facebook へ投稿 ○ Instagram は WordPress から投稿できない Instagram のポリシーで外部アプリからの投稿ができない。 Instagram から WordPress サイトへの投稿はできる 63
  64. 64. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 気をつけないといけないこと ○ OGPの設定や、Twitter Card をきちんと設定 ● OGP (Open Graph Protocol) ○ Facebook が取り決めた、Webページがどのような情報 を提供しているかを表すための head 情報 ○ Facebook はこの情報を元に、シェアされたリンクをタダ のリンクではなく、画像やタイトル・説明テキストを引用し て表示します。 64
  65. 65. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 気をつけないといけないこと ○ OGPの設定や、Twitter Card をきちんと設定 ● OGP (Open Graph Protocol) ○ Facebook が取り決めた、Webページがどのような情報 を提供しているかを表すための head 情報 ○ Facebook はこの情報を元に、シェアされたリンクをタダ のリンクではなく、画像やタイトル・説明テキストを引用し て表示します。 65
  66. 66. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 気をつけないといけないこと ○ OGPの設定や、Twitter Card をきちんと設定 ● OGP (Open Graph Protocol) ○ Facebook が取り決めた、Webページがどのような情報 を提供しているかを表すための head 情報 ○ Facebook はこの情報を元に、シェアされたリンクをタダ のリンクではなく、画像やタイトル・説明テキストを引用し て表示します。 66
  67. 67. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 気をつけないといけないこと ○ OGPの設定や、Twitter Card をきちんと設定 ● Twitter Card ○ Twitter オリジナルのOGPのようなもの ○ "summary_large_image" 対応してます? ○ 写真が4個埋め込める、Gallery 等 ■ 訂正: Gallery は提供停止になりました (謝辞: Kazumich さん) 67
  68. 68. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン 68
  69. 69. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 69
  70. 70. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 70
  71. 71. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 71
  72. 72. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 72
  73. 73. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 73
  74. 74. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 74
  75. 75. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 75 アイキャッチ画像を用意できるなら、 「大きな画像付きの Summary」を選ぼう
  76. 76. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 76 アイキャッチ画像を用意できるなら、 「大きな画像付きの Summary」を選ぼう
  77. 77. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン ○ Yoast SEO 他にも SEO の設定などが可能だが、OGP や Twitter Card を <head> 内に簡単に挿入 してくれる。 77 アイキャッチ画像を用意できるなら、 「大きな画像付きの Summary」を選ぼう
  78. 78. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● ちゃんとシェアできるかテスト ○ Facebook Open Graph Object Debugger ■ https://developers.facebook.com/tools/debug/og/object/ ■ ちゃんと画像、テキストが表示されるか確認できる ■ キャッシュがあったら手動クリア&更新できる ■ 未公開ページを Facebook メッセージでやり取りした時とか。Not Found なページとして共有されたことありませんか? ○ Twitter: Card validator ■ https://cards-dev.twitter.com/validator ■ Twitter Card がきちんと表示されるかのチェックツール 78
  79. 79. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記79 らくらく自動投稿 準備ができたら
  80. 80. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPackの「パブリサイズ」機能 JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 80
  81. 81. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPack JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 81
  82. 82. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPackの「パブリサイズ」機能 JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 82
  83. 83. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPack JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 83
  84. 84. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPackの「パブリサイズ」機能 JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 84
  85. 85. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNS投稿プラグイン ● 実際のサイトで使用経験のあるアドオン ○ WP to Twitter 記事公開時に Twitter を自動投稿。結構カスタマイズで きるのでおすすめ。 ○ JetPack JetPackにも投稿が。これで結構十分。 ※ Yoast SEO との head タグの競合に注意 ○ Facebook メンテされてないっぽいけど、公式アプリで、まだ動いて ます (苦笑) 85
  86. 86. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記86 Jetpack がおすすめ。 任意コメントを 入れることができる。
  87. 87. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記87 Jetpack がおすすめ。 任意コメントを 入れることができる。
  88. 88. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記88 Jetpack がおすすめ。 任意コメントを 入れることができる。
  89. 89. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記89 Jetpack がおすすめ。 任意コメントを 入れることができる。
  90. 90. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instagram の場合 残念ながらアプリからのみ 投稿可能 90
  91. 91. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記91 ただし、 Instagram -> WordPress な投稿・表示は可能 いろいろなプラグインがあるので 試してみると良いかも。 ※ 各画像、クリックして飛べます
  92. 92. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ① SNS 連携 まとめ ● シェアボタンは実装しよう ● OGP や Twitter カードをしっかり ● 理想は SNS 別に個々の投稿をすること ● 完全自動投稿はダメだけど、JetPack のパブリ サイズ機能はカスタムメッセージつけて Twitter & Facebook 投稿が可能。 92
  93. 93. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記93 では、いよいよ
  94. 94. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記94 シームレスな情報提供UX = ② AMP & Instant Article
  95. 95. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記95 demo実際に Instant Article がどんなに早いか
  96. 96. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 AMP (Accelerated Mobile Page) ● Google のキャッシュを 使って、モバイル向けに 高速にコンテンツを配信 ● Automattic も AMP プロジェクトに参画 公式(?)プラグインもリリース ● 専用のHTMLが必要 ● 既にプラグインも幾つかリリース 96
  97. 97. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 AMP (Accelerated Mobile Page) ● 本当は、コーディング レベルで面倒くさい ● ただ、高速にサイトをブラウ ズできるのでその点を我 慢。 97
  98. 98. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 AMPの導入方法:用意するもの ● プラグイン ○ AMP (Automattic) ○ Facebook Instant Articles & Google AMP Pages by PageFrog ● Google Search Console にサイトを登録(まだしていなければ) ○ Google Search Console 内の チェッカー ● Chrome のエクステンション「AMP Validator」でチェックを行う。 98
  99. 99. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記99 プラグイン 有効化する前に・・・
  100. 100. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 その前に: パーマリンクの設定を忘れずに 100 基本的に、「基本」以外になるように
  101. 101. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記101 気を取り直して・・・
  102. 102. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 AMPの導入方法 ● プラグインをダウンロードし、有効化す るだけ 102 ● あとは、URL のあとに /amp/ をつけ ると Google AMP 対応ページが閲覧 可能
  103. 103. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記103 しかーし、問題が・・・
  104. 104. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 よくある AMP エラー publisher と author の情報が足らない等 104 解決策テーマの function.php にフックを追記してエラー分を解 決
  105. 105. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記105 ちょっと面倒だったので、 おいしいプラグインを 見つけました
  106. 106. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● AMP & Instant Article 両方できる ○ 前述の Google AMP プラグインも必要になります 106
  107. 107. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google AMP を有効化 107 「Ready」になり、Google AMP が出力開始
  108. 108. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google AMP を有効化 108 「Ready」になり、Google AMP が出力開始 Google Analytics コードの埋め込みなども簡単 だけど、Instant Article の出力がうまくいかなかった orz
  109. 109. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記109 Google Search Console で確認 (AMP を有効化してから)
  110. 110. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 110
  111. 111. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 111 エラーのチェック
  112. 112. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 112 エラーのチェック
  113. 113. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 113 エラーのチェック
  114. 114. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 114 エラーのチェック
  115. 115. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 115 エラーのチェック エラー確認し解消します。
  116. 116. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google AMP 小ネタ TIPS ● Facebook Instant Articles & Google AMP Pages by PageFrog プラグイン を使って ○ Google Analytics 埋込するとき、本サイトのものとは、 別プロフィールを用意しよう。トラッキングしやすくなりま す。 ○ Google AdSense は 300x250 の広告が使える。 ○ Settings (設定) ページにある「Force AMP….」 116 をオンにすると AMP エラー軽減を一気に図れるかも!?
  117. 117. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google AMP 小ネタ TIPS ● AMP エラー対策 ○ アイキャッチ (Feature) 画像をバッチ処理で登録するの に便利なプラグイン「Quick Featured Image」 117
  118. 118. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記118 以上 Google AMP
  119. 119. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記119 次は Instant Articles
  120. 120. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Facebook Instant Article ● Google AMP は専用の HTML に対して、Instant Article は専用の XML ● Facebook ページにページを登録する方式 ● なので、要 Facebook ページ ● Facebook ページ作成後 https://www.facebook.com/instant_articles/signup ページより、希望するページの Instant Articles を有効化 120
  121. 121. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Facebook Instant Article ● Google AMP は専用の HTML に対して、Instant Article は専用の XML ● Facebook ページにページを登録する方式 ● なので、要 Facebook ページ ● Facebook ページ作成後 https://www.facebook.com/instant_articles/signup ページより、希望するページの Instant Articles を有効化 121
  122. 122. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Facebook Instant Article ● Instant Article for WP をインストール 122
  123. 123. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● FB の App ID とシークレットキーを入力 123
  124. 124. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● そしてユーザー認証を行う 124
  125. 125. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● どの Facebook Page への投稿かを選択 125
  126. 126. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● Instant Article の XML 出力先 [サイトURL]/feed/instant-article/ 126
  127. 127. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● Facebook ページを訪問し「投稿ツールへ」 127
  128. 128. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● 左のメニューから「構成」をクリック 128
  129. 129. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● Connect Your Site で URL を入力 (プラグインが meta タグの挿入をしています) Instant Article の登録 129 ※ なぜか今週は Google Chrome ブラウザで URL 入力できず、Firefox で登録
  130. 130. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● Facebook Page Manager アプリで Instant Article を確認 Facebook Page Manager で確認 130
  131. 131. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● さきほど書き留めた RSS フィードの URL を登録 プロダクションRSSフィードを登録 131
  132. 132. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● さきほど書き留めた RSS フィードの URL を登録 プロダクションRSSフィードを登録 132 記事がすぐに追加されなければ、この更新マークを押 してみよう。 ブログ記事では、WordPress の記事自体を一回更新 しないと読み込んでくれなかったとも報告有り それでもダメならなにか問題有り
  133. 133. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 スタイルでロゴを登録 133
  134. 134. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 (右上の保存を忘れずに!) スタイルでロゴを登録 134
  135. 135. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 (右上の保存を忘れずに!) スタイルでロゴを登録 135
  136. 136. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 (右上の保存を忘れずに!) 審査を申請! 136
  137. 137. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● 審査完了後「プロダクション関連の記事」の記事 一覧から、順次記事を公開! 審査完了後、記事を公開 137
  138. 138. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記138 え、Facebook ページから記 事を公開!?
  139. 139. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記139 そうです! 記事は Facebook ページ から公開します
  140. 140. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記140 なので、さきほどの JetPack の SNS 投稿と ちょっと矛盾!!
  141. 141. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記141 Instant Article を使うとき 記事は Facebook ページの 投稿ツールから 公開しましょう 将来、なんか良い方法が出てくると良いな
  142. 142. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記142 以上、 AMP & Instant Article 体験記!
  143. 143. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記143 ・・・
  144. 144. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記144 ちょっと しんどかった orz
  145. 145. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記145 でも、 読み込み速度が向上し UX 改善できるなら やる価値あり!
  146. 146. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ありがとうございました! Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com SNS + 動画 + 多言語はお任せ! 146

×