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

More Related Content

Viewers also liked

超高速WordPress
超高速WordPress超高速WordPress
超高速WordPress
Kengyu Nakamura
 
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
Hiromasa Tanaka
 
第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会
kenji goto
 
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
Katz Ueno
 
2015 5 13_facebook3
2015 5 13_facebook32015 5 13_facebook3
2015 5 13_facebook3
Yuki Fujino
 
Web動画、WordPressで使ってみよう!
Web動画、WordPressで使ってみよう!Web動画、WordPressで使ってみよう!
Web動画、WordPressで使ってみよう!
Katz Ueno
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
 
Meetup OpenTech (Openska) - WordPress Expert en 1h !
Meetup OpenTech (Openska) - WordPress Expert en 1h !Meetup OpenTech (Openska) - WordPress Expert en 1h !
Meetup OpenTech (Openska) - WordPress Expert en 1h !
Thierry PIGOT
 
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Yuki Okamoto
 
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところconcrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
Cherry Pie Web
 
dockerでImmutable InfrastructureなWordPressを考える
dockerでImmutable InfrastructureなWordPressを考えるdockerでImmutable InfrastructureなWordPressを考える
dockerでImmutable InfrastructureなWordPressを考える
GMOインターネット
 
Deeplearningとは?
Deeplearningとは?Deeplearningとは?
Deeplearningとは?
Yuto Suzuki
 
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップWordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
 
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナーセキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
SPIRAL Inc.
 

Viewers also liked (15)

超高速WordPress
超高速WordPress超高速WordPress
超高速WordPress
 
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
 
第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会
 
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
 
2015 5 13_facebook3
2015 5 13_facebook32015 5 13_facebook3
2015 5 13_facebook3
 
Web動画、WordPressで使ってみよう!
Web動画、WordPressで使ってみよう!Web動画、WordPressで使ってみよう!
Web動画、WordPressで使ってみよう!
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
2015 7 15_num
2015 7 15_num2015 7 15_num
2015 7 15_num
 
Meetup OpenTech (Openska) - WordPress Expert en 1h !
Meetup OpenTech (Openska) - WordPress Expert en 1h !Meetup OpenTech (Openska) - WordPress Expert en 1h !
Meetup OpenTech (Openska) - WordPress Expert en 1h !
 
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
 
concrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところconcrete5を使って分かった、WordPressのいいところ
concrete5を使って分かった、WordPressのいいところ
 
dockerでImmutable InfrastructureなWordPressを考える
dockerでImmutable InfrastructureなWordPressを考えるdockerでImmutable InfrastructureなWordPressを考える
dockerでImmutable InfrastructureなWordPressを考える
 
Deeplearningとは?
Deeplearningとは?Deeplearningとは?
Deeplearningとは?
 
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップWordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
 
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナーセキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
セキュリティを重視した本格ビジネスサイトをWordPressで作るためのセミナー
 

More from Katz Ueno

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
Katz Ueno
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
Katz Ueno
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
Katz Ueno
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
Katz Ueno
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
Katz Ueno
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
Katz Ueno
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
Katz Ueno
 
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Katz Ueno
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Katz Ueno
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
Katz Ueno
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
Katz Ueno
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Katz Ueno
 
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Katz Ueno
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
Katz Ueno
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
Katz Ueno
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 

More from Katz Ueno (20)

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
 
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
第8回 Web 動画 サイト講座 〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
 
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
第7回 Web 動画 編集講座 〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
 

