ECサイトにAMPを全ページに適用して効果測定した話

17
いいね
0
コメント

2017年01月21日に更新

AMPとは？

AMPを導入しておくと何が起こるのか？

Google検索の結果一覧画面でユーザーが気になるサイトを見つけたときにクリックしたら爆速でページを表示してくれます。仕組みは後述。
▼メリット
・ユーザーに素早い表示が可能（４倍とか８倍とか早くなると言われている）
・更新性が高い記事はカルーセル表示される。
・サイト表示が遅かったらGoogleの評価が下がると言われているがそれを避けられる。
・ページはGoogleのCDNに保存しておいてくれる。
・通信が遅いユーザーを取り逃がさないことでユーザー数増加が期待できる。
・上記モバイルユーザーにとって使い勝手が良くなると検索順位も有利になるかもしれない。
　※一応Google公式では検索順位への直接的な影響はないとのこと。
https://webmasters.googleblog.com/2016/08/amp-your-content-preview-of-amped.html

### 実際やってみてどのような影響が出たのか？
・ユーザー数は変化なし。
・平均滞在時間は激減した（17分→14分：14%悪化）
・トータルPVは激減（2割悪化）
・直帰率は改善した（ように見える。23%→16%：3割改善)
・ランキング順位は下がってしまった※理由あり
・CDNに保存されると最新のデータが反映されないことを懸念していたが問題にならなかった。
・PCからの検索にひっかからなくなる時間帯がある（マジで焦る。スマートフォンでは上位なのに、PCだとAMP記事は自社だけでなく他社サービスも一緒に消える。）

影響についてはAMPの実装を熟知していなかった僕のミスが起因となるものも含まれます。ミスした部分と改善点についてはこの記事の下部で補足していきます。

AMPが検索結果にどのように表示されるか？

AMPはモバイル専用のページとなるため、PCのユーザーエージェントでは見れません。そのため、GoogleChromeを開いて、Developer's ToolからiPhone6としてGoogle検索することで確認できます。
今回は「漫画」というキーワードで検索してみます。

検索結果にイナズママークとAMPと書かれた結果が表示されました。（※弊社サービスです）

ここでConsoleタブを見てみると・・・

まだクリックしていないのに弊社のコンテンツ「www.sukima.me」の１ページを既に読み込んでいます。他のサイトは対応していないので優遇してもらった気分になれる時間です。また、URLに「cdn.ampproject.org」と書かれておりCDNが効いていることも確認できました。

クリックしてみると、AMP専用のHTMLを表示します。この表示は爆速です。HTMLファイルは既に読み込んでいるため、後はそこに表示する画像ファイルを読み込むくらいです。ユーザーにとって体感速度0.01秒くらいです（既に読み込み済みなわけですから）。

（AMP専用のHTMLは標準のHTMLとは別で作ります）

大きな利点：直近の人気記事はトップニュースでカルーセル表示してもらえるかも

ちょっとモザイク掛け過ぎでわかりづらいかもしれないですが、ビッグワードで検索するとカルーセルに載せてもらえる可能性があります。この載せてもらえる可能性というのは、私個人の体感としては１日10万PVくらいあると載せてもらえる可能性が高いと思うという程度。ただし、先日は100PVくらいでも載せてもらった事もありました（その後のアクセス数が少ないと次の日には消えます）
カルーセルに載ると画像も一緒にカード上で表示されることもあり、クリックされる可能性が高いです。

AMPの仕組みについてのまとめ

AMPはGoogleで載せてもらうための①AMP HTMLファイルと②構造化データの２つが必要です。

①AMP HTMLの特徴
　予め定義されているHTMLタグしか使えない
　予め定義されているJavascriptしか使えない（サードパーティ製は禁止）
　CSSはHTMLの中に入れなければならない。
　１つのHTMLファイルで完結しなければならない。（他のサイトに掲載できる完成形である必要がある）

②構造化データの特徴
①AMP HTMLの中に書きます。「このページはこういうページなんですよ！」というのを表明するときに http://schema.org/ が策定したフォーマットに従ってHTMLタグとかJSONを記載しておくと、検索エンジン等がどういう記事か判定してくれるようになります。カルーセルに設定する画像ファイルも指定できます。

