GoogleがオススメするAMP（Accelerated Mobile Pages）とは？メリット・デメリットと対応方法について

近年、検索エンジン上に、カミナリマークの付いたAMP対応済のウェブサイトが増えつつあります。これは、AMP HTMLによって構築されたウェブサイトで、スマホでブラウジングすると、コンテンツを高速表示できます。

数年前、AMPがITニュースとして大きく取り上げられましたが、実装に伴う技術的な難易度が高く、労力の割にSEO効果が期待できなかったため、早急な対応が必要というわけではありませんでした。

しかし、AMPによる表示速度の高速化の技術は、年々進化しており、世界的にも導入企業が増加しつつあります。

そこで、今回はAMPとはどのような技術なのか、メリットやデメリット、具体的な対応方法についてご紹介したいと思います。

AMPとは？

AMPとは、Accelerated Mobile Pagesの略称で、GoogleとTwitterが共同でモバイル端末のユーザーに快適なブラウジング環境を提供することを目的としたプロジェクトの取り組みであり、HTML規格のことです。AMPのHTML規格に基づいてウェブサイトを構築すると、モバイルサイトの読み込み速度やコンテンツの表示速度が高速化し、ユーザービリティが大幅に向上します。

ここで、AMP対応しているウェブサイトがどういうものなのかチェックしてみましょう。検索エンジン上で、「天気」というキーワードで検索してみました。その際、独自ドメインの左側に、カミナリマークが見えるでしょうか？

この灰色のカミナリマークがAMP対応されているウェブサイトの証拠です。このとき、パソコンから検索しても、AMPサイトは、表示されないため注意してください。

実際に、アクセスしてみると、下記のことがわかりました。

• 大きな画像が多用されているものの、表示速度が速く待ち時間がほとんどない。
• 最後までスクロールしても、コンテンツが遅れて表示されることがない。

AMP対応のウェブサイトは、非対応サイトと比較して、4倍も表示速度が異なることが報告されているため、ユーザーの快適なブラウジングを実現する上で、欠かせない技術となるでしょう。

MFI（モバイルファーストインデックス）と同じ？

AMPと類似するものとして、MFIというものがありますが、どのような点が異なるのでしょうか。MFIとは、Googleの検索エンジンがパソコン用のコンテンツをメインにインデックスしていた仕組みを一変させ、スマートフォンを評価の主軸に置いてインデックスするという方針変更のことです。

そのため、Googleのクローラーは、スマートフォンサイトを中心にウェブサイト内を巡回し、検索エンジンを形成するデータベースに優先的にインデックスします。つまり、MFI実施後は、パソコン向けのサイトではなく、スマートフォン向けのコンテンツの価値が高くなり、検索結果で上位表示しやすくなります。

このように、MFIとAMPでは、実施している内容が異なります。MFIが検索エンジンのインデックスの指針変更に関する内容であるとするならば、AMPは、モバイルサイトの高速化についてです。

この場合、MFIの指針を広めるため、AMPによって快適なブラウジング環境を整備しているといえるでしょう。

AMPのメリット

AMPを実装すれば、どのようなメリットがあるのでしょうか。ここでは、AMPのメリットについてご説明します。

ページの表示速度が高速化する

AMPの最大のメリットは、従来とは比較にならないほど、ページの表示速度が高速化することです。ブラウジングスピードが向上すれば、ウェブサイト内を快適に閲覧できるため、離脱率を抑えられます。

しかし、どのような理由で高速ブラウジングが実現できているのでしょうか？それは、AMPを実装したウェブページがキャッシュとして保存される仕組みを利用しています。これにより、ウェブページを訪問の度に読み込む必要がなく、高速表示が実現しています。

他にも、AMPの厳格なガイドラインに従って記述されたHTMLやCSSのデータ容量が小さいことが、読み込み時の短縮に大きく貢献しています。

トップニュース枠に表示される

