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

2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記
WordPress サイトの
SNS 連携, AMP & Instant Article
対策体験記
2016/8/27 (土) WordFesNagoya 2016
@ 名古屋工業大学
1
時代は
SNS 連携！

本日の目次
● 自己紹介
● 「詳しくは Web へ」の終わり
● 理想と現実 - SNS連携で楽をしよう
● Google AMP とは?
● Facebook Instant Article とは？
● WordPress サイトでの AMP 対策と Instant
Article 対策
2

今日のスライドのターゲット
● ブロガー様
● メディア様
● メディア系コンテンツを自社サイトで運営してい
る Web 担当者様
● ソーシャルメディアマーケティング担当者
3

今日のスライドは
● 詰め込んでいるので枚数多いです
● ペース早めます
● スライドすぐに Slideshare で公開します！
4

自己紹介
5

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
取締役 Chief Communciations Officer
http://concrete5.co.jp
名古屋で concrete5 CMS の普及
TOEIC 990点でカレーが大好き
6

concrete5 (CMS)
日本コミュニティをスタートしました
concrete5-japan.org
7

共著の紹介
「concrete5 公式活用ガイドブッ
ク」
買ってねー
● マイナビ
● 3542円
● 書籍 & 電子書籍版
8

Mautic Nagoya Meetup オーガナイザー
● 無料オープンソースのマー
ケティングオートメーショ
ンの名古屋勉強会。毎月
開催
● 9/20 (火) に、アメリカから創
始者の David Hurley さんが名
古屋に来る！
9
http://meetup.com/Mautic-Meetup-Nagoya/

他の CMS のことは置いといて
10

普段は WordBench 名古屋を中心に活動
ほぼ毎月勉強会に参加
WordCamp 登壇
WordFes 2014から
副実行委員長
● Ustream
● サイト制作
11
詳細は
http://wordbench.org/groups/nagoya/

WordPress プラグイン開発してます
公式ディレクトリで公開中
● Ustream Status
○ Ustream で生放送中かをウィジェットで表示できるsシン
プルなプラグイン
● Twitcasting Status
○ ツイキャスで生放送中かをウィジェットで表示できるシンプ
ルなプラグイン
12

そして・・・
13

2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記14

WordBench Nagoya で
結婚しました！

なので・・・
● concrete5 や mautic は
仕事ですが
● WordPress は家族です！
(仕事もしてます)

自分とメディア
17

アメリカへ留学
ロサンゼルスで
インディーズ映画製作
バイトでテキサス州の
エネルギー・医療関連
出版社に務める
ロスの1967年創刊の
小さいエンタメ雑誌
なぜか編集長に

外国人向けのインバウンドメディア
YokosoNews を立ち上げメディアからも取材を受ける
19

既存メディアから
新メディアを
渡り歩いてきました。
20

さて・・・
21

2016/8/27 (土) WordFesNagoya 2016
@ 名古屋工業大学
時代は
SNS 連携！
WordPress サイトの
SNS 連携, AMP & Instant Article
対策体験記

WHY!?
SNS 連携が必要？
23

きっかけは
WordCamp Tokyo
2015

Photo Cortesy of WordCamp Tokyo Flickr

Content Publishing in 2016
Noel Tockさん (Human Made)
セッションを通訳
26

Content Publishing in 2016
簡単に言うと
● 「詳しくは web へ」
の終焉
● 各プラットフォームで
コンテンツが完結
○ Instagram なら写真とコ
メントだけで完結
○ ユーザーは他のアプリを
行き来したくない
英語が分かる人は YouTube動画を
27
Photo Cortesy of WordCamp Tokyo Flickr

まず、大前提
今、ネットユーザーは
スマホデバイスで
情報を収集している

1. Facebook で気になる記事を見つける
2. 記事のサイトに飛ぶ
3. Facebook アプリだと見づらい
4. Safari アプリ (別アプリ) を起動する
5. Facebook に戻るのが面倒くさい
例えば、こんな経験？

1. Facebook で気になる記事を見つける
2. 記事のサイトに飛ぶ
3. Facebook アプリだと見づらい
4. Safari アプリ (別アプリ) を起動する
5. Facebook に戻るのが面倒くさい
例えば、こんな経験？
他の人のFB投稿見たいから
FB アプリを抜けたくない