※AMPの仕組みを図にするとおそらくこんな感じだと思います。個人的な予想図なので正確じゃない可能性あります。

＊画像内にクリックしたらCDN配信と書いていますが画像ファイルのみです。HTMLファイルはクリックしなくてもCDNから提供されます。

よしじゃあ実際に動いているサイトに導入しちゃおう

今回適用するサイトはECサイトのようなものと思って頂けると幸いです。
現在インデックスされているページ数は6万を超えています。

GoogleによるとAMPはまだ「記事サイト」つまりはニュースサイトしか適用できないかもって言いますけど、あまり気にせず進めました。

AMP適用にあたって

AMPページの構造化データはArticle もしくは NewsArticleだけで良いです。構造化データをたくさんつけてみましたが、ほとんど効果なかったです。

※AMP HTMLの書き方は公式サイトを見れば何となく分かってくると思います。
https://www.ampproject.org/ja/docs/get_started/create
※デバッグはChromeExtensionのAMP Validatorがすごく便利です！

１０月くらいから少しずつ適用していきました。初めは「新作情報」いう記事にして新しく仕入れた商品ページをNewsArticleに適用していきました。
そうすると欲が出てきてありとあらゆるページに理由を付けてArticle もしくは NewsArticleを適用していきました。
そして重要でないページを除いてほとんど適用できたので、トップページも適用することにしました。

トップページがとても影響力があるというサイト特性をしているため、切り替えは少しだけ緊張しましたが思い切って進めました。

効果測定した結果

CTR（クリック率）

Google検索結果に表示されるイナズママークとAMPっていう文字なんですが気になってクリックするかな？と思ったけどクリック率に全然影響ありませんでした。むしろAMPって表示されるくらいならdescriptionにスペース使ってほしいですね。AMPという文字を表示するためにdescriptionの文字を3文字くらい削られます。「...」で省略されたくない場合は少し文字を減らす必要が有りました。

ユーザー・セッションは変わらず、PV数は減少

土日は荒れるので、適用前後の平日で比較してみました。また、影響力が最もあるトップページを入れ替えた前後で比較しました。
ソーシャルやお気に入りから来た人を除いた「自然検索トラフィック」のみに絞り数値比較をします。

※緑は改善、赤は悪化です

・ページビューめっちゃ減ってるやん！！！(20%)平均セッション時間めっちゃ減ってるやん！(14%)

結果：ページビュー数が売上に直結するためダメージを受けました
※ユーザー数は変わらないが、PVが下がるということは巡回する人が減ったということかと推測されます。

巡回比率（AMPから次のページに遷移しているか？）を測定する

GoogleAnalyticsの直帰率が信用できなかったので、イベントトラッキングでAMP訪問者がサイト内巡回を行うかどうか比率を測定しました。

▼実装は別記事にしました
AMPからGoogleAnalyticsにイベントトラッキングデータを送信する方法：http://qiita.com/T0000N/items/94a6c1bb055f152fb07b

AMPページ内に埋め込んだGoogleAnalyticsのイベントトラッキングを見ると、18,515人の人がページビューをし、そのうち10,854人が何かしらのリンクをクリックしたことになります。つまりは58%の人がサイト内巡回を行い始めていることを確認しました。一方42%くらいの人はAMPページを開いただけって感じでしょうか。直帰率とは違う数字となってしまいました。
残念なことに今までサイト内巡回を行っている人は70%を誇っていたのですが、下がってしまう結果となってしまいました。ここに改善ポイントがあると推測されます。

考察

所感

1．トップページをAMP化した際に、通常のトップページより魅力を伝え切れなかったように思えます。AMPでは実装が難しいので簡略化してしまいがちですが、そうするとユーザーにとって魅力的なサイトとして訴求できなくなる可能性があります。AMP化しても魅力的なランディングページとなるよう努めていく必要が有ります。
2．AMPを導入することで通信が重い等で離脱する人が減ることでユーザー数の増加はまだ見込めると思います。
3．同時に検索結果ランキングが落ちてしまう可能性があるためSEO観点的なチェックを同時に行う必要が有ります（後述）

同時期に検索結果ランキングが落ちた理由

