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

時代は 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 WordPress サイトの SNS 連携AMP & Instant Article 対策体験記 2016/8/27 (土) WordFesNagoya 2016 @ 名古屋工業大学 時代は SNS 連携！
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 等 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 対策体験記 AMP (Accelerated Mobile Page) ● Google のキャッシュを 使って、モバイル向けに 高速にコンテンツを配信 ● Automattic も AMP プロジェクトに参画 公式(?)プラグインもリリース ● 専用のHTMLが必要 ● 既にプラグインも幾つかリリース 95
96. 96. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記96 demo実際に Instant Article がどんなに早いか
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 にサイトを登録（まだしていなければ） ● 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 両方できる 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 対策体験記116 以上 Google AMP
117. 117. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記117 次は Instant Articles
118. 118. 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 を有効化 118
119. 119. 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 を有効化 119
120. 120. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Facebook Instant Article ● Instant Article for WP をインストール 120
121. 121. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● FB の App ID とシークレットキーを入力 121
122. 122. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● そしてユーザー認証を行う 122
123. 123. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● どの Facebook Page への投稿かを選択 123
124. 124. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● Instant Article の XML 出力先 [サイトURL]/feed/instant-article/ 124
125. 125. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● Facebook ページを訪問し「投稿ツールへ」 125
126. 126. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● 左のメニューから「構成」をクリック 126
127. 127. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● Connect Your Site で URL を入力 (プラグインが meta タグの挿入をしています) Instant Article の登録 127 ※ なぜか今週は Google Chrome ブラウザで URL 入力できず、Firefox で登録
128. 128. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● Facebook Page Manager アプリで Instant Article を確認 Facebook Page Manager で確認 128
129. 129. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● さきほど書き留めた RSS フィードの URL を登録 プロダクションRSSフィードを登録 129
130. 130. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● さきほど書き留めた RSS フィードの URL を登録 プロダクションRSSフィードを登録 130 記事がすぐに追加されなければ、この更新マークを押 してみよう。 ブログ記事では、WordPress の記事自体を一回更新 しないと読み込んでくれなかったとも報告有り それでもダメならなにか問題有り
131. 131. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 スタイルでロゴを登録 131
132. 132. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ● スタイルの「default」をクリックしサイトの アイデンティティーを登録 (右上の保存を忘れずに！) スタイルでロゴを登録 132
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 対策体験記 ● 審査完了後「プロダクション関連の記事」の記事 一覧から、順次記事を公開！ 審査完了後、記事を公開 135
136. 136. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記136 以上、 AMP & Instant Article 体験記！
137. 137. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記137 ・・・
138. 138. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記138 ちょっと しんどかった orz
139. 139. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記139 でも、 読み込み速度が向上し UX 改善できるなら やる価値あり！
140. 140. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ありがとうございました！ Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com SNS + 動画 + 多言語はお任せ！ 140