「詳しくは web へ」
は終わってます
31

ということは？
Webコンテンツ制作者
の視点で
今後どうしたら？

これからは

コンテンツを分散
する時代へ
これからは

コンテンツを分散する理想の形
35
各コンテンツが理想とするコンテンツとは
● 記事 (ブログ、お知らせなど)
● Facebook
● Twitter
● Instagram
各メディアの特性に合った投稿を行うこと

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秒
内容数十秒〜数分以内で読める、見れる
気軽な内容。コメント、いいね、シェア
を促すものが良い

Twitter の場合
37
文字数最大 140文字。
● リンク (RT や URL) 挿入時は114文字まで
● メディア (画像・ビデオ)挿入時は115文字まで
● リンク+メディア挿入時は93文字まで
ビデオ最大140秒
● 32x32 ~ 1920x1200 (縦長可)
● 縦横比: 1:2.39～2.39:1の範囲（両方の値を含む）
● 最大フレームレート: 40fps
● 最大ビットレート: 25Mbps
参考：Twitter ヘルプ
内容数十秒〜数分で楽しめるコンテンツ
FB よりも短い。

Instagram の場合
38
文字数最大 2200文字。
● 3行目以降は「もっと読む」としてカットされる。
ビデオ 3~60秒
参考：Instagram ヘルプ
内容ビジュアル第一。画像やビデオが気になった
人にキャプションを読んでもらう。

