2021年4月30日

AMPとは

HTML/CSS SEO web全般 学習

この記事は1年以上前に投稿された記事です。情報が古い可能性があります。

Web系の企業ならエンジニア非エンジニア関係なくふれる言葉「AMP」について概要と是非。

AMPの概要

AMP（Accelerated Mobile Pages = アンプ）はGoogleが推奨する、Webページを高速に表示するための手法です。オープンソースのプロジェクトでメンテナンスされています。

Accelerated Mobile Pages は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ

Accelerated Mobile Pages Project – AMP
https://www.ampproject.org/ （公式サイト）（英語）

検索結果がクリックされたとき、Googleのキャッシュを表示することにより、表示速度を高速化しているそう。

Webページの表示に3 秒以上かかると 40% の人がサイトの閲覧を諦めるという調査結果があるように、読み込みに時間がかかるサイトは「イライラする」「変なものダウンロードしてそう」などユーザーの評価が低いだけでなく、SEO的にも良くないです。

AMPは直接的にはSEOには関係しないと言われていますが、表示速度が上がれば結果的に評価上がるはずなので、対応して損は無いはず（そもそも、速度よりも一番大事なのはコンテンツ内容ですが）。

対応方法

WordPressの場合

プラグインの導入で割と簡単に対応できる（詳細は割愛）。

HTMLの場合

特有のルールに従って記述する。公式ドキュメント参照。

制限事項

パフォーマンスと操作性の関係で、いくつかの制限があります。

HTMLの制限

  • img要素が使えない（代わりにamp-imgを使わなければいけない）
  • scriptが使えない
  • コメント利用不可 など

CSSの制限

  • 50,000byte(50KB)以内 など

JSの制限

  • 150,000byte(150KB)以内 など

フォントの制限

以下のプロバイダがホワイトリスト登録されており、リンクタグ経由でのフォント配信が許可されています。

AMPに対応したほうが良い例

  • 表示速度を上げたい
  • モバイル検索結果でカルーセル表示されるようになりたい

AMP対応しないほうが良い例

  • 広告収益を下げたくない（AMP未対応の広告がある）
  • エラー対応したくない（色々な制限があるためエラーがつきもの）
  • 仕様変更に都度対応する余裕がない（現在進行形で開発が進んでいるプロジェクトなので急な仕様変更がありうる）

AMPの是非

5Gが普及すればデータの伝送速度は飛躍的に上がるのでAMPは不要になるとの見方もありますが、現行の4Gのように普及するまでにはあと数年かかるはずなので、少なくともそれまでの間はAMP対応する意味はありそう。

おわりに

AMPは現在進行形のプロジェクトなので、仕様変更等やアップデートが頻繁に起こっています。情報をキャッチアップしつつ、恩恵を享受しましょう。

2021年11月追記

アメブロがAMP対応を終了することが発表されました。大きな理由はトップニュースカルーセルでAMPが条件から外れたからだそう。国内IT大手がAMP対応をあえて終了するというのはでかいニュースなので、AMPに対する考え方も各々変えていかなければですね。

参考