-1.jpeg?width=48&height=48&name=DSC_2387%20(1)-1.jpeg){kind=small}
Google は2015年に、モバイルページの高速表示を可能にするAMP（Accelerated Mobile Pages）という技術を公開しました。この技術の活用により、モバイル検索時にWebページを最速1秒未満で読み込めるようになります。
SEOツールを提供するSISTRIX社の調査(英語)により、日本における全検索ユーザーのうち、モバイルユーザーの割合は75％を占めていることがわかっています。検索エンジンでモバイルユーザーが主流になりつつある昨今は、モバイル端末でのユーザー体験を最適化するモバイルフレンドリーへの対応が特に重要だといえるでしょう。
その施策のひとつが今回ご紹介するAMPであり、対応によってモバイルユーザーの利便性向上につながります。ただし、Webサイトによって向き・不向きがあるため、対応可否を適切に検討することが大切です。
そこで本記事では、AMPの仕組みやメリット・デメリットをご紹介します。HTMLやWordPressを使った設定方法も解説しているので、ぜひ参考にしてみてください。
AMP（アンプ）ページとは
AMP（アンプ／Accelerated Mobile Pages）とは、モバイルページの読み込み速度を高速化する技術です。この技術を利用して作成したWebページを「AMPページ」といいます。AMPページを作成する目的は、ページ表示を高速化し、モバイルユーザーの利便性を向上させることです。
AMPページを作成するには、PC向けのページとは別に、AMPの基準に準拠したWebページを用意する必要があります。AMP用のページを作成すると、AMP用のURL（https://site.com/page/ampなど）が生成され、Google ChromeやFirefoxなどの主要なWebブラウザーで表示できるようになる仕組みです。
Webページを高速表示できる仕組み
AMPは、次の3つのフレームワークを活用してWebページの高速表示を可能にします。
- AMP HTML
- AMP JS
- Google AMP Cache
AMPページを作成する際は、一定の制限が設けられた専用のHTML（AMP HTML）を記述する必要があります。一般的なHTMLよりも簡易的な記述方式に制限することで、ページの高速表示が可能です。さらに、「AMP JS」というJavaScriptコードにより、画像や動画の読み込み速度を短縮できます。
また、「Google AMP Cache」は、ページ読み込み時にGoogle のサーバーを参照する仕組みです。AMPページ内にある画像ファイルやCSSなどの情報をいちから読み込む必要がなく、サーバーに保存された情報を表示できるので、読み込み時間が短くなります。
2021年4月にGoogle の優遇措置が終了
Google は、AMPの導入推進によってモバイルユーザーの利便性を高められるよう、AMPに対応済みのページに優遇措置を行っていました。検索結果画面上でAMPページに雷マークを付与したり、モバイル検索時のトップニュース枠にAMPページを優先表示させたりと、ユーザーから見つけてもらいやすくなる優遇措置が代表的です。
しかし、Google は2021年4月に、それまで導入を推奨していたAMPに対する優遇措置の終了を発表しました。結果として、AMPの仕様が次のように変わりました。
- 検索結果画面でのAMPバッジ（雷マーク）の表示
- 優遇措置の終了前：雷マークが表示される
- 優遇措置の終了後：雷マークが表示されない
- モバイル検索結果の上部に表示されるトップニュース枠
- 優遇措置の終了前：AMPページのみを表示
- 優遇措置の終了後：AMPページに加え、通常のWebページも平等に評価して表示
つまり優遇措置の終了により、検索ユーザーが、AMPページと通常のWebページにおける見た目上の差異を感じにくくなったといえるでしょう。
しかし、Webページの高速表示を可能にするAMP本来の仕組みは顕在です。モバイルページの表示速度が速くなれば、ユーザーの利便性が向上し、直帰率の減少やコンバージョン率の向上につながる可能性があります。
AMPに対応するメリット
AMPにはメリットとデメリットがあり、場合によっては自社サイトがAMP対応に向いていない可能性があるので注意が必要です。
まずは、AMPの仕組みを活用した際のメリットをご紹介します。
- ページ表示速度が向上しユーザーの利便性が高まる
- 広告クリック率の向上が見込める
- SEOに間接的な好影響を与える可能性がある
1. ページ表示速度が向上しユーザーの利便性が高まる
AMPページの最大のメリットは、モバイルページの表示速度を向上できることです。通常のWebページに比べて短時間でコンテンツが表示されるため、ユーザーの利便性や快適性が高まります。
Webページの表示速度は、ユーザーの直帰率と密接な関係があります。Google の調査結果によると、ページ表示速度が1秒から3秒に増えた場合、直帰率が32％増加したことがわかっています。ストレスを感じたユーザーが即座に離脱しないよう、AMPのようなページ表示速度を改善する仕組みが必要不可欠だといえるでしょう。
2. 広告クリック率の向上が見込める
AMPによって、モバイルページ内にある広告の読み込み時間も短縮できます。AMPページでは、高速表示を可能にする専用のHTMLを記述して広告を表示する仕組みです。これにより、広告が完全に表示される前に画面をスクロールされるリスクが低くなるため、広告クリック率の向上が見込めます。
ただし、AMP非対応の広告タグを利用した場合、通常のWebページより表示速度が遅くなる可能性があります。AMPページに広告を設置する際は、AMPの対応可否をしっかりと確認することが大切です。
3. SEOに間接的な好影響を与える可能性がある
AMPページは、検索順位を上昇させるSEOに直接的な効果はありませんが、間接的には良い影響があると考えられます。
AMPが検索順位に及ぼす影響について、Google は次のように見解を発表しています。
【検索結果のランキングに影響はない】
有効で表示可能な AMP ページが含まれているかどうかは、検索結果ページでのサイトのランキングには一切影響しません。違いは、サイトに AMP 版が含まれていると、検索結果にAMPアイコンが追加されることです。
引用元：顧客のサイトをAMP化するための8つのヒント｜Google 検索セントラル
ただし、Webページの読み込み速度については、モバイル検索時の順位に影響を与えます。そのため、AMPの導入によってページ表示速度を改善すると、間接的に検索順位の上昇につながる可能性があります。
AMPに対応するデメリット
続いて、AMPの仕組みを活用した際のデメリットをご紹介します。
- リッチコンテンツの表示が難しくデザインが崩れやすい
- AMP専用ページの制作や運用に手間がかかる
1. リッチコンテンツの表示が難しくデザインが崩れやすい
AMPページを作成する際は、AMPの仕様に則ったHTMLを記述しなければなりません。そのため、必然的にWebページを構成するための制限が多くなり、リッチコンテンツを表示するのが難しくなります。
例えば、通常のWebページに設置していたボタンや蛍光マーカーが、AMPページでは表示されない可能性があります。また、AMPページでは、埋め込んだ画像が消えるケースも考えられます。このような状態に陥ると、モバイル検索時に表示されるページのみがシンプルなレイアウトになってしまうため、リッチコンテンツを多用している場合は注意が必要です。
AMPページの作成後は、通常のWebページとの差異やデザインの崩れなどを入念にチェックしましょう。
2. AMP専用ページの制作や運用に手間がかかる
AMPを活用する際は、通常のWebページとは別にAMP専用のページを作成する必要があります。また、管理すべきページ数に応じて、運用の手間が増加してしまう点にも注意が必要です。
制作時の手間を抑えるには、WordPress上で使えるAMP専用のプラグインを導入する方法が効果的です。AMPプラグインをインストールすれば、通常のWebページに合わせて自動でAMPページが生成されます。ただし、すでに別のCMSを導入しているなどWordPressでの対応が難しい場合は、手間や時間がかかりやすいため、余裕のある制作・運用スケジュールを設定すると良いでしょう。
AMPは導入すべき？相性の良いWebサイトの特徴
自社サイトをAMPに対応させるかどうかを検討する際は、状況に応じて得られるメリットと必要な工数のバランスを見極めることが重要です。
テキストを中心とした静的なページ構成で、デザイン崩れの影響が小さいWebサイトは、AMPによる恩恵を受けやすいといえます。Google の公式サイトでも、「AMPは静的なWebコンテンツで大きな効果を発揮する」と述べられており、AMPは画像や動画を多用するWebページよりも、シンプルな構成のWebページに向いているでしょう。
また、WordPressのプラグインを導入するだけで対応が可能な場合も、AMPとは好相性です。詳細は後述しますが、WordPressを使えば、専用のプラグインをインストールするだけでAMPページが自動的に生成されます。
AMPを設定する方法
AMPを設定するには、「HTMLによる記述」と「WordPressのプラグイン実装」という2つの方法があります。ここでは、それぞれの設定方法をご紹介しますので、自社のWebサイトに合った方法を活用してください。
HTMLの記述
自身でHTMLを記述する方法は、ページ表示に関する条件を細かく指定しやすく、デザインの崩れや広告の非表示などのトラブルが発生しにくいメリットがあります。WordPressのプラグインを活用する方法に比べて手間がかかるものの、柔軟に仕様を調整したい方におすすめです。
AMPのHTMLテンプレート
AMPに関するHTMLの記述式には、ある程度の統一性があります。そのため、次のテンプレートをそのまま活用するだけでAMPページを作成できます。
<!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">
<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>
HTMLを記述する際は、CSSの一部のプロパティやJavaScriptが利用できない点に注意が必要です。また、画像や動画を埋め込む場合は、「amp-img」「amp-video」の代替タグを記述する必要があります。
上のテンプレートの中で細かい要素を変更したい場合は、次の内容を参考にしてください。
AMP宣言
<!doctype html>
<html amp lang="en">
HTMLの冒頭で「DOCTYPE宣言」を記述します。DOCTYPE宣言を記述することで、機械が文書の種別やバージョンを読み取ったうえでWebページを表示できます。AMPページのDOCTYPE宣言は、通常のWebページに使用するものとほとんど変わりません。
meta要素
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
meta要素とは、文書の概要や文字コード、キーワードといったメタデータに関する情報です。AMPページを作成する際は、文書の文字コードを表す「charset」と、メタデータの内容を示す「name」を記述します。
AMPのmeta要素は条件が定められているため、上の内容を変える必要はありません。
JSライブラリ
<script async src="https://cdn.ampproject.org/v0.js"></script>
JSライブラリには、AMPページを読み込む際の必要情報を記述します。この部分を省略すると、AMPページが正確に反映されず、エラー表示になってしまいます。そのままの状態で記述しましょう。
カノニカル
<link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/">
通常のWebページとは異なるAMPページには、カノニカルの記述が必須です。カノニカルを記述することで、同一ドメインのなかにある重複コンテンツを統一した状態で、検索エンジンに正しい情報を伝えられます。カノニカルを記述する際は、「https://」から始まる部分を、AMPページのもととなる通常のWebページのURLに書き換えましょう。
アノテーション
<link rel="amphtml" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/original/">
前述したテンプレートには含まれていませんが、カノニカルを記述した場合は、必ずアノテーションの設定が必要です。アノテーションはAMPページではなく、AMPページのもととなる通常のWebページのHTMLに記述します。その際に、「https://」から始まる部分を、AMPページのURLに書き換えましょう。
構造化マークアップ
<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>
構造化マークアップとは、検索エンジンにテキストの情報やコンテンツの内容をスムーズに理解してもらう方法です。構造化マークアップを記述すると、検索結果の画面上に、Webサイトの5段階評価やFAQといったリッチリザルトを表示できます。
AMPの場合は、「"@context": "http://schema.org"」という記述が必須です。この部分を省略してしまうと、Google Search Console上でエラーが表示されてしまいます。
定型句（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ページを作成する際は、「boilerplate」と呼ばれる定型句も必須の要素です。これはページを高速化するための記述式なので、変更せずにそのまま活用しましょう。
WordPressのプラグイン実装
WordPressのプラグインを活用する際は、次の手順で実装が可能です。
- WordPressのダッシュボードにログイン
- 左側メニュー「プラグイン」を選択
- プラグインの画面で「AMP」と検索
- 「AMP（作者：AMP Project Contributors）」をインストール・有効化
上記の作業を行ったあとは、通常のWebページを公開するだけで自動的にAMPページも作成されます。HTMLを記述する方法に比べて手軽に実装できるのがメリットですが、デザインの崩れや広告の非表示といったトラブルが発生しやすいため、通常のWebページとAMPページの差異を必ず確認しましょう。
Webサイトの性質に合わせてAMPサイト化を検討しよう
AMPは、モバイル検索時におけるWebページの表示速度を向上させる役割を担います。通常のWebページに比べて短時間でコンテンツが表示されるため、モバイルユーザーの利便性の向上につながります。Webサイトを運営するうえでは、コンテンツが表示される前にユーザーが離脱してしまうリスクを抑えられるのがメリットです。
WordPressへの対応が可能な場合は、プラグインをインストールするだけで容易にAMPに対応できます。WordPressを使用しない場合は、HTMLの記述が必要ですが、今回ご紹介したテンプレートを活用してAMP制作の効率性を高めましょう。AMPへの対応可否は、費用対効果のバランスを見極め、自社サイトの性質に合わせて検討することが大切です。
対応が必要な場合は、今回ご紹介した設定方法を参考にAMPサイト化を進めてみてください。
