AMPとは?基本から対応するメリット・デメリットを徹底解説

AMPとは?

AMPとは、スマホやタブレットからの表示を高速化する仕組みのことをいい、TwitterとGoogleが協同で行っているプロジェクトです。ページの表示を高速化する以外にも、検索結果の表示が変化することやSEOに効果的なことなど多くのメリットがあります。

 

SEOコンサルタントそこで本記事ではAMPの基本知識から、実装するメリット・デメリットについて詳しく解説していきます。

 

AMPとは 

 

AMPとはスマホやタブレットからの表示を高速にするための方法のことを言い、Accelerated Mobile Pagesの略になります。TwitterとGoogleの共同プロジェクトとなり、ユーザーの利便性を高めることが目的です。

 

実際にAMPが実装されたページはデータ量が少なく表示速度が早まるため、ユーザーは快適にWebサイトを閲覧できます。

 

ここでは、AMPの仕組みとモバイルファーストインデックスの違いについて、詳しく解説していきます。

 

AMPの仕組み

 

AMPのページは、通常のページとは違うアクセス過程を経て表示される仕組みです。

 

具体的には、以下の3要素から構成されます。

 

 

  • AMP HTML
  • AMP JS
  • AMP Cache

AMP HTMLとAMP JSは、AMPを実装するための専用コードです。通常のコードに制限をかけることで読み込みにかける時間を短くし、表示速度を早めています。

 

またAMP Cacheでは、TwitterやGoogleのサーバーで専用のキャッシュとして保存されるため、通常のページとは異なるな手順でページが表示されます。

 

モバイルファーストインデックスとの違い

 

AMPを調べていると「モバイルファーストインデックス」という言葉が出てきますが、両者はまったく異なるものです。

 

モバイルファーストインデックスとは、Googleの検索アルゴリズムがWebサイトの表示順位を決める際に、PC版ではなくモバイル版のページを軸に評価することをいいます。

 

従来まではPC版のサイトがメインに評価されていましたが、ユーザーのモバイル利用率が高まったことで、モバイル版のサイトが軸におかれるようになりました。

 

対してAMPは直接的に表示順位に影響を与える要素や、検索アルゴリズムを示した内容ではありません。

 

あくまでモバイルページの表示速度を早める仕組みのため、モバイルファーストインデックスとは異なることを覚えておきましょう。

 

関連記事: SEOとUXの関係性とは?効果のあるUXデザインについて解説

 

AMPに対応するメリット 

 

AMPを実装したページは、ページの読み込み速度が速くなるだけでなく、リッチリザルトやカルーセルが表示されるメリットがあります。また読み込み速度の改善によってSEOに効果的な場合もあるため、AMPはサイト運営には欠かせない要素といえるでしょう。

 

ここでは、AMPに対応するメリットについて詳しく解説していきます。

 

ページの読み込み速度が速くなる

 

AMPを実装する目的でもありますが、一番のメリットはページの読み込み速度が速くなることです。通常ページの約4倍の読み込み速度と言われており、Webサイトを遅いと感じることなく快適に利用できます。

 

そのため今まで離脱率や直帰率が高かったWebサイトであれば、AMPの実装によって大きく改善することが可能です。

 

実際にWebサイトの読み込み速度が3秒以上かかる場合、ユーザーが離脱する可能性が高くなるため直帰率は増加してしまいます。

 

どんなに良いWebサイトを運営していたとしても、直帰率が高ければサイトの内容を伝えることはできません。

 

したがって読み込み速度が遅いサイトや直帰率が高いサイトであれば、AMPの実装が効果的な対策方法といえるでしょう。

 

リッチリザルトが表示される

 

AMPを実装したページは検索結果上のリッチリザルトなど、ユーザーの目にとまりやすい箇所で表示されます。

 

具体的には、以下の欄で表示される仕組みです。

 

 

  • トップニュースカルーセル
  • ホストカルーセル
  • リッチリザルト
  • ウェブストーリー

かならず表示される仕様ではありませんが、カルーセルやリッチリザルトの表示はサイト運営者にとって大きなメリットといえるでしょう。

 

なぜならテキストだけでなく、画像や動画を用いて訴求できるからです。

表示枠が通常より大きくなる点も強みですが、画像や動画であれば今以上にクリック率を高められます。

クリックされた後も高速で表示されるため、クリックされやすく離脱されにくいサイト運営が可能になります。

 

関連記事: リッチリザルトとは? SEO上のメリットや表示方法を解説

 

SEO効果が高まる可能性がある

 

AMPを実装することによって、SEO効果を高められる可能性もメリットの一つといえるでしょう。

 

