AMPとは？仕組みやメリット・デメリットと導入方法をわかりやすく解説

AMP（アンプ、Accelerated Mobile Pages）とは、Googleによって開発されたWebページを高速で読み込む技術のことです。

AMPにはユーザーエクスペリエンスを向上し、SEOに大きなメリットをもたらすことができます。

このページでは、AMPとはどのようなものか、仕組みやSEOへの効果やメリット＆デメリットをわかりやすく解説していきます。さらに後半では具体的な対応方法まで徹底的に解説しています。

モバイルユーザーに対し、SEO対策の1つとなるAMP対応を検討してみましょう。

AMPとは？仕組や重要とされる背景を解説！

AMP（アンプ、Accelerated Mobile Pages）とは、スマホ等のモバイル端末におけるブラウザのページ高速表示化のシステムです。

GoogleがTwitterと共に開発した仕組みで、SEOにおいても非常に重要な要素となります。

AMPの仕組み

AMP用のページは、通常より高速でページ情報を表示することが可能です。

AMP対応ページを表示するときは、GoogleやTwitterなどがあらかじめ取得したコンテンツ情報のキャッシュが使われるため、WEBページを高速で表示することができます。これがAMPの仕組みです。

通常、Googleなどの検索エンジンを使って表示されたWEBサイトへのリンクをクリックすると、そのページに含まれるHTMLや画像、動画データをWebサイトが置かれているサーバーにリクエストします。その後、サーバーからのデータをブラウザが読み込み、コンテンツを表示するため、コンテンツが表示されるまでには時間がかかります。

ページ内のHTMLが複雑で、画像などが多いコンテンツほど情報の読み込みに多くの時間を要するので、ユーザービリティを阻害してしまうことになります。SEOの観点からも、ページ表示速度が遅いとGoogleからのサイト評価を下げることになるため、無駄なくページを作成することは重要です。

もし、AMP対応をしていれば、WEBページのHTMLなどコンテンツの内容をGoogleやTwitterなどが取得したキャッシュを利用できるので、WEBページの読み込み時間を大幅に削減することができます。

もっと簡単に言えば、AMPページなら通常のWebページよりより高速で表示することが可能、ということです。

SEOにおいてAMPが重要視される背景とは？

「スマートフォンやタブレットなどのモバイル端末からのネット利用が、とうとうPC利用者を追い抜かした」。このニュースは2016年のものです。

*引用元：2016年11月2日、TechCrunch「モバイルからのインターネット利用がついにデスクトップを追い越す― StatCounter調べ」

当時、検索市場の全トラフィックに占めるモバイルユーザーが51.2%と過半数を占めていました。ユーザーの利用端末が変化することに合わせ、Googleは2018年3月より正式にモバイルファーストする発表。

そして、2021年3月からは、全てのWEBサイトがモバイルファーストインデックス（MFI）に完全移行されたため、もはやSEO対策においてモバイルページの最適化は避けて通ることができない重要な対策項目となっています。

そんな中、モバイルユーザー向けのページ表示速度を高速化することができる技術として、AMPが注目され始めました。

事実、Googleが掲げる10の事実において「遅いより速いほうがいい。」とページ表示速度が速いことを推奨しております。

3. 遅いより速いほうがいい。
Google は、ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したいと考えています。

引用元:https://about.google/philosophy/?hl=ja

こうした背景よりAMPはSEO効果のある対策として注目されるようになりました。

AMPに向いているコンテンツとは？

Googleによると、AMPは「静的なWebサイト」でその効果を発揮すると公言しています。

AMP は、あらゆるタイプの静的なウェブ コンテンツ（ニュース、レシピ、映画情報、製品ページ、レビュー、動画、ブログなど）で大きな効果を発揮します。

引用元:https://developers.google.com/search/blog/2016/09/8-tips-to-amplify-your-clients?hl=ja

上記のように、AMPは主にテキストベースのコンテンツに向いており、画像や動画を多用するウェブページには向いていません。

