AMP（アンプ）とは？SEO効果とメリットを徹底解説【導入マニュアル】

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

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

本記事では、AMPとは何か？、仕組みやSEOへの効果、メリット・デメリットをわかりやすく解説していきます。さらに後半では具体的な対応方法まで徹底的に解説していきます。

SEOにおいて、今後ますますモバイルユーザーに対する重要性が高まってくるので、ぜひSEO対策の1つの選択肢としてAMP対応を検討してみましょう。

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

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

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

AMPの仕組み

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

通常、私たちがGoogleなどの検索エンジンを使ってWEBページを見るとき、私たちがWEBサイトへのリンクをクリックしてから、Googleはそのページに含まれるHTMLや画像、動画データを読み込んでコンテンツを表示しています。そのため、WEBページをクリックしてからコンテンツが表示されるまでには時間がかかるわけです。

ページ内のHTMLが複雑で、画像などが多いコンテンツほど情報の読み込みに多くの時間を要するので、ユーザービリティを阻害してしまうことになります。SEO的にもGoogleからのサイト評価を下げることになるので良くありません。

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

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

スマホなど“モバイルからのネット利用が、とうとうPC利用者を追い抜かした”*。このニュースは2016年のものです。

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

当時、検索市場の全トラフィックに占めるモバイルユーザーが51.2%と過半数を占めました。同時にGoogleは2018年3月より正式にモバイルファーストする発表をしたことで、SEOでもモバイル対応の重要性が増しました。
※モバイルファーストとは、モバイルユーザー優先すること。

そして、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ページが優先されて検索結果に表示されており、具体的に以下のような優先措置がされていました。

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

以上、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は多くのメリットがあります。

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

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

SEO担当の工数が発生する

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

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

デザインが制限される

元のページに様々なデザインを加えている場合は、安易にAMP対応すると大きくユーザビリティを損ねてSEOでも悪影響を及ぼす危険があるので注意しましょう。AMPは画像やHTMLデザインなどをできるだけ簡素にして読み込み速度を高めようとするため、サイトの見た目などがガラッと変化する可能性があります。

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

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

AMPはSEO効果が高く、Googleがますますモバイルユーザーを重要視していく傾向から、今後はスマホなどに対応したWEBサイトの権威性が高まっていくことでしょう。

ここからAMPの具体的な対応・施策方法をお伝えしていきますが、前述したように対応時間を要します。モバイルユーザー専用の担当者をつけて実施するなど、できるだけ作業を分担させて効率化することをおすすめします。

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

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

<!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/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の最上部には宣言を記載しますが、そこでAMPに対応する文言も入れておきます。

上記の「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": "2015-02-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内に記述しておきましょう。

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に効果的な施策を以下のページでまとめて紹介しているので、サイトのSEO対策にお役立てください。