SEOに影響を及ぼす理由は、GoogleがWebサイトを評価する指標にページの読み込み速度が関係するからです。

 

ページの読み込み速度が速いことで検索上位になるわけではありませんが、著しく遅い場合にはSEOに悪影響となる場合があります。

 

そのため現状Webサイトの読み込み速度が遅い場合には、AMPの実装によってSEOの評価が高まるかもしれません。

 

ただし注意しなければいけないことは、AMPを実装したからといってSEOに直接的な影響はないことです。あくまで表示速度が改善された場合に効果的であることを認識しておきましょう。

 

AMPに対応するデメリット  

 

AMPを実装する際にデメリットとして挙げられることが、独自タグの使用や専用ページの制作です。通常のページとは異なる仕様のため、新しく作り変える必要があります。また対応していない広告はまったく表示されない点もデメリットとして認識しておきましょう。

 

ここでは、AMPに対応するデメリットについて詳しく解説していきます。

 

AMP独自のタグが必要

 

AMPを実装するためには、AMP独自のタグを使用する必要があります。

 

たとえば以下のような記述です。

 

  • imgを「amp-img」に書き換え
  • audioを「amp-audio」に書き換え
  • iframeを「amp-iframe」に書き換え
  • videoを「amp-video」に書き換え
  • frameは使用できない

frameのように、使用できないタグも存在するため注意が必要です。現状のコードと大きく変わることもあるため、事前に確認してから記述しましょう。

 

HTMLタグについて詳しく知りたい場合は、AMP公式サイト「AMP HTML 仕様」をご覧ください。

 

AMP化したページが必要

 

AMPの実装では、タグに加えて専用のページを用意する必要があります。

 

またHTMLタグ同様AMP HTML使用する必要があるため、専用のマークアップなどを行わなければいけません。

 

