AMPとは？導入するメリット・デメリットやSEO効果と実装の対応方法を解説！

投稿日：2024/10/07

SEO

AMPとは、モバイル端末でのサイト表示を高速化させる仕組みのことです。しかしどのように導入すればいいのか、仕組みが分からず困っているという人も少なくないでしょう。

また、自分のサイトにAMPを導入してデメリットはないのかなど、気になってなかなか導入できていないという人もいるはずです。

そこで、今回はAMPについての詳しい解説とメリット・デメリット、さらに導入方法まで解説します。これを読めば、自分のサイトにAMPを導入すべきかどうかが判断できるでしょう。参考にしてみてください。

AMPとは？

AMP（Accelerated Mobile Pages）とは、モバイル端末でHPを開いた際に、高速表示される仕組みのことです。サイトがスピーディーに開けるようになるため、ユーザビリティが向上し、SEO対策にも影響を与えます。

AMPを導入しなければページ表示速度が遅くなってしまうので、自然とユーザーの離脱率が上がってしまうでしょう。ユーザーにしっかりHPを見てもらうためにも、AMPは欠かせない仕組みとなっています。

2015年にGoogleとTwitter（現・X）を筆頭にプロジェクトが立ち上げられたAMPは、モバイル端末を利用したインターネットの向上に重点を置いています。ユーザーの利便性を第一に考え作られた仕組みであるとわかるでしょう。

AMPページが高速表示される仕組み

私たちがHPにアクセスする際、通常はhtml・画像・CSS・動画などといったデータをWebサーバーにリクエストし、データをブラウザが読み込むことでページが表示されます。

そのため、AMPを使わずにモバイル端末からアクセスすると、通信環境によってはページの表示に時間がかかる可能性があります。

しかしAMPを使用すれば、これらのコンテンツデータをあらかじめキャッシュとしてGoogleやTwitter（現・X）に保存しておけるので、サーバーからデータを読み込む必要がありません。

HPにアクセスする際はキャッシュデータを使用することができるからです。だからこそ、AMPは高速表示が可能となっています。

AMPはSEOへの影響がある？優遇措置と将来性

当初、GoogleはAMPを導入しているサイトに対して、検索結果で目立ちやすくなるなどの優遇措置を行っていました。SEOの観点でもアクセスされやすいといった効果がありましたが、現在優遇措置は終了しています。

そのため、以前あった稲妻型の「AMPバッジ」は廃止、カルーセルへの表示もされなくなっています。とはいえ、SEO効果がまったくなくなったわけではありません。

AMPを導入しているサイトは、モバイルでの表示速度がこれまで通り維持されるため、ユーザーの利便性は高められやすくなります。ユーザビリティの高いサイトで、かつHPの内容がニーズにあったものであれば、検索結果の上位表示も可能でしょう。

優遇措置はないものの、AMPはSEO対策でまだまだ効果が期待できる仕組みだと判断できます。

GoogleはBento AMPを正式公開している

Googleでは現在、AMPの仕組みをより柔軟に使えるよう「Bento AMP」を正式公開しています。

これまでAMPを導入するためには、AMP専用のページを作る必要がありました。しかしBento AMPは通常のHTMLページでも導入が可能です。どんな環境下でも動かせるという大きなメリットがあります。

またBento AMPを使えば、徐々にサイト内をAMP化していくことも可能です。一度に全てのページをAMP化するのは難しくても、Bento AMPならコツコツAMP化が進められるでしょう。

これまでのAMPによる満足度の高いユーザー体験提供はそのままに、コンポーネントの分離もできるようになるなど、Bento AMPは利便性の高い仕組みです。

AMP導入のメリット

AMPはユーザビリティ向上に大きく貢献する仕組みです。AMPを導入することで、次のようなメリットがあります。

ページ表示速度が速くなり離脱率を抑えやすくなる
検索順位が上がりやすくなる
広告表示の最適化が図れる

AMPを導入すると、上記3つのメリットが感じられるようになります。ユーザーにとって使いやすいサイトだと判断されることで、SEO効果も期待できるようになるでしょう。

ここでは、それぞれのメリットについて詳しく解説します。

ページ表示速度が速くなり離脱率を抑えやすくなる

AMPを導入すると、HPのモバイル表示速度が速くなります。すぐにサイトが表示されるので、ユーザーはストレスを感じにくくなり、結果的に離脱率を抑えることにつながります。

