時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoya 2016
- 1. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
WordPress サイトの
SNS 連携, AMP & Instant Article
対策体験記
2016/8/27 (土) WordFesNagoya 2016
@ 名古屋工業大学
1
時代は
SNS 連携!
- 2. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
本日の目次
● 自己紹介
● 「詳しくは Web へ」の終わり
● 理想と現実 - SNS連携で楽をしよう
● Google AMP とは?
● Facebook Instant Article とは?
● WordPress サイトでの AMP 対策と Instant
Article 対策
2
- 3. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
今日のスライドのターゲット
● ブロガー様
● メディア様
● メディア系コンテンツを自社サイトで運営してい
る Web 担当者様
● ソーシャルメディアマーケティング担当者
3
- 4. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
今日のスライドは
● 詰め込んでいるので枚数多いです
● ペース早めます
● スライドすぐに Slideshare で公開します!
4
- 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. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
concrete5 (CMS)
日本コミュニティをスタートしました
concrete5-japan.org
7
- 8. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
共著の紹介
「concrete5 公式活用ガイドブッ
ク」
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版
8
- 9. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Mautic Nagoya Meetup オーガナイザー
● 無料オープンソースのマー
ケティングオートメーショ
ンの名古屋勉強会。毎月
開催
● 9/20 (火) に、アメリカから創
始者の David Hurley さんが名
古屋に来る!
9
http://meetup.com/Mautic-Meetup-Nagoya/
- 11. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
普段は WordBench 名古屋 を中心に活動
ほぼ毎月勉強会に参加
WordCamp 登壇
WordFes 2014から
副実行委員長
● Ustream
● サイト制作
11
詳細は
http://wordbench.org/groups/nagoya/
- 12. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
WordPress プラグイン開発してます
公式ディレクトリで公開中
● Ustream Status
○ Ustream で生放送中かをウィジェットで表示できるsシン
プルなプラグイン
● Twitcasting Status
○ ツイキャスで生放送中かをウィジェットで表示できるシンプ
ルなプラグイン
12
- 16. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記16
なので・・・
● concrete5 や mautic は
仕事ですが
● WordPress は家族です!
(仕事もしてます)
- 18. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記18
アメリカへ留学
ロサンゼルスで
インディーズ映画製作
バイトでテキサス州の
エネルギー・医療関連
出版社に務める
ロスの1967年創刊の
小さいエンタメ雑誌
なぜか編集長に
- 19. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
外国人向けのインバウンドメディア
YokosoNews を立ち上げメディアからも取材を受ける
19
- 22. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記22
2016/8/27 (土) WordFesNagoya 2016
@ 名古屋工業大学
時代は
SNS 連携!
WordPress サイトの
SNS 連携, AMP & Instant Article
対策体験記
- 26. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Content Publishing in 2016
Noel Tockさん (Human Made)
セッションを通訳
26
- 27. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Content Publishing in 2016
簡単に言うと
● 「詳しくは web へ」
の終焉
● 各プラットフォームで
コンテンツが完結
○ Instagram なら写真とコ
メントだけで完結
○ ユーザーは他のアプリを
行き来したくない
英語が分かる人は YouTube動画 を
27
Photo Cortesy of WordCamp Tokyo Flickr
- 29. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記29
1. Facebook で気になる記事を見つける
2. 記事のサイトに飛ぶ
3. Facebook アプリだと見づらい
4. Safari アプリ (別アプリ) を起動する
5. Facebook に戻るのが面倒くさい
例えば、こんな経験?
- 30. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記30
1. Facebook で気になる記事を見つける
2. 記事のサイトに飛ぶ
3. Facebook アプリだと見づらい
4. Safari アプリ (別アプリ) を起動する
5. Facebook に戻るのが面倒くさい
例えば、こんな経験?
他の人のFB投稿見たいから
FB アプリを抜けたくない
- 35. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
コンテンツを分散する理想の形
35
各コンテンツが理想とするコンテンツとは
● 記事 (ブログ、お知らせなど)
● Facebook
● Twitter
● Instagram
各メディアの特性に合った投稿を行うこと
- 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. 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. 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. 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月時点の情報
- 41. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記41
理想は
各メディアに向けて
最適化されたコンテンツを
作成&投稿すること
普通は
無理時間がないです
- 55. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
① SNS 連携
● できるだけプラグインでやっちゃおう
● SNS 連携とは
○ 1-1. WordPress サイト記事シェアボタン等
○ 1-2. コンテンツを SNS 投稿するプラグイン
55
- 56. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
① SNS 連携
● できるだけプラグインでやっちゃおう
● SNS 連携とは
○ 1-1. WordPress サイト記事シェアボタン等
○ 1-2. コンテンツを SNS 投稿するプラグイン
56
今後はこっちが重要。
- 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. 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. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記60
Simple Share
(シンプル実装が良い)
か
JetPack
(JetPack を使うなら)
迷ったら
- 61. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. コンテンツをSNS投稿
Facebook や Twitter にコンテンツを投
稿しよう
61
- 62. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● WordPress サイトで記事を投稿したら、
自動的にSNSに投稿
○ 主に WP サイトから Twitter や Facebook へ投稿
○ Instagram は WordPress から投稿できない
Instagram のポリシーで外部アプリからの投稿ができない。
Instagram から WordPress サイトへの投稿はできる
62
- 63. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● WordPress サイトで記事を投稿したら、
自動的にSNSに投稿
○ 主に WP サイトから Twitter や Facebook へ投稿
○ Instagram は WordPress から投稿できない
Instagram のポリシーで外部アプリからの投稿ができない。
Instagram から WordPress サイトへの投稿はできる
63
- 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. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 気をつけないといけないこと
○ OGPの設定や、Twitter Card をきちんと設定
● OGP (Open Graph Protocol)
○ Facebook が取り決めた、Webページがどのような情報
を提供しているかを表すための head 情報
○ Facebook はこの情報を元に、シェアされたリンクをタダ
のリンクではなく、画像やタイトル・説明テキストを引用し
て表示します。
65
- 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. 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
- 69. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
69
- 70. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
70
- 71. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
71
- 72. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
72
- 73. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
73
- 74. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
74
- 75. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
75
アイキャッチ画像を用意できるなら、
「大きな画像付きの Summary」を選ぼう
- 76. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
76
アイキャッチ画像を用意できるなら、
「大きな画像付きの Summary」を選ぼう
- 77. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-2. SNS投稿プラグイン
● 簡単に設定できるアドオン
○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
77
アイキャッチ画像を用意できるなら、
「大きな画像付きの Summary」を選ぼう
- 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
- 80. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPackの「パブリサイズ」機能
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
80
- 81. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPack
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
81
- 82. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPackの「パブリサイズ」機能
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
82
- 83. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPack
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
83
- 84. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPackの「パブリサイズ」機能
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
84
- 85. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
1-1. SNS投稿プラグイン
● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPack
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
85
- 91. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記91
ただし、
Instagram -> WordPress
な投稿・表示は可能
いろいろなプラグインがあるので
試してみると良いかも。
※ 各画像、クリックして飛べます
- 92. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
① SNS 連携 まとめ
● シェアボタンは実装しよう
● OGP や Twitter カードをしっかり
● 理想は SNS 別に個々の投稿をすること
● 完全自動投稿はダメだけど、JetPack のパブリ
サイズ機能はカスタムメッセージつけて Twitter
& Facebook 投稿が可能。
92
- 96. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
AMP (Accelerated Mobile Page)
● Google のキャッシュを
使って、モバイル向けに
高速にコンテンツを配信
● Automattic も AMP プロジェクトに参画
公式(?)プラグインもリリース
● 専用のHTMLが必要
● 既にプラグインも幾つかリリース
96
- 97. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
AMP (Accelerated Mobile Page)
● 本当は、コーディング
レベルで面倒くさい
● ただ、高速にサイトをブラウ
ズできるのでその点を我
慢。
97
- 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
- 102. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
AMPの導入方法
● プラグインをダウンロードし、有効化す
るだけ
102
● あとは、URL のあとに /amp/ をつけ
ると Google AMP 対応ページが閲覧
可能
- 104. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
よくある AMP エラー
publisher と author の情報が足らない等
104
解決策テーマの function.php にフックを追記してエラー分を解
決
- 106. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● AMP & Instant Article 両方できる
○ 前述の Google AMP プラグインも必要になります
106
- 107. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Google AMP を有効化
107
「Ready」になり、Google AMP が出力開始
- 108. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Google AMP を有効化
108
「Ready」になり、Google AMP が出力開始
Google Analytics コードの埋め込みなども簡単
だけど、Instant Article の出力がうまくいかなかった orz
- 115. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Google Search Console
115
エラーのチェック
エラー確認し解消します。
- 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. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Google AMP 小ネタ TIPS
● AMP エラー対策
○ アイキャッチ (Feature) 画像をバッチ処理で登録するの
に便利なプラグイン「Quick Featured Image」
117
- 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. 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. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Facebook Instant Article
● Instant Article for WP をインストール
122
- 123. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Instant Article 設定方法
● FB の App ID とシークレットキーを入力
123
- 125. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Instant Article 設定方法
● どの Facebook Page への投稿かを選択
125
- 126. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Instant Article の登録
● Instant Article の XML 出力先
[サイトURL]/feed/instant-article/
126
- 127. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
Instant Article の登録
● Facebook ページを訪問し「投稿ツールへ」
127
- 129. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● Connect Your Site で URL を入力
(プラグインが meta タグの挿入をしています)
Instant Article の登録
129
※ なぜか今週は Google Chrome ブラウザで URL 入力できず、Firefox で登録
- 130. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● Facebook Page Manager アプリで Instant
Article を確認
Facebook Page Manager で確認
130
- 131. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● さきほど書き留めた RSS フィードの URL を登録
プロダクションRSSフィードを登録
131
- 132. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● さきほど書き留めた RSS フィードの URL を登録
プロダクションRSSフィードを登録
132
記事がすぐに追加されなければ、この更新マークを押
してみよう。
ブログ記事では、WordPress の記事自体を一回更新
しないと読み込んでくれなかったとも報告有り
それでもダメならなにか問題有り
- 133. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● スタイルの「default」をクリックしサイトの
アイデンティティーを登録
スタイルでロゴを登録
133
- 134. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● スタイルの「default」をクリックしサイトの
アイデンティティーを登録 (右上の保存を忘れずに!)
スタイルでロゴを登録
134
- 135. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● スタイルの「default」をクリックしサイトの
アイデンティティーを登録 (右上の保存を忘れずに!)
スタイルでロゴを登録
135
- 136. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● スタイルの「default」をクリックしサイトの
アイデンティティーを登録 (右上の保存を忘れずに!)
審査を申請!
136
- 137. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
● 審査完了後「プロダクション関連の記事」の記事
一覧から、順次記事を公開!
審査完了後、記事を公開
137
- 141. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記141
Instant Article を使うとき
記事は Facebook ページの
投稿ツールから
公開しましょう
将来、なんか良い方法が出てくると良いな
- 146. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
ありがとうございました!
Katz Ueno (上野 勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
SNS + 動画 + 多言語はお任せ!
146