・理由１．AMPの記事を簡略化して書いてしまっていた。
元記事とAMP記事を比較するとコンテンツを全てAMPに移植できていませんでした(工数を十分に割いていなかった)。そのためコンテンツ価値が下がったと判定されたと考えられます。とにかくSEO的にはコンテンツの充実は必須です。通常ページと同等のコンテンツ拡充が必要となると思われます。
・理由２．キーワード選定が甘かった。
キーワードの出現率はそのキーワードで検索した時にランキングに大きな影響があるのは当たり前の話ではあります。元記事だとたくさん記載されて数ヶ月１位だったがキーワードが、AMP記事だと一度も使っていなかったため8位以下にふっとばされました。AMP記事もランキングの評価対象されるため自分のミスです。
・理由３． amp-imgにalt属性を入れていなかった（からかも？）
amp-imgにalt属性を入れていないと、ソースを見ても本当になんのページなのか分からなくなる場合があります。amp-imgにalt属性を入れましょう。（ましてや記事内容も薄い場合はテキストを増やしましょう）。
・理由4．PCだと表示されない時間帯がある
適用して数日放置してみましたが、PCだとAMP系の記事が一切表示されない時間帯があります。他社のAMP記事も消えているのでそういう時間帯があるのだと思われます。まぁユーザーの９割スマホなので気にしなくて良いのですが、関係者にサイトを見せるときにそうなったらマジで焦ります。

改善ポイント

・AMPページで魅力を伝えるのは、今までと劣らないレベルまでコンテンツの充実が必要である。
・テキストコンテンツを多く表示する。

一番無難な方法は、通常ページと全く同じレイアウトをAMPでも実装するという方法。
ただし、AMPは制限が多すぎてこれを実装するには難しいところが多くあります。画像やアニメーションを多用してUXの良さを売り出していたサイトが同じレベルのものをAMPで実装するのは不可能と考えます。（ファイル化したJavascript・CSSは使えない）

今後

ちょっと最後の方、気合い入れて書けなかったので来週書き直します。
継続して数字は見ていきます。変化があったら追記していきます。数字が改善されないと元に戻すかも・・・
トップページをAMP化するのは厳しいかもしれないという反省。でも我慢して１週間くらい様子を見ることにしました。
記事系サイトに非常にマッチしていることは理解できるのですが、ECサイトにはまだ早かったかも。。。

# AMPとは？

### AMPを導入しておくと何が起こるのか？
Google検索の結果一覧画面でユーザーが気になるサイトを見つけたときにクリックしたら爆速でページを表示してくれます。仕組みは後述。
▼メリット
・ユーザーに素早い表示が可能（４倍とか８倍とか早くなると言われている）
・更新性が高い記事はカルーセル表示される。
・サイト表示が遅かったらGoogleの評価が下がると言われているがそれを避けられる。
・ページはGoogleのCDNに保存しておいてくれる。
・通信が遅いユーザーを取り逃がさないことでユーザー数増加が期待できる。
・上記モバイルユーザーにとって使い勝手が良くなると検索順位も有利になるかもしれない。
　※一応Google公式では検索順位への直接的な影響はないとのこと。
https://webmasters.googleblog.com/2016/08/amp-your-content-preview-of-amped.html

**影響についてはAMPの実装を熟知していなかった僕のミスが起因となるものも含まれます。ミスした部分と改善点についてはこの記事の下部で補足していきます。**

