AMPとは?検索順位には影響しないがユーザー体験を改善できる手段
AMPとは高速化されたモバイルページのことです。導入に手間がかかったり、制限が大きかったりとデメリットもあります。
2021年6月からはニュースやカルーセルに非AMPページも表示されることになり、GoogleがAMPは検索順位に影響しないと発表したことからも、すべてのサイトに導入すべき技術とはいえません。
AMPとは
AMP(Accelerated Mobile Pages)とは、高速化されたモバイルページのことです。”アンプ”と読みます。
既にキャッシュされている(保存されている)データに直接アクセスするため、今までのようにウェブサイトにアクセスして読み込むということを行いません。これにより表示速度を劇的に高速化させることができるのがAMPです。
もともとは2015年10月にGoogleとTwitterが共同ではじめたAMPプロジェクトのことをAMPと呼んでいましたが、現在ではAMP HTMLというフレームワークのことをAMPを呼称するようになっています。
AMPが高速表示される理由
通常のサイトにアクセスするとhtml、css、Javascript、画像など様々なものを読み込む必要があります。順々に読み込んでいくためリクエスト数の数やファイルサイズに応じて重たくなってしまいます。
AMPでもAMP HTML、AMP JS、AMP Cacheと3つの要素を読み込むことになりますが、すべてのコンテンツのリソースを静的に規定することで読み込みに時間がかかることをさせない方針で仕様が作られています。
AMPページはAMP Cacheというコンテンツ配信ネットワークによってキャッシュされ、ユーザーが検索結果やURLをタップするとキャッシュからコンテンツを返すためウェブサイトへのアクセスを省略することができます。
少し難しい説明をしましたが、要するにウェブサイトとは別にキャッシュされた軽量化ページを別に用意することで読み込み速度を極限まで早めたのがAMPといえます。
そのため、画像や動画をメインコンテンツにしているサイトはAMPには不向きといえますし、反対に記事コンテンツがメインであるサイトにはAMPは最適といえます。
モバイルフレンドリーとは無関係
前述したようにAMPは「高速化されたモバイルページ」です。そのため、モバイルフレンドリーと混合されることがありますが全くの無関係です。
モバイルフレンドリーというのはGoogleのアップデートにより、モバイル対応しているページが検索順位に影響するというものですが、AMPは高速表示はされるもののランキングには影響を及ぼしません。
※厳密にはページ速度が向上したことでユーザーエクスペリエンスが向上し、それにより回遊や拡散が推進され結果的にランキングに影響するという間接効果は見込めます。
AMPのSEO効果について
AMPを導入しても直接的なSEO効果はありません。ただし、モバイルの表示速度はランキングに影響しますので、遅いページをAMP化することでページ速度が改善することでランキングに影響する可能性はありえます。
表示速度はランキングの指標の1つであることはGoogleも認めていますが、速度が速くなればなるほどランキングが上がるのではなく、速度が一定以上に遅かった場合に下がるという類のものです。
表示速度が改善されることでユーザーエクスペリエンスは向上しますが、ランキングが上がるというわけではありません。
※2021年3月時点でAMPはランキング要因ではないことをGoogleが認めています。
参考:Core Web Vitals & Page Experience FAQs (Updated: March 2021)
AMPを導入すべきサイト
AMPはモバイルページを高速表示できるという大きなメリットがありますので導入できるのであればしたほうがよい技術であることは間違いありません。しかし、後述する手間や制限が多く、必ずしもすべてのサイトに導入すべきものという位置づけではありません。
2015年に始まり、かなりの改善がなされていますが、2021年の時点でも無理に導入する必要はないというのが現状です。
とはいえ、導入のメリットは大きいのは間違いありませんので次のようなサイトでは導入を検討してみてください。
- 記事コンテンツがメインであるサイト(画像や動画がメインではないサイト)
- WordPressのプラグイン導入だけでAMP化できるサイト
- AMP化に伴うコーディングの手間や工数が負担にならないサイト
- 広告をマネタイズにしていないサイト(広告制限があるため)
AMP優遇は2021年6月で終了
2021年以前はAMP化をすることでGoogleニュースに表示される、カルーセルを表示する、AMPバッジ(ページがAMP化されていることを示す雷マーク⚡のこと)が表示されるなどAMPに対する優遇措置がありました。
しかし、2021年4月のGoogleの発表により、Googleニュース、カルーセルは非AMPページでも表示されること、AMPバッジは廃止されることがわかっていますこの更新は2021年6月に行われましたので現在ではAMP化をすることに以前ほどのメリットがなくなっています。
参考:ページ エクスペリエンスの更新に対応するための期間、ツール、詳細情報
AMP導入のメリットとデメリット
AMP導入には表示速度が速くなるメリットや手間がかかるデメリット以外にもメリット、デメリット、注意点があります。
AMP導入のメリット
表示速度が速くなる以外のメリットは次の2つです。
流入経路が増える
AMP化することで今まで表示されていなかったカルーセルやリッチリザルトに表示される可能性があり、検索流入経路が増えることになります。
ただし、2021年6月からはカルーセルは非AMPページであっても表示されることになりましたので以前ほど大きなメリットではなくなりつつあります。
クリック率が上がる
AMPの記事カードは自動的に大きなサムネイル画像が使われるためクリック率が上がる傾向があります。
※非AMPページであっても大きなサムネイルを表示することはできますが、自動的ではありません。
AMP導入のデメリット
表示速度が向上することは大きなメリットですが、AMP化にはさまざまなデメリットがあります。
デザインが崩れる可能性がある
サイトのデザインにもよりますが、AMP化すると大きくデザインが崩れる可能性があります。
広告制限がある
アフィリエイト運用をしている場合などでASP広告がAMP対応していない場合には広告は表示できません。広告収益が減ったり、ゼロになったりすることがあります。
Googleが提供しているアドセンス広告はAMPに対応してますが、コンバージョンが減る可能性はあります。
運用の手間がかかる
AMP化するとAMPページと非AMPページの2つのページを管理することになるため運用の手間がかかります。
なお、WordPressで構築したサイトをプラグインでAMP化している場合には自動的にAMPページが生成されるため手間はかかりません。
アクセスが減る
メリットに検索流入経路が増えるとありますが、一方でスニペットに表示されるページ内リンクが表示されなくなる点でマイナスです。今までスニペットのリンクが表示されていなかった、または、表示はされるがクリックされていなかったという場合には影響しませんがスニペットからのアクセスが増えるということはありません。
AMP導入の際の注意点
このようにAMP化には多くのデメリットがあります。導入にあたっては注意点も確認した上で検討してください。
AMP化できないこともある
AMP化をしようとしてもうまく設定できないことがあります。AMP化できるようにサイトを作り変えるという手段もありますが、非常に大きな手間がかかりますのでおすすめはできません。
AMPは便利ではありますが、必ずしも設定できるわけではないということは覚えておいてください。
検索順位が上昇するわけではない
AMP導入によりサイトの表示速度は高まりますが、検索順位が上がるわけではありません。表示速度とSEOを関連付けてAMP化によりランキングが上がると主張する方もいますが、AMPはランキングに影響しないとGoogleが認めています。
ただし、ユーザーエクスペリエンスが向上することで回遊率が上がる、離脱率が下がる、クリック率が上がるなどの別の要因でランキングに影響を及ぼす可能性はあります。
また、表示速度は早ければ早いほど良いことは間違いありませんので手間をかけずに導入できるのであれば是非導入してください。
制約が大きい
AMPには技術的な制約が多数存在します。JavaScriptの制約やcssのファイルサイズ制限(50KB以下)などの細かいルールに則ってコーディングをする必要があります。
AMPが向かないサイトもある
AMPはテキスト中心の静的なページで特に大きな効果を発揮します。
しかし、画像や動画がメインコンテンツである場合やデザインを重視したサイトである場合には表示崩れが起きたり、正しく動作しなかったりする可能性があります。広告にも制限があるため収益が悪化する可能性もあります。
AMP化の方法
AMP化する場合にはWordPressかそれ以外かで方法が変わります。WordPressの場合にはプラグインを導入するだけで完了することもあるため、一度ご検討ください。
WordPressの場合
WordPressの場合、「AMP」というAMPプロジェクトが提供しているプラグインを利用することで簡単に導入できます。AMP化できるプラグインはいくつもあります。セキュリティを担保するためにも更新されているものをお使いください。
WordPress以外の場合
はじめての AMP ページの作成というAMPのサイト制作の手順やコードのサンプルを提供しているサイトがあります。AMPの新機能についても更新されますのではじめて導入する際にはこちらを参照することをおすすめいたします。
AMPを手動で設定する場合には最低限、次の要素は確認が必要です。
AMP HTMLの宣言
<!doctype html>
<html amp lang=”ja”>
AMP HTML宣言を必ず最初に行ってください。
meta要素の指定
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
文字コードとビューポートの指定は必須です。文字コードはutf-8である必要があり、両方とも設定が必要です。
canonicalタグの指定
<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>
canonicalの指定は必須です。そして、非AMPページには次のような指定も施してください。
<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>
headタグとbodyタグの指定
AMP HTMLではheadタグとbodyタグの指定が必須です。通常のサイトでは指定されていることがほとんどですが、省略はできませんので確認してください。
必要ライブラリの読み込み
<script async src=”https://cdn.ampproject.org/v0.js”></script>
AMPを表示するために必要なライブラリです。</head>タグの直上に記述してください。
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ライブラリが読み込まれるまでの間、コンテンツを非表示にできます。
構造化マークアップ
AMPでは構造化マークアップが必須です。省略するとエラーが出てしまうため、schema.orgのJSON-LDで記述してください。
AMP実装の確認
Googleが提供するAMPテストではAMPの実装が正しくなされているかどうかの確認をすることができます。
本番にアップしている場合にはURLの直接入力でわかりますが、本番アップしていなくてもコードを入力して動作確認をすることができます。
まとめ