AMPを実装したニュースサイトは、検索結果のトップニュース枠にカルーセル表示される可能性が高くなります。つまり、どのウェブサイトよりも注目を集めるため、ユーザーの関心を寄せやすくなります。

そして、カルーセル表示は、検索結果の直下で大きくアピールするため、ウェブサイトの信用性のアップにもつながります。

データ転送時に負担がかからない

ウェブサイトの表示速度を高速化するには、転送するデータ量を小さくしなければいけません。上記でも説明したように、AMPのガイドラインは、非常に厳格であり、極限までシンプルに設計することが求められます。

そのため、従来のウェブサイトと比較すると、10分の1のデータ量になると報告されています。データ量の減少は、データ転送時の負担を軽減し、ウェブサイトの高速表示を可能にします。

AMPのデメリット

一方で、AMPには、どのようなデメリットがあるのでしょうか？ここでは、AMPのデメリットについてご説明します。

AMP実装前と実装後で、コンテンツやデザインが変わってしまう

AMPを実装するには、Googleが定める厳格なガイドラインに従わなければいけません。現在、ウェブサイト内での使用が禁止されているタグが多く、安易に実装してしまうと、コンテンツやデザインが大きく変わってしまう可能性が高いです。

例えば、AMPサイトでは、JavaScriptが利用できません。現在、Googleは、JavaScriptに関する問題を解決するため技術開発を進めていますが、もう少し時間がかかるでしょう。

HTMLコーディング経験者でないと対応できない

自社でどのようなウェブサイトを管理しているかで、AMPの実装方法が大きく異なります。そのため、どうすればAMPを実装できるのか、その手段について考える能力や問題発生時の対応力が求められます。

AMP実装時に大きなトラブルにつながる可能性があるため、HTMLコーディング経験者の知識や技術を頼りに作業を慎重に進めてください。

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

AMPを実装すれば、どのようなウェブサイトでもメリットがあるわけではありません。なぜなら、高速表示する代わりに、さまざまな機能を制限することになるからです。ここでは、どのようなウェブサイトがAMPに向いているのかについてご説明します。

AMPに向いているサイト

AMPによって大きな恩恵が受けられるウェブサイトの特徴は、下記の通りです。

• ユーザーの操作によって変化のある動的なコンテンツやアニメーション要素がない。
• スマートフォンやタブレットなど、モバイル端末からたくさんのアクセスがある。
• コンテンツの読み込み速度の低下によって、ユーザーの離脱が発生している。

上記のように、静的なコンテンツに対するモバイル端末からのブラウザの表示速度を高速化する場合、AMPを実装する価値は、十分にあると考えて良いでしょう。例えば、ニュースサイトや映画情報サイト、製品情報の紹介サイトなどは、大きな効果を発揮します。

AMPに向いていないサイト

逆に、AMPの実装に向いていないウェブサイトとは、どのような特徴を持ったサイトなのでしょうか？

• AMP非対応のアフィリエイトプログラムを利用している。
• AMPを実装しなくても、表示速度が速く、ユーザーの離脱率が低い。
• 検索結果からのユーザーの流入をまったく意識していない。
• スマートフォンではなく、パソコン向けのコンテンツサイト。
• ユーザーのスワップやタップなどの動作によって、アニメーションを動作させている。
• 複数の動的なコンテンツが画面に含まれる。

自社のウェブサイトが動的なコンテンツを利用しているのであれば、AMPによる恩恵を受けることは難しいでしょう。例えば、公共機関の地図情報を扱うウェブサイトやソーシャルネットワーク系のウェブサイトでは、その効果を期待できません。

AMP対応の方法

AMPを実装すれば、たくさんのメリットがあります。自社のウェブサイトがAMPの実装に適していると判断した場合、どのような手段で導入すれば良いのでしょうか？ここでは、ワードプレス上のAMP対応の方法についてご説明します。

ワードプレスの「AMP for WordPress」をインストールする