AMPではテキストだけではなく、画像や動画の読み込み時間も短縮することが可能です。画像が表示されず、イライラして別のページに飛んでしまったという経験は誰にでもあるでしょう。AMPを導入すれば、HPを離脱することなく閲覧してもらえるようになります。

なお、2018年にGoogleが行った調査によると、HPの表示に3秒以上かかってしまう場合、ユーザーの53%がそのHPを離脱してしまうという結果が出ています。半数以上のユーザーの離脱を抑えられるようになるのは、AMP導入の大きなメリットです。

検索順位が上がりやすくなる

AMPページを作成し、モバイルでのページ表示速度をアップさせれば、検索順位が上がりやすくなります。ユーザーの利便性が高いサイトだとGoogleに判断されると、SEO順位に影響を与えることができるからです。

ただし、AMPを導入しただけで検索順位が上がるわけではありません。作成するAMPページの中身が、ユーザーニーズに最適化されているかどうかが最も大切なポイントなので注意が必要です。

万が一コンテンツの中身が伴っていなければ、たとえAMPを導入していたとしても、検索順位には影響を与えないでしょう。

コンテンツの中身が伴っているAMPページであれば、検索順位の上昇が期待できるので、SEO対策を行う際に試してみてください。

広告表示の最適化が図れる

AMPは、広告表示の最適化を図ることも可能です。

検索結果に画像やカルーセル広告が表示される「リッチリザルト」という機能があるのですが、AMPを導入することで、リッチリザルトに表示されやすくなる効果が期待できます。その結果広告が表示されやすくなり、流入数が自然と増える可能性があるのです。

広告表示が最適化され、新たな検索流入が増加すれば、サイトの知名度はますます上がっていくでしょう。集客のためにHP作成を行っているのなら売り上げに直結する可能性もあります。

このように、AMPを導入して広告表示を最適化することには多くのメリットがあります。AMPの導入によって、金銭的な恩恵も受けられるかもしれないのです。

AMP導入のデメリットや課題

AMPの導入にはさまざまなメリットがある一方で、次のようなデメリットや課題もあります。

導入やメンテナンスの手間がかかる
AMP対応していない広告がある
デザインが制限・崩れる可能性がある

上記3つのデメリットを知っておかないと、AMPを導入してもうまく使いこなすことができないかもしれません。

ここではそれぞれのデメリット・課題について解説します。自分のHPにAMPを導入しようとしているのなら、ぜひ導入前の参考にしてみてください。

導入やメンテナンスの手間がかかる

AMPを導入する際は、通常のWebページのほかに、AMP用の専用ページを作成する必要があります。通常のWebページがなければAMP用のページは作成できないので、常に2つのページを作る手間がかかるのです。

また、サイトの更新の際にはそれぞれのページの情報をアップデートしなければいけません。管理するページが通常の2倍なので、導入・メンテナンスの手間も2倍になるのです。

なおWordPressでは、AMPプラグインを用いてスピーディーにAMP化することも可能となっています。プラグインを使用すればAMP導入の手間を減らしやすくなるので、負担を抑えてAMPを導入したい場合は、あわせて調べてみることをおすすめします。

AMP対応していない広告がある

AMPページには、対応していない広告があることを覚えておきましょう。通常ページでは問題なく表示できていた広告も、AMPページでは表示できなくなる可能性があります。

特にアフィリエイトブログなどを運営している場合は、影響を大きく受ける可能性があります。広告が表示されなければクリックしてもらうこともできなくなり、結果的に広告収益が発生しなくなってしまうからです。

なお、ASP広告はAMP対応されていないケースが少なくないので、AMP導入前には、AMPページに対応している広告かどうかよく確認するようにしましょう。

ちなみにGoogleアドセンスはAMPに対応しているので、通常ページと同様に、引き続き使い続けることができます。

デザインが制限・崩れる可能性がある

AMPを導入したことで、HPのデザインが制限されたり、崩れてしまったりする可能性があります。デザインにこだわって作ったHPの場合は注意が必要です。

AMPでは読み込み速度をアップさせるため、極めてシンプルなコーディングが求められます。JavaScriptやjQueryには対応していないので、こだわったデザインを表現することができないのです。

またAMPが指定した言語以外を多く使っているHPの場合は、エラー表示となってしまい、デザインが崩れ、見栄えが悪くなる可能性もあります。どれだけ表示が早くなっても、見栄えが悪くなってしまっては、ユーザーの満足度が下がってしまうでしょう。

