AMPまとめ

2021-02-21

AMPを仕事で使いそうな気がするので情報をまとめていく。

AMPとは？

アクセラレーティッド・モバイル・ページの頭文字を取ったもので、GoogleとTwitterが開発しているもの。

かなり前から存在は認識していたが、まだまだ浸透しているとは思えない。

リリースされた頃、SEOに有利になると聞いて触手が動いたが2020年現在、AMPであることは銀の弾丸ではないように感じる。

とは言え、モバイルでアクセスした時に表示速度が爆速になるのはユーザーにとってもメリットがある。

一度、サイトをAMP化しようかと試みたこともあったが表示崩れなどで嫌になって辞めた経緯がある。

今回、あるプロジェクトでAMPのStoriesを実装しようかという話しになったが、時間の経過と共にだいぶAMPが進化しているようなので情報収集も兼ねて重い腰を上げるに至った。

HTML / CSS / JavaScript。

当初はHTML・CSSオンリーという認識だったけど、任意のJavaScriptにも対応するようになった様子。

AMP用のお作法をちゃんと抑えればAMPに対応することも難しくない。(と思ってる)

そもそも、なぜAMPが爆速なのかを理解してないのでさっくりまとめたいと思う。

端的に言うと、AMPの仕組みはGoogleやTwitter側のサーバーにWeb情報をキャッシュするというもの。

通常、ユーザーが検索結果からサイトにアクセスする場合、Webマスターが運用しているサーバーに情報を取りにいく。

しかし、AMPはすでにGoogle側のサーバーにキャッシュされているので爆速で表示されるというものだ。

【図解】AMPとは？導入すべき？わかりやすく解説します

AMPページを表示するとGoogleのドメインがページトップに表示される。

上述したようにGoogleのサーバーから配信されているものになるが、独自ドメインのURLも表示できる。

これはSXG（Signed HTTP Exchanges）を用いることで実現できるが、現状(私にとっては)Googleのドメイン表示でも問題ないので頭の片隅にメモ。