また、AMPはモバイルでのページ表示速度を向上できるため、モバイルフレンドリーなWebサイトに特に適しています。ページの読み込み速度が速いことでユーザーのストレスを軽減でき、より利便性を高めることができます。

静的サイトについては『静的サイトと動的サイトとは？それぞれの違いや特徴、仕組みをご紹介』で詳しく解説しているので、ご参照ください。

AMPのSEO効果とは？

検索順位への影響力

前述したように、AMPに対応することはWEBページの高速表示を実現できるため、SEO効果が見込めます。

Googleは2018年1月に、ページ表示速度をランキング要素に使用することを明言しているので、AMPを導入してページスピードを向上することができれば、その分SEO評価が高まり、検索順位の上昇に繋がります。

ページの読み込み速度をモバイル検索のランキング要素に使用します

引用元:https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search.html?hl=ja
逆に、ページを表示する速度が遅いサイトは、GoogleからSEOの低評価を受けるので、悪影響を及ぼすことになります。

例えばGoogle Chromeのデータによると、モバイルWEBサイトでブラウザのページ読み込み時間が3秒以上になると、53%のユーザーがサイトへの訪問を途中で断念するとのこと。

また、ページの表示速度が1秒でも遅くなると、以下のような悪影響が生じると言われています。

そのため、もしAMPを実装しないとしても、ページ速度がGoogleのランキング要素となっている以上、読み込み速度の改善はSEOで必須です。なお、AMP対応のページを作成できるのはモバイルのみとなるので、特にスマホユーザー向けたSEO施策と言えるでしょう。

優先措置の終了

2021年4月にGoogleは、AMPページの優先措置の終了を発表しました。

それまではAMPページが優先されて検索結果に表示されており、具体的に以下のような優先措置がされていました。

優先措置が終了されてから、現在は全てのコンテンツにおいてSEO評価が平等にされています。以前ほどのメリットはありませんが、ページ表示スピードが速いに越したことはないため、AMP対応はSEO効果をもたらす施策になります。

以上、AMPページのSEO効果について解説しました。

SEO対策におけるAMPのメリット

AMPを導入したWEBサイトは、モバイルフレンドリーな内容と評価されるため、SEO施策で有効な対策となります。

しかし、どんなに有効なSEO施策にもメリットがあればデメリットもあるもの。ここからは、SEOでAMPを実施することによるメリット・デメリットについて解説していきます。

SEO対策においてAMPを導入するメリットは、主に次の3つがあります。

離脱率の低減や滞在時間・回遊率向上に役立つ

AMP対応のページの最大のメリットは、モバイルからアクセスしたときにページ表示スピードが速くなること。SEOにおいてユーザーの利便性は一番大切なポイントであり、表示スピードが速くなればユーザーの待ち時間はほとんどなく、ストレスフリーな快適な閲覧が可能になります。

また、スクロール速度も高くなるため、離脱率の低減や滞在時間・回遊率（エンゲージメント）の向上が期待できます。

間接的なSEO対策として検索順位の向上が見込める

前提として、AMPページを使用することは、検索順位そのものに直接的なSEO効果を与えるわけではありません。あくまで順位を決めるのはコンテンツ内容です。

しかし、Googleは、高速で使いやすいページをより良いユーザーエクスペリエンスを提供すると考え、検索結果で優先する傾向があります。

そのため、AMP対策で表示速度が改善されることにより、間接的にSEO評価を高めることができ、検索順位に良い影響を与える可能性があります。

広告表示の最適化が見込める

AMPは、広告の表示に必要なコードを最適化し、読み込み速度を最大限に高めることができます。

AMPには、広告配信に関するいくつかのタグが用意されています。

例えば、「AMP Adタグ」は、AMPページに広告を表示するためのタグであり、広告配信のための機能や規則を規定しています。

AMP導入のデメリットとは？

一方、SEO対策において、AMP導入によるデメリットは次の2つが考えられます。