デザイン性にこだわりたいHPなら、AMPの導入は慎重に考えることが大切です。

AMP導入が推奨されるサイトとは

AMP導入にはメリットとデメリットの両方が存在します。それぞれを踏まえ、AMP導入が推奨されるサイトは次の通りです。

広告からの収益を狙っていないサイト
シンプルなコンテンツメインのサイト
WordPressを使用しているサイト

まずAMPは、表示できる広告に制限があります。広告からの収益メインで運用している場合は影響を大いに受ける可能性があるため、収益を狙っていないサイトのほうがAMPを導入しやすいでしょう。

またデザインの制限や崩れる可能性があることを考えると、コンテンツは極めてシンプルなほうが導入しやすいです。

そしてWordPressを使えばAMPプラグインで手間なくAMPを導入できるため、WordPressを使用しているサイトも、AMPを導入するのに向いているでしょう。

動的コンテンツが多いサイトは注意が必要

動的コンテンツとは、サイトを訪れたユーザーの行動や過去に基づき、リアルタイムでサイトを生成・更新するコンテンツのことです。AMPページで動的コンテンツを作ってしまうと、エラー表示やデザイン崩れなどが発生しやすいので注意しましょう。

たとえばログインしたユーザーに個別のメニューを表示する機能や、SNSのタイムラインなどのようにリクエストのたびに表示が変わる機能などが動的コンテンツにあげられます。

オンラインショッピングで詳細な検索条件を反映させたり、カートに商品を入れたりする行為も該当します。

動的コンテンツはユーザビリティを向上させる効果がありますが、AMPページと組み合わせると、ユーザーに不便な思いをさせてしまうかもしれません。

AMPの導入方法

AMPを導入する際は、AMP HTMLの宣言を行ったうえで、AMP HTMLファイルを作成します。標準とは異なるHTMLの仕組みが必要となるので注意しましょう。

なお、WordPressを利用すればプラグインを使ってすぐにAMPを導入することができます。HTMLの知識がないという場合は、WordPressのプラグインを利用したほうが、失敗泣くAMPを導入できるでしょう。

導入の際の基本構造は次の通りです。ここからは、それぞれの項目について説明します。

サンプルドキュメント

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

AMP HTMLの宣言

さっそくAMP HTMLのそれぞれの構造について解説します。

まずはAMP HTMLの宣言を行いましょう。

<!doctype html>
<html ⚡>

最初にHTMLページであることを宣言するタグを入れ、次にAMPに対応していることを表す「html amp lang=”ja”」を記述します。

なお「amp」は⚡の絵文字で代用することも可能です。どちらの記述でも問題ないので、使いやすいほうを選んでみてください。

headタグとbodyタグを指定する

次にheadタグ・bodyタグを指定します。

<head>
</head>
<body>
</body>

この後紹介する「meta要素の指定」「AMPのJSライブラリを読み込む」などの記述はすべてheadタグ内で行う必要があるので注意しましょう。

なおbodyタグには、ページ内で表示させる文章など、コンテンツの内容を記載します。bodyタグにAMP HTMLタグを記載しても意味がないので、記載場所には注意してください。

続いてmeta要素を指定します。

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

上記の記載を行うことで、meta要素にAMP記述をいれることができます。

なおAMPの文字コードは「utf-8」のみ対応しているため、文字コードは必ず「utf-8」を指定しましょう。また「viewport」の指定も必須となっています。

ここで「utf-8」と「viewport」を指定しなかった場合エラーコードが出てしまうので注意しましょう。

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

次に、AMPのJSライブラリを読み込んでいきましょう。

<script async src="https://cdn.ampproject.org/v0.js"></script>

JSライブラリはAMPページを表示する際、必ず設定しなければいけないので、忘れずに記載します。記載がない・タグが間違っているという場合は正しくAMPページが表示されません。

画像表示・動画埋め込み・カルーセル・フォームなど、多数のカスタム要素を読み込みたい場合は次のようなタグを記載します。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

「amp-carousel」とは、AMPページにカルーセルやスライドショーを表示するためのコンポーネントです。「amp-ad」は、広告を表示するためのコンポーネントとなっています。

amp-boilerplate要素の指定

次に、amp-boilerplate要素の指定を行っていきます。

<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>

上記はAMPページを高速表示させるために必要な定型句です。省略したり変更を加えたりすると正しく表示されないので、忘れずにそのままの文章を記載しましょう。

canonicalタグを指定する

