AMP（アンプ）とは？モバイル端末でページを高速化する仕組みや導入方法を解説
SEO対策の一環として、AMP（アンプ）を導入するWebサイトが増えています。自社のWebサイトのGoogle評価を上げるために、「これからAMPを導入したい」と考えている方も多いのではないでしょうか。
本記事では、AMPの仕組みや機能、導入方法、導入のメリット・デメリットなどを解説していきます。
>>>初心者向けSEO対策の基礎知識と重要性に関してはこちら
1.AMPとは？
1-1.AMPの目的
1-2.AMPの主な機能
2.AMPの仕組み
2-1.AMP3つの構成要素
2-1-1.AMP HTML
2-1-2.AMP JS
2-1-3.AMP Cache
3.AMPの導入で期待できるメリット
3-1.クリック率が向上する
3-2.検索順位を上げられる
3-3.新たな検索流入の増加
4.AMPの導入で注意すべきデメリット
4-1.運用に手間がかかる
4-2.コンバージョン・アクセスが減ることがある
4-3.スムーズに実装できないことがある
5.AMPの導入方法
5-1.ワードプレスを使用する場合
5-2.タグを埋め込んでいく場合
6.AMPの導入でユーザーが使いやすいWebページ作成が可能
1.AMPとは？
AMPとは、Accelerated Mobile Pagesの略であり、GoogleとTwitterが2015年に共同で立ち上げたオープンソースプロジェクトです。基本的にはスマートフォンやタブレットのようなモバイル端末において、Webページを高速表示する仕組みを指します。
AMPによって制作されたWebページは、Googleの検索結果画面のURLの左横に雷マーク（グレーの円内にホワイトのギザギザマーク）が表示されます。
この章では、AMPの目的と主な機能について解説します。
1-1.AMPの目的
一般的なAMPの目的は、モバイル端末におけるホームページの高速表示です。ホームページの表示速度が遅ければ遅いほど、ユーザーがページを離脱する可能性が高くなります。特にスマートフォンユーザーは離脱しやすい傾向です。
また、AMPを実装することで、モバイル ページの表示速度が約4倍、データ量が約1/10になるといわれています。その結果、ユーザーは待ち時間というストレスを感じることなく、スムーズにホームページを閲覧できます。
主にAMPに対応しているのは、ニュースメディアや飲食店の情報サイトなどの情報サイトです。
1-2.AMPの主な機能
AMPの主な機能に以下があります。
- amp-analytics
- AMPストーリー
- AMPとSEO
amp-analyticsとは、AMPドキュメントからアナリティクスデータを収集する機能です。データの送信機能に関しても実装されています。
AMPストーリーは、一連の情報をスワイプして閲覧できる機能です。動画や画像を利用した表現が可能になります。
また、AMPによってSEOの効果が期待できます。表示速度の向上はユーザビリティの改善に繋がると考えられるため、検索エンジンの評価がアップする可能性があるからです。
なお、上記はあくまでもAMPの機能の一部なので、最新情報は公式サイトで確認しましょう。
2.AMPの仕組み
Googleなどの検索結果からWebページにアクセスする際、まずはサイトのサーバーにリクエストします。次にHTML、CSS、画像ファイルなどを読み取り、レンダリング（生成）してからページが表示されます。
工数が多い分、読み込み完了までに時間がかかるケースが多いでしょう。
一方、AMPに対応している場合、GoogleやTwitterがあらかじめサイト情報をキャッシュとして保存しているため、ユーザーにHTML、CSS、画像ファイルなどの情報が直接受け渡される仕組みとなっています。
その結果、ページが表示されるまでの時間が大幅に短縮されるのです。
ここからAMPを構成する主な3つの要素を解説します。
2-1.AMP3つの構成要素
AMPの主な構成要素は以下の3つです。
- AMP HTML
- AMP JS
- AMP Cache
それぞれの具体的な内容について解説します。
2-1-1.AMP HTML
AMP HTMLは通常使用されるHTMLに特別なルールを加えたものです。「いくつかのタグは利用できない」「いくつかのタグの特定の属性は利用できない」「CSSの一部プロパティは利用できない」など、いくつかの制限が課されています。
AMP HTMLを利用することでページ表示の高速化につながりますが、文法を正確に理解しなければなりません。
2-1-2.AMP JS
AMP JSはJavaScriptのライブラリです。利用することで動画や画像のロードと表示方法が制御されるため、「ページが素早く表示された」とユーザーが体感しやすくなるというメリットがあります。
2-1-3.AMP Cache
AMP Cacheとはコンテンツ配信ネットワーク（CDN）であり、AMPページが一時的に保存されている場所です。
AMP Cacheを利用することで表示が高速化します。本来のWebサイトにアクセスすることなく、直接ページが表示されるためです。
3.AMPの導入で期待できるメリット
AMPの導入で期待できる主なメリットは以下の3つです。
- クリック率の向上
- 検索順位のアップ
- 新たな検索流入の増加
それぞれについて解説します。
3-1.クリック率が向上する
AMPに対応しているWebページは、Googleの検索結果にAMPマークが表示されるため、ユーザーの利便性向上によって、クリック率の増加が見込めます。
つまり、AMPについて理解しているユーザーは、AMPマークがあることで「読み込み速度が早いから素早くページが表示される」と判断しやすいため、他のページよりも優先的にクリックされる可能性があるということです。
3-2.検索順位を上げられる
AMPの導入によってサイトの表示速度がアップするため、検索順位の上昇が期待できます。基本的にGoogleは、表示速度が遅いサイトよりも、早いサイトを評価するためです。
サイトの表示速度が速くなれば必ず検索順位が上がるというわけではありませんが、快適な速度環境を整えておくことで少なくとも順位が下がることを回避できるでしょう。
サイトの表示速度は、軽微な評価と考えられているため、検索クエリとの関連性が高い良質なコンテンツを最適化しながら、SEO対策を進めることがポイントです。
3-3.新たな検索流入の増加
AMPページを公開することで新たな検索流入の増加が見込めます。
たとえば、検索機能にはカルーセル（Webページにおける画像などの表示領域）やリッチリザルト（通常のリンクよりも高度な機能を持つGoogleでの検索結果）があります。
構造化データをマークアップしたAMPページの公開によって検索機能に表示されやすくなります。これにより、新しい検索流入の獲得が期待できます。
4.AMPの導入で注意すべきデメリット
AMPの導入で注意すべき主なデメリットとして下記の3つを解説します。
- 運用に手間がかかる
- コンバージョン・アクセスが減ることがある
- スムーズに実装できないことがある
4-1.運用に手間がかかる
管理ページの増加で運用の手間がかかる点が、AMP導入の1つ目のデメリットです。AMPを導入する場合、正規ページに加えて、AMP HTMLでAMPページを作成しなければなりません。ページごとに正規ページとAMPページを管理する必要があるので、運用の手間が増えます。
ただし、ワードプレス（WordPress）でサイトを構築することにより、比較的スムーズにAMPを導入できます。プラグインで動的なAMPページを生成できるため、AMP HTMLを作成する手間を省略できるからです。さらにページごとのAMP化、非AMP化の切り替えも可能です。
なお、ワードプレスでの導入方法に関しては5-1で詳しく後述します。
4-2.コンバージョン・アクセスが減ることがある
AMPの導入によって、アフィリエイトサイトのコンバージョンが減る可能性があります。
主なアフィリエイト広告の種類にはASP広告とアドセンス広告があります。ASP広告はASP（アフィリエイト・サービス・プロバイダ）を利用した成果報酬型の広告、アドセンス広告はGoogleが提供するクリック型報酬の広告です。
そのうちASP広告に関しては、AMPページ対応の広告が限られているため、広告を掲載しても表示されず、コンバージョンが減少しかねないというデメリットがあるのです。
なお、アドセンス広告はAMPに対応しているので問題ありません。
4-3.スムーズに実装できないことがある
AMPをスムーズに導入できないことがあります。その場合は以下のようなエラーが表示されるでしょう。
- コンテンツの不一致:：埋め込み動画なし
- 推奨サイズより小さい画像を指定してください
- AMPページのドメイン不一致
- URLが見つかりませんでした（404）
- サーバーエラー（5xx）
- robots.txt によりブロックされています
- クロールエラー
- 参照しているAMP URLはAMPではありません
- 参照しているAMP UR はスタンドアロンAMPです
※引用元：AMP テスト – Search Console ヘルプ
上記のようなエラーが表示された場合、1つずつ原因を究明し、修正したうえでAMPページを公開する必要があります。
5.AMPの導入方法
前述したようにAMPを導入する際はワードプレスを使用するとスムーズです。ここではワードプレスを使用する場合と、タグを埋め込んでいく方法の2つを紹介します。
5-1.ワードプレスを使用する場合
ワードプレスを使用してAMPを導入する場合、基本的に下記の流れで進めます。
- プラグインのインストール
- ページURLの末尾に「amp/」を加える
- ページURLの末尾に「#development=1 」を加える
- 「Glue for Yoast SEO & AMP」をインストール・有効化
- GoogleアナリティクスのトラッキングIDを取得・置換
まずはワードプレスの管理画面を開き、「AMP for WordPress」というプラグインをインストールして有効化します。次にページURLの末尾に「amp/」を加えます。元のURLの末尾が「aaa/」であれば「aaa/amp/」と追加するイメージです。
その後、AMPページが有効かどうかを確認するため、URLの末尾に「#development=1 」を入れてGoogle Chromeのアドレスバーに入力します。その後にデベロッパーツールを表示して「Console」を選択し、「AMP validation successful」と表示されれば問題ありません。
次に、「Glue for Yoast SEO & AMP」というプラグインをインストールして有効化します。デザインのカスタマイズとGoogle Analyticsのトラッキングコード設置のためです。その後にGoogle Analyticsの設定を行えば完了です。
5-2.タグを埋め込んでいく場合
AMPの導入にはタグを埋め込んでいく方法もあります。主に下記の流れで進めます。
- AMP HTMLの宣言
- meta要素の指定
- 構造化マークアップ
- ライブラリの読み込み
- AMPが正しく実装されているか確認する
通常のHTML文書と同様に、まずはAMP HTMLの宣言を行います。次にmeta要素として、文字コードをUTF-8に指定します。meta nameにはビューポートの指定も必須です。
ページ構造をクローラーに伝えるために構造化マークアップを行った後、AMPの表示に必要なライブラリを</head＞タグ内の上部に記述します。その後にAMPテストというツールを使用して、AMPが正しく実装されていれば完了です。
6.AMPの導入でユーザーが使いやすいWebページ作成が可能
AMPとは、モバイル端末でWebページを高速に表示する仕組みです。主な要素として、AMP HTML、AMP JS、AMP Cacheの3つで構成されています。
AMPの導入によってクリック率の向上、検索順位のアップ、新たな検索流入の増加というメリットが期待できる一方、運用の手間、コンバージョン・アクセスの減少、実装の難しさには注意が必要です。
実際にAMPを導入する際は、タグを埋め込んでいく方法もありますが、ワードプレスを使用するとスムーズに実装できるでしょう。
AMPに関することなど、サイト制作でお困りの方は、ぜひ株式会社ココエまでご相談ください。
株式会社ココエでは、実践型DX教育プログラムを提供しています。企業様の課題に対してサイト制作やデジタルマーケティングなどのサポートが可能です。
また、ビジネスに活用できる知識を学べる「DXリテラシー基礎講座」を行なっています。役職問わず学べるオンライン講座となっているので、ぜひご活用ください。
>>>DXリテラシー基礎講座について詳しくはこちら
>>>お問い合わせはこちら。
>>>株式会社ココエについて1分でわかる資料請求はこちら。