SEO担当の工数が発生する

AMPページは、通常のHTMLページとは異なり、AMPの仕様に沿って設計されたページでなければなりません。そのためSEO担当にとっては、AMP専用ページを作成する手間が生じるというデメリットがあります。

もし、CMSにWordPressを利用している場合は、プラグインを利用することで、AMPページを簡単に作成できたり、既存ページをAMPに変換することも可能です。

デザインが制限される

元のページに様々なデザインを加えている場合は、安易にAMP対応すると大きくユーザビリティを損ねてSEOでも悪影響を及ぼす危険があるので注意しましょう。

AMPは、画像やHTMLデザインなどをできるだけ簡素にして読み込み速度を高めようとするため、サイトの見た目などがガラッと変化する可能性があります。

そのため、AMPページを作成した後は、必ずGoogleサーチコンソール（Search Console）の「AMPテスト」でチェックするようにしてください。作成したAMPページが実際に画面に表示されたときのデザインや見た目を確認することができるので、エラーや崩れがないかチェックしましょう。

SEO対策に効果的なAMPの導入方法を徹底解説！

GoogleがモバイルフレンドリーなWebサイトを推奨していることを考えると、AMPで作られたページのSEO効果は高くなることでしょう。

ここからは、AMPの具体的な導入方法をお伝えします。

あらかじめご注意いただきたい点として、前述したようにAMPページ作成や導入には時間を要します。モバイルユーザー専用の担当者をつけて実施するなど、できるだけ作業を分担させて効率化することをおすすめします。

基本デザインとテンプレート

AMPを実施する場合、必ずHTML上に必要なタグや機能の記述が必要です。ただ、基本的な記述式には統一性があるため、以下のテンプレートが便利に利用できます。

AMPページのHTMLテンプレート

<!doctype html>
<html amp lang="ja">
  <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/ja/documentation/guides-and-tutorials/start/create/basic_markup?referrer=ampproject.org

基本的に上記HTMLコードをそのままコピーすることでページを作成できますが、AMPに必要な記述式だけは最低限覚えておきましょう。詳しくは以下をご参照ください。

HTMLを使った対応方法

HTMLを利用してAMP記述式を書いていくには、最低限、以下で紹介するHTML宣言やmeta（メタ）要素などを覚えておいてください。

AMP HTML宣言

<!doctype html>
<html amp lang="ja">

HTMLの最上部には、HTMLページであることを宣言する「!doctype html」を記載しますが、そこでAMPに対応する文言である「html amp lang="ja"」も入れておきます。

上記の「amp」という部分は、「⚡」で置き換えても表現可能です。

meta（メタ）要素のAMP記述

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

meta要素にAMP内容を記述する場合、上記のように指定します。

AMPはUTF-8にのみ対応ということもあり、文字コードとして「utf-8」という指定は必須です。また、「viewport」指定も必要なので、両者を忘れずに記述しておきましょう。

構造化マークアップ

AMPには「構造化マークアップ」が必要で、記述していないとサーチコンソールでエラーが出てしまいます。次のようにマークアップ設定を行ってみてください。

<script type="application/ld+json">
   {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "headline": "Article headline",
     "image": [
       "thumbnail1.jpg"
     ],
     "datePublished": "2022-12-05T08:00:00+08:00"
   }
   </script></script>

構造化マークアップとは、記事タイトルや概要などに意味をつけ足して、GoogleのクローラーがHTMLを瞬時に判断できる施策のことです。

SEO対策としても大きな効果があり、商品評価（星5つで評価）やイベント日などの情報を検索結果上に表示することが可能で、ユーザーのCTRや利便性の向上などに大きく寄与します。

構造化データのマークアップについては『構造化データとは？メリットやマークアップ方法について解説』で詳しく解説しているので以下をご参照ください。

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でページを高速化するため、定型句（ボイラープレート）と呼ばれる上のような記述（amp-boilerplate要素）が必須です。