続いて、canonicalタグを指定しましょう。

<link rel="canonical" href="./regular-html-version.html">

canonicalタグは、通常のページとAMPページが重複コンテンツではないと、認識させるために必要なタグのことです。

canonicalタグがなければ通常ページとの重複コンテンツだと判定されてしまい、SEOにおいて不利になってしまうので注意が必要です。

使用する際は上記「./regular-html-version.html」の部分を、通常ページのURLに変更してください。

アノテーションを設定する

最後にアノテーションを設定しましょう。

<link rel="amphtml" href="AMPページURL">

こちらは通常ページのheadタグ内に記載します。通常ページにAMPページがあると、検索エンジンに認識させることのできるタグです。

このタグを記載しておくことで、モバイルでサイトを表示させた場合、通常ページではなくAMPページが表示されるようになります。AMPページのタグ内に設定しても意味がないので、必ず通常ページで設定するようにしましょう。

WordPressでAMPを導入する方法

ここまでAMPの導入方法を解説してきましたが、HTMLタグの知識がない人にとっては、かなりハードルが高く感じられるはずです。

しかし、WordPressを使用しているユーザーであれば、プラグインを利用することでAMPをスピーディーに導入することができます。HTMLタグの知識がそれほどないという人でも設定しやすくなるので、ぜひプラグインを活用してみましょう。

ここではWordPressでAMPを導入する方法を紹介します。WordPressでブログやサイトを作っている方はぜひ参考にしてみてください。

AMPプラグインをインストールする

WordPressでAMPを導入するために、まずはAMPプラグインをインストールしましょう。

AMPプラグイン

上記ページからダウンロードを行い、FFFTPソフトでWordPressにアップデート、プラグインメニューから有効化することでインストールができます。

WordPressのダッシュボードから、以下の手順で簡単にインストールすることもできます。FFFTPソフトの利用などが面倒な人は以下の手順を試してみてください。

ダッシュボードの「プラグイン」を選択
「新規追加」を表示
「AMP」を検索
表示されたAMPプラグインをインストール
インストール後に「有効化」をして完了

これで、HPが自動的にAMPに対応します。

Googleアナリティクスも設定する

AMPを有効化させたら、Googleアナリティクスの設定も同時に行っておきましょう。Googleアナリティクスの設定手順は次の通りです。

ダッシュボードの「AMP」を選択
「アナリティクス」を表示
ページ内の「アナリティクス」から「+」を押す
以下のコードを記載
保存して完了

記載するコードは次の通りです。

{
    "vars": {
            "account": "UA-アナリティクストラッキングID"
    },
    "triggers": {
            "trackPageview": {
                    "on": "visible",
                    "request": "pageview"
            }
    }
}

アナリティクストラッキングIDの部分には、自分のトラッキングIDを記載しましょう。保存すると、AMPページにGoogleアナリティクスが設定できます。

AMPページが有効か確認する方法

AMPページが有効かどうかを判断する方法は非常に簡単です。

以下のサイトにアクセスし、AMPページのURLを入力するだけで有効かどうかが判断できます。

AMPテスト

上記のサイトでテスト後「有効なAMPページです」と表示されれば、AMPが正しく導入されていることになります。

ただし「AMPページではありません」などと表示された場合は、AMPが有効になっていません。問題点が表示されるので、問題を修正し、もう一度AMPテストを行うようにしましょう。

なお、このサイトではAMPのコードを検証することもできます。サイトを実装する前にコードを検証し、有効性をチェックするのもおすすめです。使いやすいほうで検証してみてください。

AMPを導入して検索順位を向上させよう

AMPを導入すると、モバイルでのサイト表示速度が格段にアップし、ユーザビリティの向上につなげることができます。ユーザーにとって使いやすいサイトだとGoogleが判断すれば、検索順位の向上も期待できるでしょう。

その一方でAMPは、導入や運用の手間がかかってしまったり、サイトによってはデザインが崩れたりというデメリットも存在します。自分のサイトに導入することが適しているかどうかも踏まえ、AMP導入を検討してみることが大切です。

ただし、WordPressユーザーならプラグインのインストールですぐにAMPが導入できるので、そこまで手間に感じる心配はないでしょう。

検索順位の向上を求める際は、ぜひAMPの導入を検討してみてください。

RELATED 関連記事

RANKING ランキング

WEEKLY
MONTHLY

UPDATE 更新情報

ALL
ARTICLE
MOVIE
FEATURE
DOCUMENT