エンジニア目線で考察する「AMP対応」とは？

Googleによってモバイルフレンドリーが推し進められ、Webページの表示速度はSEO対策にとって避けて通れない問題となっています。

今回は今注目のAMP対応について解説していきます。AMPについて初めて耳にした、というWeb担当者の方はぜひこの記事を参考に、ページの表示速度改善に取り組んでみてください。

---

AMP(アンプ)とは

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でWebページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

“記事”コンテンツのサイト表示が早くなる

AMPでは、AMPが定義したJavaScriptのみ使えるようになっています。コンテンツリッチ化や広告の呼び出しによって処理を重くさせるJavaScriptの使用を制限することで、動画やアニメーション、グラフィックスなどの高速読み込みを目指すものです。

検索結果のカルーセル表示部分にサイトが表示される

AMP対応しているサイトは、モバイル検索結果に出てくるトップニュース枠のカルーセルの中にAMP対応した記事コンテンツを表示させることができます。

---

AMPのメリット・デメリット

AMPに対応するメリット

ユーザーのストレス軽減によるサイトのレスポンス向上

従来に比べて、ページの読み込み速度が断然早くなるので、ユーザーがサイトを見ている際に、「遅い」と感じることが少なくなり、記事を読み進めることが多くなるのではないかと考えられます。

---

カルーセル表示で、記事を読まれる確率が上がる

検索結果直下に大きく領域を取り、表示されるため、クリックされる確率が上がると思われます。さらに、記事がクリックされなかったとしても、カルーセル表示の写真+テキストを見てもらえるので、表示効果を得られるという点も見逃せません。

AMPに対応するデメリット

AMP対応前と対応後でデザインやコンテンツをうまく表現できない可能性がある

特に2次でコンテンツ利用を行っているサイトなどは、JavaScriptを多用している場合が多いため、表示できないコンテンツなどが出てくる可能性があります。

今のHTMLとAMP HTMLを「2重」で管理が必要

現在AMPは、発展途上のため現状のHTMLソースとAMP HTML両方の管理が必要です。

一部の広告タグしか利用できない

現在、AMPは記事サイトが対象のため、ほとんどの広告配信がほぼGoogleで運営されているサイトであれば問題はないと思いますが、Google以外の広告配信が出来なくなると困るサイトも出てくると思います。

---

AMP の仕組み

通常、ウェブページにアクセスするとき、リンクをクリックしてからHTMLを読み込み、ページを表示するため、その分時間がかかってしまいます。一方AMPでは、ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込みの時間を大幅に削減する仕組みとなっています。

---

AMPの構成

AMPを構成する主要素としては、以下の3つがあります。

---

AMPHTMLでのコーディング

01 : HTMLの雛形

02 : テキストの追加

03 : 画像の追加

04 : CSSを書く

AMPHTMLはHTMLなのでCSSもかけますが、headタグ内に記述のみOKでamp-custom属性が必要です。

05 : Google Analytics設置

01.headタグに下記タグを追加

02.amp-analyticsタグ(Google拡張コンポーネント)でアカウントの設定

---

まとめ

AMPは今後検索エンジンにも影響するといわれています。AMP対応ページも多く出てきており、Googleが推進していることもあり、注目を浴びています。

メリットも大きく、ストレスレスでサイトを見ることができるので、滞在時間や回遊率の向上が見込めるのでサイト改善にも役立ちます。

一方で、動的ページには向いておらず、記事ページ以外には対応していない現状なので、利用できるシーンは限られています。また、AMPに対応することによってページのデザインも多少制約されてしまうので、今後の発展に期待したい技術の1つです。