以下が記述例です。

 

  • HTMLタグに(html amp)を含める
  • HTMLは(!doctype html)から始める
  • headタグ内に以下を記述
  • (script async src=”https://cdn.ampproject.org/v0.js“)(/script)
  • head ) style[amp-boilerplate
  • noscript ) style[amp-boilerplate

AMP HTMLについて詳しく知りたい場合は、AMP公式サイト「AMP HTML 仕様」をご覧ください。新しくページを制作するには手間がかかるため、時間や労力をかける点はデメリットです。

 

もしWordPressを使用している場合はプラグインによってページを制作できるため、有効活用しましょう。

 

広告制限がある

 

AMPでは広告に制限があり、非対応の場合は一切表示されない可能性があります。

 

具体的には、以下のような広告が制限対象です。

 

  • カスタム JavaScript
  • transform・visibility・opacity以外の要素を含んでいる場合
  • ディスプレイ・ビデオ360
  • 動的データ バインディング

また一般的なHTML広告を表示させることもできますが、読み込み速度を早めたい場合にはAMP HTML広告の活用がおすすめです。

 

一般的な広告機能と同じように使用でき、ファイルサイズが小さく表示速度を早められます。

 

ただしすべての広告が対応しているわけではないため、表示できるかの確認はかならず行いましょう。

 

AMPに向いているサイトと向いていないサイト 

 

AMPでは、動的なコンテンツが多いとデザインが崩れやすく正常に機能しないなど、Webサイトによって向いていない場合もあります。そのためAMPを実装したからといって、すべてのWebサイトにメリットがあるわけではないことを認識しておきましょう。

 

ここでは、AMPに向いているサイトと向いていないサイトについて、詳しく解説していきます。

 

AMPに向いているサイト

 

AMPに向いているサイトは、以下の特徴です。

 

  • 動的な要素が少なく、シンプルなデザインで構成されているWebサイト
  • モバイル端末からのアクセスが多く、モバイルページの表示が多いWebサイト
  • ページの読み込み速度が遅いことが原因となり、離脱率や直帰率が高いWebサイト
  • 検索結果におけるクリック率やSEOの効果を高めたいWebサイト

AMPを実装する際は、静的なページのほうが正常に機能しやすい特徴があります。また普段からモバイルページの表示が多い場合にも、メリットが多くAMPに向いているサイトといえるでしょう。

 

なかでもページの読み込み速度に問題がある場合は、AMPの実装によって大きく改善できるためおすすめです。

 

AMPに向いていないサイト

 

AMPに向いていないサイトは、以下の特徴です。

 

  • ユーザーのタップによる変化が激しいなど、動的な要素が多いWebサイト
  • モバイル端末からのアクセスが少なく、PCページの表示が多いWebサイト
  • すでにページの読み込み速度が早く、離脱率や直帰率が低いWebサイト
  • 検索結果におけるクリック率やSEOの効果を気にしていないWebサイト
  • AMPに対応していない広告を表示しているWebサイト

AMPに対応していない広告や動的要素が多いWebサイトは正常に機能しないことが多いため、AMPには向いていないと判断できます。

 

AMPの設定次第では指定したページのみに実装できるため、一部のページを除いて対応することも可能です。

 

AMPに対応する方法 

 

WebサイトにAMPを実装する場合は、自分でページを作成する必要があります。ただしWordPressサイトの場合はプラグインを導入する方法もあり、簡単にAMPの実装ができます。

 

ここでは、AMPに対応する方法について詳しく解説していきます。

 

AMPページを作成する 

 

AMPページを作成するには、AMP HTMLの条件を満たす必要があります。条件を満たしていない場合には正常に表示されないため、注意が必要です。

 

具体的には、以下の手順で行いましょう。

 

  1. AMP HTMLの宣言
  2. meta要素の指定
  3. AMP JSライブラリの読み込み
  4. canonicalタグの指定
  5. 有効性の確認

各々、解説していきます。

 

AMP HTMLの宣言

 

まずは以下の条件に当てはめ、記述を行っていきます。

 

  • (!doctype html) を記述し、DOCTYPE宣言を行う
  • 最上部に(html amp) を記述
  • (html amp lang=”en”)にてlang属性の指定(日本語のサイトの場合はja)
  • その後(head) タグと (body)タグの指定を行う

DOCTYPE宣言とは、以降の文章がHTMLであることを示すことをいいます。

 

meta要素の指定

 

つぎにmeta要素を指定していきます。

  • (meta charset=”utf-8″) を(head) タグの最初の子要素にする
  •  (meta name=”viewport” content=”width=device-width,minimum-scale=1″)を記述し、レスポンシブ対応に設定する

meta要素については、UTF-8とviewportの指定を行う必要があります。

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

 

続いて、AMP JSライブラリの読み込みに必要なコードを記述していきます。

 

  • (script async src=”https://cdn.ampproject.org/v0.js”)(/script)を(head) タグの2番目の子要素にする

AMPではAMP JSライブラリの読み込みが必須のため、忘れずに記述しましょう。

 

canonicalタグの指定

 

続いて通常ページとAMPページの重複を避けるために、canonicalタグの指定を行います。

 

  • (link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html”)を(head) タグに含める

通常のページでは(link rel=”amphtml”を記述することで、別にAMPページがあることを伝えられます。

 

有効性の確認

 

最後に作成したAMPのページが正常に反映されるかの確認を行いましょう。

 

ページをテストする方法は複数ありますが、今回は簡単に確認できるAMPテストツールを紹介します。

 

AMPテストツールではURLを入力し「URLをテスト」をクリックするだけで、有効性を確認できます。

 

有効性が確認できた場合は「有効なAMPページです」と表示され、有効性が確認できない場合には「AMPページではありません」と表示されます。

 

検索結果やAMP HTMLも表示できるため、合わせて確認しましょう。

 

WordPressプラグインを導入する

 

前述ではAMPページを作成する方法を紹介してきましたが、WordPressを利用しているWebサイトの場合、プラグインを導入することで簡単にAMPを実装できます。

AMPプラグイン

WordPressでAMPのプラグインを実装する際は、AMP:AMP Project Contributorsを活用しましょう。

 

実装までの流れは以下のとおりです。

 

 

  • プラグインをインストールし有効化
  • Template Modesからモードを選択
  • 対応テンプレートにて表示設定
  • AMPページとGoogle Analyticsを連携
  • 設定してページの表示確認

難しい操作はないため、インストール後の流れに沿うだけで簡単に設定できます。

 

HTMLに関する専門的な知識や経験も必要ないため、WordPressサイトの場合はプラグインを有効活用しましょう。

 

 

SEOコンサルタント【まとめ】AMPの基本知識から、実装するメリット・デメリットについて詳しく解説していきました。AMPは実装することでページの表示速度の高速化をはじめさまざまなメリットがある反面、向かないサイトもあるため注意が必要です。特に広告が対応していない場合や動的要素が多いページの場合には、一度表示確認を行ってから設定を完了させましょう。実際に導入する際はAMPのページ作成だけでなく、WordPressのプラグイン導入もご活用ください。

 

SEO対策のお申込みボタン

格安SEOのTOPページへ戻る

この記事を書いた人

SEOコンサルタント

アドマノ株式会社 代表取締役 天野 剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析(Googleアナリティクス個人認定資格GAIQ保持)コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。