参考サイト：AMP for WordPress

CMSがワードプレスである場合、無料のプラグインをインストールすれば、AMP化できます。プラグイン検索画面で、「AMP for WordPress」をインストールしてください。インストールが完了したら、有効化を忘れずに実施しましょう。

ウェブサイトのURLの文末に「amp/」を付け加える

プラグインの有効化が完了したら、ウェブサイトのURLの文末に「amp/」を付け加えます。例えば、当社であれば、下記のようになります。

変更前	https://digital-marketing.jp/creative/what-is-wordpress/
変更後	https://digital-marketing.jp/creative/what-is-wordpress/amp/

当社では、ウェブサイト内に動的コンテンツを採用しているため、AMPを導入していません。そのため、「amp/」と付け加えても、コンテンツが適切に表示されることはありません。しかし、御社のウェブサイトのプラグインが適切に有効化されていれば、正常にコンテンツが表示されます。これにより、AMPページがユーザーからどのように認識されているのか、確認できます。

AMPページとしての構成状況が正常なものか確認する

上記の手順の通り、「amp/」と付け加えて、ウェブサイトが適切に表示されたからといって、AMPページが有効に機能しているとは、断定できません。AMPページが有効に機能しているか確認するには、URLの末尾に「#development=1」と入力して検索してください。その際、確認用のブラウザとして、Google Chromeを使用しましょう。

変更前	https://digital-marketing.jp/creative/what-is-wordpress/
変更後	https://digital-marketing.jp/creative/what-is-wordpress/#development=1

上記のURLのページにアクセスし、Google Chromeのデベロッパーツールを呼び出します。Windowsの場合は、Ctrl + Shift + Iのショートカットキーで表示できます。そして、Macの場合は、Cmd + Opt + Iと入力しましょう。Google Chromeのデベロッパーツールが表示されたら、「Console」を選択してください。

このとき、「AMP validation successful」と表示された場合は、AMPが有効に機能しています。一方で、エラーが表示される場合は、AMP対応が失敗していることを意味します。エラーがなくなるまで、修正してください。

AMPのカスタマイズ機能とアナリティクスを実装する

すべてのエラーが解消したら、AMPページのカスタマイズ機能とGoogleアナリティクスのトラッキングコードを設置するため、「Glue for Yoast SEO & AMP」と呼ばれるプラグインをインストールします。

参考サイト：Glue for Yoast SEO & AMP

プラグインを有効化したら、Designのメニューでページデザインが変更できます。

Google Analyticsの設定

次に、Googleアナリティクスを設定していきます。このとき、通常のページとAMPページのアクセスを分けて計測するため、Googleアナリティクスの管理画面で、AMPページ専用のプロパティを作成してください。

トラッキングIDをワードプレスに設置する

GoogleアナリティクスのAMPページ専用のプロパティからトラッキングIDを取得してください。トラッキングIDをコピーし、ワードプレスの「Analytics」の「Analytics Code」に貼り付けます。

「UA-XXXXXX-X」を自分のトラッキングIDに貼り替えることができれば、Googleアナリティクスの設定は、完了です。

AMP実装状況の確認方法

AMP対応が完了したら、最後にAMPテストで実装状況を確認しましょう。

参考サイト：AMPテスト

テストしたいページのURLを入力すれば、ページを分析してもらえます。もし、AMP化されていない場合、これまでの作業を見直して問題点を修正してください。

おわりに

AMPを実装すれば、ウェブページの高速表示が可能となりますが、すべてのウェブサイトに適した施策ではありません。そして、AMPに適するウェブサイトであったとしても、AMPエラーを修正できるエンジニアがいなければ、あとで大きなトラブルにつながってしまう可能性があります。

AMPの導入によって、どれくらいのメリットがあるのかを考え、エンジニアと協力体制を築きながら、離脱率の減少とコンバージョン率のアップを目指していきましょう。