### AMPが検索結果にどのように表示されるか？
AMPはモバイル専用のページとなるため、PCのユーザーエージェントでは見れません。そのため、GoogleChromeを開いて、Developer's ToolからiPhone6としてGoogle検索することで確認できます。
今回は「漫画」というキーワードで検索してみます。
![スクリーンショット 2017-01-20 18.05.08.png](https://qiita-image-store.s3.amazonaws.com/0/40127/a6a466cd-e0d2-81c1-f3b8-9d03f9cc82e3.png)

検索結果にイナズママークとAMPと書かれた結果が表示されました。（※弊社サービスです）

![skitch.png](https://qiita-image-store.s3.amazonaws.com/0/40127/da34067b-dffc-7f3b-3265-41f318d276f6.png)

ここでConsoleタブを見てみると・・・

![スクリーンショット 2017-01-20 19.39.12.png](https://qiita-image-store.s3.amazonaws.com/0/40127/26f1425b-4d9e-41fc-5a40-b0d7e998156f.png)

まだクリックしていないのに弊社のコンテンツ 「www.sukima.me」の１ページを既に読み込んでいます。他のサイトは対応していないので優遇してもらった気分になれる時間です。また、URLに「cdn.ampproject.org」と書かれておりCDNが効いていることも確認できました。

クリックしてみると、AMP専用のHTMLを表示します。この表示は爆速です。HTMLファイルは既に読み込んでいるため、後はそこに表示する画像ファイルを読み込むくらいです。ユーザーにとって体感速度0.01秒くらいです（既に読み込み済みなわけですから）。
![skitch.png](https://qiita-image-store.s3.amazonaws.com/0/40127/fd2d6fdc-662f-3602-522e-830fb88ba8f8.png)
（AMP専用のHTMLは標準のHTMLとは別で作ります）

### 大きな利点：直近の人気記事はトップニュースでカルーセル表示してもらえるかも

![skitch.png](https://qiita-image-store.s3.amazonaws.com/0/40127/1efe9bd9-4edf-d797-3903-f4e3a4c1586a.png)

### AMPの仕組みについてのまとめ
AMPはGoogleで載せてもらうための①AMP HTMLファイルと②構造化データの２つが必要です。

※AMPの仕組みを図にするとおそらくこんな感じだと思います。個人的な予想図なので正確じゃない可能性あります。
![amp.jpg](https://qiita-image-store.s3.amazonaws.com/0/40127/b13ec3d9-fc5c-0873-12e1-8fe2860dc730.jpeg)
＊画像内にクリックしたらCDN配信と書いていますが画像ファイルのみです。HTMLファイルはクリックしなくてもCDNから提供されます。

### よしじゃあ実際に動いているサイトに導入しちゃおう
今回適用するサイトはECサイトのようなものと思って頂けると幸いです。
現在インデックスされているページ数は6万を超えています。

![スクリーンショット 2017-01-20 20.57.44.png](https://qiita-image-store.s3.amazonaws.com/0/40127/f57ac613-6645-65cb-5472-400d9897e2b1.png)

GoogleによるとAMPはまだ「記事サイト」つまりはニュースサイトしか適用できないかもって言いますけど、あまり気にせず進めました。

### AMP適用にあたって
AMPページの構造化データはArticle もしくは NewsArticleだけで良いです。構造化データをたくさんつけてみましたが、ほとんど効果なかったです。
![スクリーンショット 2017-01-20 21.41.25.png](https://qiita-image-store.s3.amazonaws.com/0/40127/8e75e544-49f4-76d0-364e-96253febcec1.png)

![スクリーンショット 2017-01-20 20.59.05.png](https://qiita-image-store.s3.amazonaws.com/0/40127/942a187b-de15-7de5-4ef3-b895d2ab70e9.png)
１０月くらいから少しずつ適用していきました。初めは「新作情報」いう記事にして新しく仕入れた商品ページをNewsArticleに適用していきました。
そうすると欲が出てきてありとあらゆるページに理由を付けてArticle もしくは NewsArticleを適用していきました。
そして重要でないページを除いてほとんど適用できたので、トップページも適用することにしました。

トップページがとても影響力があるというサイト特性をしているため、切り替えは少しだけ緊張しましたが思い切って進めました。

# 効果測定した結果

### CTR（クリック率）
Google検索結果に表示されるイナズママークとAMPっていう文字なんですが気になってクリックするかな？と思ったけどクリック率に全然影響ありませんでした。むしろAMPって表示されるくらいならdescriptionにスペース使ってほしいですね。AMPという文字を表示するためにdescriptionの文字を3文字くらい削られます。「...」で省略されたくない場合は少し文字を減らす必要が有りました。
![skitch.png](https://qiita-image-store.s3.amazonaws.com/0/40127/da34067b-dffc-7f3b-3265-41f318d276f6.png)

### ユーザー・セッションは変わらず、PV数は減少
土日は荒れるので、適用前後の平日で比較してみました。また、影響力が最もあるトップページを入れ替えた前後で比較しました。
ソーシャルやお気に入りから来た人を除いた「自然検索トラフィック」のみに絞り数値比較をします。
![スクリーンショット 2017-01-20 22.03.05.png](https://qiita-image-store.s3.amazonaws.com/0/40127/e9d2ffd6-b22e-aa13-e8bb-dc9e8971ffc2.png)
※緑は改善、赤は悪化です

**・ページビューめっちゃ減ってるやん！！！(20%)平均セッション時間めっちゃ減ってるやん！(14%)**

結果：**ページビュー数が売上に直結するためダメージを受けました**
※ユーザー数は変わらないが、PVが下がるということは巡回する人が減ったということかと推測されます。

### 巡回比率（AMPから次のページに遷移しているか？）を測定する
GoogleAnalyticsの直帰率が信用できなかったので、イベントトラッキングでAMP訪問者がサイト内巡回を行うかどうか比率を測定しました。

▼実装は別記事にしました
AMPからGoogleAnalyticsにイベントトラッキングデータを送信する方法：http://qiita.com/T0000N/items/94a6c1bb055f152fb07b

![skitch.png](https://qiita-image-store.s3.amazonaws.com/0/40127/31dc89c3-906d-00e8-5aef-a5e8f4c784ca.png)
AMPページ内に埋め込んだGoogleAnalyticsのイベントトラッキングを見ると、18,515人の人がページビューをし、そのうち10,854人が何かしらのリンクをクリックしたことになります。つまりは58%の人がサイト内巡回を行い始めていることを確認しました。一方42%くらいの人はAMPページを開いただけって感じでしょうか。直帰率とは違う数字となってしまいました。
残念なことに今までサイト内巡回を行っている人は70%を誇っていたのですが、下がってしまう結果となってしまいました。ここに改善ポイントがあると推測されます。

# 考察
###所感
**1．トップページをAMP化した際に、通常のトップページより魅力を伝え切れなかったように思えます。AMPでは実装が難しいので簡略化してしまいがちですが、そうするとユーザーにとって魅力的なサイトとして訴求できなくなる可能性があります。AMP化しても魅力的なランディングページとなるよう努めていく必要が有ります。**
**2．AMPを導入することで通信が重い等で離脱する人が減ることでユーザー数の増加はまだ見込めると思います。**
**3．同時に検索結果ランキングが落ちてしまう可能性があるためSEO観点的なチェックを同時に行う必要が有ります（後述）**

### 同時期に検索結果ランキングが落ちた理由
**・理由１．AMPの記事を簡略化して書いてしまっていた。**
元記事とAMP記事を比較するとコンテンツを全てAMPに移植できていませんでした(工数を十分に割いていなかった)。そのためコンテンツ価値が下がったと判定されたと考えられます。とにかくSEO的にはコンテンツの充実は必須です。通常ページと同等のコンテンツ拡充が必要となると思われます。
**・理由２．キーワード選定が甘かった。**
キーワードの出現率はそのキーワードで検索した時にランキングに大きな影響があるのは当たり前の話ではあります。元記事だとたくさん記載されて数ヶ月１位だったがキーワードが、AMP記事だと一度も使っていなかったため8位以下にふっとばされました。AMP記事もランキングの評価対象されるため自分のミスです。
**・理由３． amp-imgにalt属性を入れていなかった（からかも？）**
amp-imgにalt属性を入れていないと、ソースを見ても本当になんのページなのか分からなくなる場合があります。amp-imgにalt属性を入れましょう。（ましてや記事内容も薄い場合はテキストを増やしましょう）。
**・理由4．PCだと表示されない時間帯がある**
適用して数日放置してみましたが、PCだとAMP系の記事が一切表示されない時間帯があります。他社のAMP記事も消えているのでそういう時間帯があるのだと思われます。まぁユーザーの９割スマホなので気にしなくて良いのですが、**関係者にサイトを見せるときにそうなったらマジで焦ります。**

#改善ポイント
・AMPページで魅力を伝えるのは、今までと劣らないレベルまでコンテンツの充実が必要である。
・テキストコンテンツを多く表示する。

#今後
ちょっと最後の方、気合い入れて書けなかったので来週書き直します。
継続して数字は見ていきます。変化があったら追記していきます。数字が改善されないと元に戻すかも・・・
トップページをAMP化するのは厳しいかもしれないという反省。でも我慢して１週間くらい様子を見ることにしました。
記事系サイトに非常にマッチしていることは理解できるのですが、ECサイトにはまだ早かったかも。。。

T0000N

260Contribution