記事 (おしらせ・ブログなど）の場合
39
見出し 70文字以内が理想
記事の長さ 1記事 7分ぐらいまでが理想
最大 2800〜4200文字
(参照: 日本人の平均 400〜600文字。Katz は636文字でした)
メタ説明 155文字か、それ以下
内容テキスト、画像を盛り込んだ読み物。
時間をかけて読むコンテンツ。

理想は
各メディアに向けて
最適化されたコンテンツを
作成＆投稿すること

理想は
各メディアに向けて
最適化されたコンテンツを
作成＆投稿すること
普通は
無理時間がないです

だけど

出来る限り
やりましょう

ということで

ちょっと楽をする
=
① SNS 連携

と

シームレスな情報提供UX
=
②AMP & Instant Article

を

自分のWP
サイト
に

試してみた
体験記を
紹介します

サイトの例

サイト1: katzueno.com
52

サイト2: entertainmenttoday.net
53

① SNS 連携

① SNS 連携
● できるだけプラグインでやっちゃおう
● SNS 連携とは
○ 1-1. WordPress サイト記事シェアボタン等
○ 1-2. コンテンツを SNS 投稿するプラグイン
55

① SNS 連携
● できるだけプラグインでやっちゃおう
● SNS 連携とは
○ 1-1. WordPress サイト記事シェアボタン等
○ 1-2. コンテンツを SNS 投稿するプラグイン
56
今後はこっちが重要。

1-1. SNSシェアボタンプラグイン比較
自分のサイトをシェア
57

1-1. SNSシェアボタンプラグイン
● 個人的に使用経験のあるアドオン
○ Share Buttons by AddThis
○ Simple Share
○ JetPack
○ WP Social Bookmarking Light
58

1-1. SNSシェアボタンプラグイン
● 個人的に使用経験のあるアドオン
○ Share Buttons by AddThis
海外サービス。英語サイトでよく使う
○ Simple Share
串本の宮内さん作。凄くシンプル。ブログで使用中
○ JetPack
JetPackのシェアボタン機能で十分なとき
○ WP Social Bookmarking Light
日本のSNSシェアボタンも結構網羅している古くからの
定番(?)アドオン
59

Simple Share
(シンプル実装が良い)
か
JetPack
(JetPack を使うなら)
迷ったら

1-2. コンテンツをSNS投稿
Facebook や Twitter にコンテンツを投
稿しよう
61

1-2. SNS投稿プラグイン
● WordPress サイトで記事を投稿したら、
自動的にSNSに投稿
○ 主に WP サイトから Twitter や Facebook へ投稿
○ Instagram は WordPress から投稿できない
Instagram のポリシーで外部アプリからの投稿ができない。
Instagram から WordPress サイトへの投稿はできる
62

● WordPress サイトで記事を投稿したら、
自動的にSNSに投稿
○ 主に WP サイトから Twitter や Facebook へ投稿
○ Instagram は WordPress から投稿できない
Instagram のポリシーで外部アプリからの投稿ができない。
Instagram から WordPress サイトへの投稿はできる
63

● 気をつけないといけないこと
○ OGPの設定や、Twitter Card をきちんと設定
● OGP (Open Graph Protocol)
○ Facebook が取り決めた、Webページがどのような情報
を提供しているかを表すための head 情報
○ Facebook はこの情報を元に、シェアされたリンクをタダ
のリンクではなく、画像やタイトル・説明テキストを引用し
て表示します。
64

65

66

● Twitter Card
○ Twitter オリジナルのOGPのようなもの
○ "summary_large_image" 対応してます？
○ 写真が4個埋め込める、Gallery 等
■ 訂正: Gallery は提供停止になりました (謝辞: Kazumich さん)
67

● 簡単に設定できるアドオン
68

○ Yoast SEO
他にも SEO の設定などが可能だが、OGP
や Twitter Card を <head> 内に簡単に挿入
してくれる。
69

○ Yoast SEO
してくれる。
70

○ Yoast SEO
してくれる。
71

○ Yoast SEO
してくれる。
72

○ Yoast SEO
してくれる。
73

○ Yoast SEO
してくれる。
74

○ Yoast SEO
してくれる。
75
アイキャッチ画像を用意できるなら、
「大きな画像付きの Summary」を選ぼう

○ Yoast SEO
してくれる。
76

○ Yoast SEO
してくれる。
77

● ちゃんとシェアできるかテスト
○ 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

らくらく自動投稿
準備ができたら

● 実際のサイトで使用経験のあるアドオン
○ WP to Twitter
記事公開時に Twitter を自動投稿。結構カスタマイズで
きるのでおすすめ。
○ JetPackの「パブリサイズ」機能
JetPackにも投稿が。これで結構十分。
※ Yoast SEO との head タグの競合に注意
○ Facebook
メンテされてないっぽいけど、公式アプリで、まだ動いて
ます (苦笑)
80

○ WP to Twitter
○ JetPack
○ Facebook
ます (苦笑)
81

○ WP to Twitter
○ Facebook
ます (苦笑)
82

○ WP to Twitter
○ JetPack
○ Facebook
ます (苦笑)
83

○ WP to Twitter
○ Facebook
ます (苦笑)
84

○ WP to Twitter
○ JetPack
○ Facebook
ます (苦笑)
85

Jetpack がおすすめ。
任意コメントを
入れることができる。

Instagram の場合
残念ながらアプリからのみ
投稿可能
90

ただし、
Instagram -> WordPress
な投稿・表示は可能
いろいろなプラグインがあるので
試してみると良いかも。
※ 各画像、クリックして飛べます

① SNS 連携まとめ
● シェアボタンは実装しよう
● OGP や Twitter カードをしっかり
● 理想は SNS 別に個々の投稿をすること
● 完全自動投稿はダメだけど、JetPack のパブリ
サイズ機能はカスタムメッセージつけて Twitter
& Facebook 投稿が可能。
92

では、いよいよ

シームレスな情報提供UX
=
② AMP & Instant Article

demo実際に Instant Article がどんなに早いか

AMP (Accelerated Mobile Page)
● Google のキャッシュを
使って、モバイル向けに
高速にコンテンツを配信
● Automattic も AMP プロジェクトに参画
公式(?)プラグインもリリース
● 専用のHTMLが必要
● 既にプラグインも幾つかリリース
96

AMP (Accelerated Mobile Page)
● 本当は、コーディング
レベルで面倒くさい
● ただ、高速にサイトをブラウ
ズできるのでその点を我
慢。
97

AMPの導入方法：用意するもの
● プラグイン
○ AMP (Automattic)
○ Facebook Instant Articles &
Google AMP Pages by
PageFrog
● Google Search Console
にサイトを登録（まだしていなければ）
○ Google Search Console 内の
チェッカー
● Chrome のエクステンション「AMP
Validator」でチェックを行う。
98

プラグイン
有効化する前に・・・

その前に：
パーマリンクの設定を忘れずに
100
基本的に、「基本」以外になるように

気を取り直して・・・

AMPの導入方法
● プラグインをダウンロードし、有効化す
るだけ
102
● あとは、URL のあとに /amp/ をつけ
ると Google AMP 対応ページが閲覧
可能

しかーし、問題が・・・

よくある AMP エラー
publisher と author の情報が足らない等
104
解決策テーマの function.php にフックを追記してエラー分を解
決

ちょっと面倒だったので、
おいしいプラグインを
見つけました

● AMP & Instant Article 両方できる
○ 前述の Google AMP プラグインも必要になります
106

Google AMP を有効化
107
「Ready」になり、Google AMP が出力開始

Google AMP を有効化
108
「Ready」になり、Google AMP が出力開始
Google Analytics コードの埋め込みなども簡単
だけど、Instant Article の出力がうまくいかなかった orz

Google Search Console
で確認
(AMP を有効化してから)

110

111
エラーのチェック

112

113

114

115
エラー確認し解消します。

Google AMP 小ネタ TIPS
● Facebook Instant Articles & Google
AMP Pages by PageFrog プラグイン
を使って
○ Google Analytics 埋込するとき、本サイトのものとは、
別プロフィールを用意しよう。トラッキングしやすくなりま
す。
○ Google AdSense は 300x250 の広告が使える。
○ Settings (設定) ページにある「Force AMP….」
116
をオンにすると AMP エラー軽減を一気に図れるかも！？

Google AMP 小ネタ TIPS
● AMP エラー対策
○ アイキャッチ (Feature) 画像をバッチ処理で登録するの
に便利なプラグイン「Quick Featured Image」
117

以上
Google AMP

次は
Instant Articles

Facebook Instant Article
● Google AMP は専用の HTML
に対して、Instant Article は専用の XML
● Facebook ページにページを登録する方式
● なので、要 Facebook ページ
● Facebook ページ作成後
https://www.facebook.com/instant_articles/signup
ページより、希望するページの Instant Articles
を有効化
120

● Google AMP は専用の HTML
に対して、Instant Article は専用の XML
● Facebook ページにページを登録する方式
● なので、要 Facebook ページ
● Facebook ページ作成後
https://www.facebook.com/instant_articles/signup
ページより、希望するページの Instant Articles
を有効化
121

● Instant Article for WP をインストール
122

Instant Article 設定方法
● FB の App ID とシークレットキーを入力
123

● そしてユーザー認証を行う
124

● どの Facebook Page への投稿かを選択
125

Instant Article の登録
● Instant Article の XML 出力先
[サイトURL]/feed/instant-article/
126

● Facebook ページを訪問し「投稿ツールへ」
127

● 左のメニューから「構成」をクリック
128

● Connect Your Site で URL を入力
(プラグインが meta タグの挿入をしています)
129
※ なぜか今週は Google Chrome ブラウザで URL 入力できず、Firefox で登録

● Facebook Page Manager アプリで Instant
Article を確認
Facebook Page Manager で確認
130

● さきほど書き留めた RSS フィードの URL を登録
プロダクションRSSフィードを登録
131

● さきほど書き留めた RSS フィードの URL を登録
プロダクションRSSフィードを登録
132
記事がすぐに追加されなければ、この更新マークを押
してみよう。
ブログ記事では、WordPress の記事自体を一回更新
しないと読み込んでくれなかったとも報告有り
それでもダメならなにか問題有り

● スタイルの「default」をクリックしサイトの
アイデンティティーを登録
スタイルでロゴを登録
133

アイデンティティーを登録 (右上の保存を忘れずに！)
134

135

審査を申請！
136

● 審査完了後「プロダクション関連の記事」の記事
一覧から、順次記事を公開！
審査完了後、記事を公開
137

え、Facebook ページから記
事を公開！？

そうです！
記事は Facebook ページ
から公開します

なので、さきほどの JetPack
の SNS 投稿と
ちょっと矛盾!!

Instant Article を使うとき
記事は Facebook ページの
投稿ツールから
公開しましょう
将来、なんか良い方法が出てくると良いな

以上、
AMP & Instant Article
体験記！

・・・

ちょっと
しんどかった orz

でも、
読み込み速度が向上し
UX 改善できるなら
やる価値あり！

ありがとうございました！
Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
SNS + 動画 + 多言語はお任せ！
146

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

More from Katz Ueno

More from Katz Ueno (20)

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