時代は 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
  • 5. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 自己紹介 5
  • 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/
  • 10. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 他の CMS のことは置いといて 10
  • 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
  • 13. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 そして・・・ 13
  • 14. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記14
  • 15. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記15 WordBench Nagoya で 結婚しました!
  • 16. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記16 なので・・・ ● concrete5 や mautic は 仕事ですが ● WordPress は家族です! (仕事もしてます)
  • 17. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 自分とメディア 17
  • 18. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記18 アメリカへ留学 ロサンゼルスで インディーズ映画製作 バイトでテキサス州の エネルギー・医療関連 出版社に務める ロスの1967年創刊の 小さいエンタメ雑誌 なぜか編集長に
  • 19. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 外国人向けのインバウンドメディア YokosoNews を立ち上げメディアからも取材を受ける 19
  • 20. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 既存メディアから 新メディアを 渡り歩いてきました。 20
  • 21. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 さて・・・ 21
  • 22. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記22 2016/8/27 (土) WordFesNagoya 2016 @ 名古屋工業大学 時代は SNS 連携! WordPress サイトの SNS 連携, AMP & Instant Article 対策体験記
  • 23. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 WHY!? SNS 連携が必要? 23
  • 24. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記24 きっかけは WordCamp Tokyo 2015
  • 25. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記25 Photo Cortesy of WordCamp Tokyo Flickr
  • 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
  • 28. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記28 まず、大前提 今、ネットユーザーは スマホデバイスで 情報を収集している
  • 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 アプリを抜けたくない
  • 31. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 「詳しくは web へ」 は終わってます 31
  • 32. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記32 ということは? Webコンテンツ制作者 の視点で 今後どうしたら?
  • 33. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記33 これからは
  • 34. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記34 コンテンツを分散 する時代へ これからは
  • 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月時点の情報
  • 40. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記40 理想は 各メディアに向けて 最適化されたコンテンツを 作成&投稿すること
  • 41. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記41 理想は 各メディアに向けて 最適化されたコンテンツを 作成&投稿すること 普通は 無理時間がないです
  • 42. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記42 だけど
  • 43. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記43 出来る限り やりましょう
  • 44. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記44 ということで
  • 45. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記45 ちょっと楽をする = ① SNS 連携
  • 46. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記46 と
  • 47. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記47 シームレスな情報提供UX = ②AMP & Instant Article
  • 48. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記48 を
  • 49. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記49 自分のWP サイト に
  • 50. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記50 試してみた 体験記を 紹介します
  • 51. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記51 サイトの例
  • 52. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 サイト1: katzueno.com 52
  • 53. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 サイト2: entertainmenttoday.net 53
  • 54. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記54 ① SNS 連携
  • 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 今後はこっちが重要。
  • 57. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-1. SNSシェアボタンプラグイン比較 自分のサイトをシェア 57
  • 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
  • 68. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 1-2. SNS投稿プラグイン ● 簡単に設定できるアドオン 68
  • 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
  • 79. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記79 らくらく自動投稿 準備ができたら
  • 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
  • 86. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記86 Jetpack がおすすめ。 任意コメントを 入れることができる。
  • 87. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記87 Jetpack がおすすめ。 任意コメントを 入れることができる。
  • 88. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記88 Jetpack がおすすめ。 任意コメントを 入れることができる。
  • 89. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記89 Jetpack がおすすめ。 任意コメントを 入れることができる。
  • 90. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instagram の場合 残念ながらアプリからのみ 投稿可能 90
  • 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
  • 93. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記93 では、いよいよ
  • 94. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記94 シームレスな情報提供UX = ② AMP & Instant Article
  • 95. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記95 demo実際に Instant Article がどんなに早いか
  • 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
  • 99. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記99 プラグイン 有効化する前に・・・
  • 100. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 その前に: パーマリンクの設定を忘れずに 100 基本的に、「基本」以外になるように
  • 101. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記101 気を取り直して・・・
  • 102. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 AMPの導入方法 ● プラグインをダウンロードし、有効化す るだけ 102 ● あとは、URL のあとに /amp/ をつけ ると Google AMP 対応ページが閲覧 可能
  • 103. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記103 しかーし、問題が・・・
  • 104. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 よくある AMP エラー publisher と author の情報が足らない等 104 解決策テーマの function.php にフックを追記してエラー分を解 決
  • 105. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記105 ちょっと面倒だったので、 おいしいプラグインを 見つけました
  • 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
  • 109. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記109 Google Search Console で確認 (AMP を有効化してから)
  • 110. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 110
  • 111. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 111 エラーのチェック
  • 112. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 112 エラーのチェック
  • 113. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 113 エラーのチェック
  • 114. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Google Search Console 114 エラーのチェック
  • 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
  • 118. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記118 以上 Google AMP
  • 119. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記119 次は Instant Articles
  • 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
  • 124. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article 設定方法 ● そしてユーザー認証を行う 124
  • 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
  • 128. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 Instant Article の登録 ● 左のメニューから「構成」をクリック 128
  • 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
  • 138. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記138 え、Facebook ページから記 事を公開!?
  • 139. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記139 そうです! 記事は Facebook ページ から公開します
  • 140. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記140 なので、さきほどの JetPack の SNS 投稿と ちょっと矛盾!!
  • 141. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記141 Instant Article を使うとき 記事は Facebook ページの 投稿ツールから 公開しましょう 将来、なんか良い方法が出てくると良いな
  • 142. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記142 以上、 AMP & Instant Article 体験記!
  • 143. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記143 ・・・
  • 144. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記144 ちょっと しんどかった orz
  • 145. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記145 でも、 読み込み速度が向上し UX 改善できるなら やる価値あり!
  • 146. 2016.8.27 (土) WordPress サイトの SNS連携、AMP & Instant Article 対策体験記 ありがとうございました! Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com SNS + 動画 + 多言語はお任せ! 146