AMPとは？仕組みや導入するメリット・デメリットについて解説

AMPとは

AMPとはgoogleとTwitterが共同で開発しているプロジェクトです。
Accelerated Mobile Pageの頭文字をとり「アンプ」と呼ばれています。

文字通りモバイルページを高速で表示させるためのフレームワークでモバイルのニーズが高まり続けている為、なにかと注目されているプロジェクトの一つです。

AMPの仕組み

AMPが高速でページを表示できる仕組みの一つがキャッシュです。
通常WEBページを閲覧する際は、サイトがあるサーバーに対してリクエスト、ファイルの取得、レンダリングの工程をふみますが、AMPはあらかじめgoogleがキャッシしたページを表示させるため、通常のページを表示させる工程を大幅に短縮しています。

その為基本的にはAMPページのURLはgoogleドメインとなりオリジナルのURLとは異なるURLで表示されます。

また、AMPページを構成するHTMLやCSS、JavaScriptも通常のページと異なり、使用できるものを制限することでファイルサイズがとても軽くなっています。

JavaScriptは非同期のみ許可されており、CSSも外部ファイルの読み込みは禁止されている為、レンダリングをブロックすることなくスピーディーなページ表示を実現しています。

AMPのメリット

それではAMPを導入することでどのようなメリットがあるか見ていきましょう

離脱率の改善

モバイルからのアクセスの場合、ページの読み込みに3秒以上かかるページは53%のユーザーが離脱してしまうというというデータがあります。
AMP最大のメリットはページの表示速度の向上にあることからAMPの導入により離脱率の改善が期待できます。

CVRの改善

離脱率と同様に、表示速度が1秒遅くなるとCVRは7%落ちるというデータもあります。
AMPページであれば瞬時にページを表示させることができる為CVRの改善につながる可能性があります。

クリック率の改善

AMPページはインデックスされると⚡が表示される為、通常のページより目を引く可能性が考えられます。

AMPのデメリット

反対にAMPのデメリットとなりうる要素を紹介します

制限が多い

JavaScriptやCSSに制限があるため、どうしてもシンプルなデザインになりがちです。
リッチな表現が多いサイトをAMP対応させるには大幅なデザイン変更が必要になるケースがあります。

広告に制限がある

広告配信が設定されているページではAMPでは設置できないケースがあります。
結果としてコンバージョンが低下する可能性があります。

運用コストが高くなる

通常のページとAMPページの両方で品質管理が必要になります。
また、アナリティクスの設定も通常ページと異なるため、新たにタグの設定をする必要があります。タグマネージャーを使用する場合でもAMP用に設定が必要です。

AMP対応するには？

それでは具体的にAMPを導入するにはどのようなことをするのか解説します。
まず前提として、AMPを導入する際、サイト全体をAMP対応させる必要はありません。

AMP対応させたいページのみで問題ありません。
例えばコーポレートサイトの場合、ブログページのみAMP対応させるといったイメージです。
このようにすれば、ブログページ以外はリッチなデザインを採用することができ、AMPと相性のようテキスト情報が多いブログのみAMPにすることが可能です。

静的なページの場合

それではAMPの対応方法ですが、基本的にはHTMLとは別にAMP HTMLを作成する必要があります。

前述のとおりかなり制限のある記述になるため、テンプレートに沿って作成していく必要があります。

AMPの公式ページに掲載されているサンプルコードを見てみましょう。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

引用：https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/?referrer=ampproject.org

基本的なHTMLのルールはここでは割愛させていただきますので、AMP HTML独自のモノを紹介します。

AMP宣言

最上位階層のタグを

（もしくは

）でマークアップします。
これでAMPページであることを宣言します。

AMP JSライブラリの読み込み

によってアンプJSライブラリを読み込みこみます。なお、これ以外の外部JSの読み込みは禁止されています。
反対にAMP以外のページでAMPライブラリJSは読み込み可能です。

正規ページの指定

で通常ページのURLを指定します。通常のcanonicalと考え方に違いはありません。

ビューポートの設定

によってレスポンシブなビューポートの指定をします。

独自スタイルシートの適用

外部ファイルの読み込みは禁止されている為下記のようにCSSの追加を行います。

・画像の挿入方法
通常のimgタグは使えません。下記に置き換える必要があります。

WordPressの場合

WordPressのAMP化はプラグインがありますので比較的簡単にAMP化することが可能です。
プラグインから「AMP」と検索しインストールしてみてください。

もちろんhttps://wordpress.org/plugins/amp/から直接ダウンロードして使用することも可能です。

使用方法はプラグインを有効かした後、設定からどのようにAMPかさせるかを3つのタイプから指定します。

Standard（スタンダード）

サイトを完全にAMP化し、AMPページのみでサイトを配信します。通常ページは配信されません。

Transitional（トランジショナル）

通常ページとAMPページの両方を配信します。
通常ページのテーマを自動でAMPページ向きに変換します。レイアウト崩れが起きる可能性もあるため慎重に使用しましょう。

AMPページはURLの末尾に/amp/を付けることで遷移することが可能です。

Reader（リーダー）

通常ページとAMPページの両方を配信します。
Transitionalと異なりAMP用のテーマから選択されます。Transitionalでうまくテーマが変換されない場合に使用するといいでしょう。

完成したAMP HTMLはAMPテストツールを使用してエラーがないか確認しましょう。https://search.google.com/test/amp?hl=ja

AMPのSEO効果は

それではサイトをAMP化することでSEOにどのような効果があるのか。
まず、AMP化されているかという点のみでSEOに有利になることはないと公式に言及されています。

ただし、モバイルページの重要性が高まっている現在、ページスピードが改善することでユーザビリティが向上するのであればSEOにプラスに働くでしょう。

現在モバイルではページスピードがランキング要素となっている（ただし、影響はごく僅か）ことからも、AMP化によりページスピードが改善されるのであればSEOに有利に働く可能性は十分考えられます。

AMPの今後

モバイルから検索した際のトップニュースの掲載枠はAMPページの特権でしたがCore Web Vitalsの発表と合わせて、この要件からAMPページであることが外されました。

このことから、AMPページの重要性が低まっていると感じる方もいるかと思いますが、Core Web Vitalsの発表があったようにモバイルのユーザビリティはますます重要になっています。
AMP化することが重要ということではなく、ユーザビリティを高める施策の一つにAMPという選択肢があるという意識が重要になってくると思われます。

BLOGブログ