AMP用のJSライブラリ記述

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

AMPページを正確に表示させるため、AMP JSライブラリの読み込み情報をHTML上に記載しておきます。AMP JSライブラリの記述がないとAMPページが正しく反映されないため、必須の情報といえるでしょう。

AMPのカノニカル（canonical）設定

<link rel="canonical" href="【オリジナルページのURL】">

カノニカル設定とは、同じドメイン内の重複したコンテンツを一つに統合して検索エンジンに伝える方法です。

AMPページは、元々1つの情報コンテンツをモバイルユーザー向けに高速化した別ページとして複製して作成します。そのため、カノニカル設定がないAMPページは重複コンテンツとしてGoogleからペナルティを受ける危険性があるのです。

必ず上記のようなカノニカル設定をHTML内に記述しておきましょう。

canonicalタグについては『【必読】canonical（カノニカル）タグとは？意味や書き方、SEOにおける必要性を解説』にまとめてあります。ぜひご参照ください。

AMPのアノテーション設定

<link rel="amphtml" href="【対象のAMPページURL】">

カノニカル設定を行ったAMPページには、同時にアノテーション設定も行っておきます。

アノテーション設定もカノニカル設定と同じく、AMPページと元ページが重複した別々のコンテンツページとしてGoogleに誤認されないように設定する方法です。

CMSのプラグインやAMP対応テーマを使った方法

WEBサイトを作るときに使用するCMS（コンテンツ管理システム、英：Content Management System）でもAMPページを作成することが可能です。

AMP対応できる有名なCMSには、「WordPress（ワードプレス）」や「はてなブログ」などがあります。

大規模なWEBサイトや動的コンテンツの多いECサイトの場合、AMP対応のためのシステム開発に一定の期間や費用が必要です。

しかし、WordPressで運用中のブログサイトや静的コンテンツが中心のWEBサイトなら、無料のAMP対応テーマやAMP化プラグインを利用して簡単に実装する方法もあります。

AMPに対応したWordPressテーマ（無料・有料）は徐々に増えてきているので、そうしたテーマにテンプレートを変更することで簡単にAMP対応ができます。また、無料のWordPressプラグイン「AMP」などを使っても簡単に実装が可能です。

なお、AMPプラグインでの対応は簡単な一方で、既にインストールしている他のプラグインと競合して不具合を起こしたり、サイトデザインが大きく崩れたりする可能性もあるため、SEO上も基本的には、AMP対応テーマを使用してAMPページを実装することをおすすめします。

ちなみに、はてなブログは有料プランの「はてなブログPro」に加入しないとAMPの配信設定はできません。

AMP対応後のチェック手順

続いてはAMP対応後のチェック方法について解説します。いずれの実装方法でも、AMP対応する際は記述ルールに沿った正しいAMP HTMLが生成しているかの確認・チェックが必要です。

以下の手順に従って、エラーが発生していないか必ず確認しましょう。

まとめ

AMPに対応するとモバイルユーザー向けに、ページコンテンツを高速表示できるのでSEO効果が見込めます。Googleはページの読み込み速度をランキング要素だと明言しているので、AMPを実施してページスピードを向上させることは、サイトの評価に大きく影響するSEO効果の高い施策だと言えるでしょう。

今回はAMPの具体的な実施方法を紹介してきましたが、対応するにはどうしても手間がかかってしまいます。特に一人でサイトを運営している方にとっては、大変な作業時間となるでしょう。

Googleは「AMP対応でなくても、モバイルのページ表示速度が上がれば良い」とも話しているので、まずはAMP以外の方法でもいいので、とにかくページの表示速度を改善することが重要です。余裕ができたタイミングでコンバージョンページなど必要な部分からAMPを導入してモバイルファーストを実施してみてください。

ページスピードの改善方法をはじめとした、SEOに効果的な内部対策について以下のページでまとめて紹介しているので、ぜひ、ご一読ください。