O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

2.169 visualizações

Publicada em

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

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

を紹介しました。

Publicada em: Internet
  • Login to see the comments

時代は 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

×