アサイン前に知りたい。AMP(Google)対応時のポイント

1. アサイン前に知りたい。
AMP(Google)対応時のポイント

2. 目次
1. About AMP
2. Google Search UI
3. AMP features
4. Notes on implementation

3. 1. About AMP

4. 1. About AMP
AMP(Accelerated Mobile Pages)はスマート
フォン端末でウェブページを高速表示するため
に発足されたプロジェクトです。上記、AMPの
仕様に基づきHTMLを作成することで、AMP対
応サービスで高速にウェブベージを表示するこ
とが出来ます。
https://www.ampproject.org/
簡潔に説明すると、ウェブページの高速表示に
特化したフレームワークです。

5. 1. About AMP
HTMLの変わりにAMP HTMLと呼ばれるAMPの仕様に基づいたHTMLを作成し、
サーバーにアップロード。
その後、本体側のHTMLにAMPページのURLを設定することで、
対応が可能となります。

6. 1. About AMP
AMP HTML Sample

7. 1. About AMP
設定が完了すると、GoogleはAMP HTMLをクロールし、htmlファイルとイメージ
ファイルのキャッシュを専用のCDNサーバーに保存します。
その後、Googleの検索結果に反映され、専用のAMPブラウザで高速に表示されます。

8. 1. About AMP
AMP
No Standalone
AMP
Standalone
General response.

9. 1. About AMP
AMPの実装を行うと。。。
1. ウェブページの高速表示できます。（2〜4倍）
2. Googleの検索結果で優遇表示される。= PV UP

10. 2. Google search UI

11. 2. Google search UI
AMP & 構造化データ
(Article, NewsArticle, BlogArticle)
を設定すると、特別枠に追加でページ
が表示されます。
Spacial Result 1

12. 2. Google search UI
サービス名で検索した場合、AMP
対応している新着記事が特別に表示
される。
Spacial Result 2

13. 2. Google search UI
関連記事が有る場合、検索結果にカ
ルーセルUIが追加される。
Spacial Result 3

14. 2. Google search UI
検索結果にAMPマークが追加され、
クリックするとAMP専用ブラウザでページが見れます。
Search Result 1

15. 2. Google search UI
構造化マークアップをした場合は、上記のように表示されます。
Search Result 2

16. 2. Google search UI
AMP Browser
検索結果をクリックすると、ページ内ブ
ラウザが起動。
ページ遷移無しでページを閲覧できます。
画像やHTMLもpreloadされているので、
高速で画面が表示されます。

17. 3. AMP features

18. 3. AMP features
1. ウェブページの高速表示できます。（2〜4倍）
2. Googleの検索結果で優遇表示される。= PV UP
他にも特徴が

19. 3. AMP features
非AMPページのPVは落ちる
AMP対応を行うと、
検索結果が全て「Google AMP Browser」で
表示され、
Google検索結果から非AMP対応の通常ページ
へのアクセス経路が無くなる為です。

20. 3. AMP features
平均PVが落ち、直帰率が上がる可能性あり
Google AMP Browserはブラウザ上でスワイ
プを行うと、別サービスのAMP記事を表示でき
ます。
スワイプ１つで離脱が出来てしまうのでサイト
内の回遊率が落ちる可能性は十分に想定できま
す。

21. 3. AMP features
広告のCVや売上に影響はでる
Google AMP Browserによる離脱の懸念。通常
HTMLページみたいにに自由に広告を設定できない
等の課題があります。
その為、非AMPページとAMPページで広告効果が
変わってしまう可能性があります。

22. 3. AMP features
実装できるUIに制限がかかる
AMP HTMLは通常のHTMLよりも実装方法に制限がかかってい
ます。
・CSSはインラインで記載。記載可能なのは50KBまで。
・独自実装のJSは使用禁止。
・img, video, audio, iframe等の一部要素は、
代わりにamp-●●●などのカスタムエレメンツを使う

23. 3. AMP features
フロントエンドの開発
・最初は勉強コストがかかる。
・リリース前後にデバッグツールを使ったチェックが必要。
・50KBの制限に対応できるCSSの設計が重要。
・デザイナーや企画とのコミュニケーションコストは多くかかる。

24. 4. Notes on implementation

25. 4. Notes on implementation
・Special Result UIはArticleタイプのみ。
・Google対応するなら、standalone AMPはおすすめしない。
（難易度高）
・Google serch consoleにサイトを登録しましょう。
・Google Analyticsは必ず設定しましょう。
・Debugツールでしっかりチェックしましょう

26. Links

27. Links
https://www.ampproject.org/
Document

28. Links
https://www.ampproject.org/docs/get_started/create/
preview_and_validate
AMP Debug for Chrome

29. Links
https://search.google.com/search-console/amp
AMP Debug tool

30. Links
https://search.google.com/structured-data/testing-tool
JSON-LD Debug tool

31. Links
https://www.google.com/webmasters/tools/home?hl=ja&pli=1
Search Console

32. END