AMP(Accelerated Mobile Pages)について

スマートフォンでGoogle検索を行うと検索結果に「⚡マーク」のついたページが表示されることがあります。これはAMPと呼ばれるのですが、今回はそのAMPについて詳しくご紹介したいと思います。

AMPとは?

初めに、AMPとはなんでしょうか? AMPとはAccelerated Mobile Pagesの略であり、「より良い、より高速なモバイルインターネット」を実現するプログラムのことです。AMPは、2015年にGoogle社がTwitter社と共同で開発したオープンソースフレームワークで、日本語ではAMP(アンプ)よ呼ばれることが多いです。

AMPは検索結果にはこのように表示されます。

 

なぜAMPページは高速表示されるのか?

AMPページがなぜ高速表示されるかについてご説明しようと思います。

WEBサイトは html, CSS, JavaScriptなど多くのコードで構成されており、WEBページを読み込む時はこのすべてを順番に読み込むことで、ウェブサイトがブラウザに表示されるようになります。基本的には一瞬で行われるこの作業も、ページ内のコンテンツが多かったり、他のプログラム言語を利用しているとどうしても読み込みに時間がかかってしまいます。特にパソコン環境に比べて、モバイル(スマホ)からの場合は通信環境にもよりますが時間がかかることがあります。

そこで、AMPは以下の2点を行なうことで、モバイルでのWEBサイトの表示速度を高速化しています。

  • ソースコードを専用のシンプルなものにする(AMP HTML、AMP[JavaScript]を使用する)
  • キャッシュを利用する

amp-intro2

 

基本的にAMPは、既存のWebページコンテンツのHTMLコピーを取り除いたもので構成されており、標準のHTML5ドキュメントよりも読み込み時間が短くなります。Webサイトは、「rel = amphtmlタグ」をHTMLに実装することにより、AMPページにすることができるようになっています。

AMPコードを含むページには、以下の3つのAMP構成が含まれています。

  • HTML:独自のタグを備えた従来のHTMLコードを取り除いた独自のマークアップ。
  • JS:リソースをフェッチするために使用され、不要なレンダリングを排除するためにストリップされます。
  • CDN:ページをキャッシュし、すぐにAMPコードに適合させるように設計された最適化されたネットワーク。

つまり、AMPはウェブサイトのデザインに関係なく同じコード形式を使用するため、読み込み時間とユーザーエクスペリエンスを最適化することができるということです。

 

モバイルフレンドリーとAMPとの違い

モバイルフレンドリーとAMPとの違い

WEBサイトがモバイル対応しているかどうかを表す時に、「モバイルフレンドリー」という言葉をよく耳にしますが、モバイルフレンドリーとAMPは全くの別の言葉になります。モバイルフレンドリーページは、レスポンシブウェブデザインを備えたページのことを指し、デスクトップPC、タブレット、モバイルなどの画面の大きさによってページのレイアウトや文字が調節されるページのことを言います。最新の調査によると、最近のWEBサイトの85%以上はモバイルフレンドリーに対応しています。

AMPのメリット

WEBサイトをAMP化することは基本的にはメリットのことの方が多いです。以下はAMPのメリットになります。

  1. 大きなメリットは速度の向上。ページの読み込み速度はGoogleのランキングのアルゴリズムに大きな影響は与えませんが、少なからずは効果があると示唆しています。最近のGoogleの研究によるとページの読み込み速度が1秒から5秒に上がると、ユーザーの直帰率が90%上がると発表しています。
  2. AMPを使用すると、サーバーのパフォーマンスも向上します。AMPを使うと、モバイルからページを読み込む場合に少ない情報量で済むので、結果的にサーバーへの負担を減らすことができます。特にモバイルから多くのトラフィックがあるサイトはAMPを実装することで多くの効果が期待できます。
  3. AMPを使用すると検索結果に「稲妻アイコン⚡」が表示されるので、AMPのメリットを知っているユーザーが他の検索結果よりもAMPサイトをクリックする可能性はあります。
  4. Eコマースサイトでは、AMPを利用することでコンバージョン率が向上するという報告がされています。サイト読み込み時間の0.01秒の遅延がコンバージョン率に最大7%の影響を与えると報告されました。

上で書いたようにAMPは単純にWEBページの読み込み速度が向上するので、特にデメリットになるようなことはありません。唯一挙げるとするなら、サイトをAMP化することでJavaScriptの読み込みに制限をかけることになり、実際のWEBサイトでできていたことがモバイルではできなくなる可能性もあります。例えばEコーマスサイトで、商品の絞込み機能をJavaScriptで実装していた場合は、AMPサイト上では上手く機能しなくなるかもしれません。この辺りはサイトの管理者と相談して導入を考える必要があります。一方、ブロガーや企業のオウンドメディア用のWEBサイトにとってはAMPを導入するデメリットはほとんどないと言っていいでしょう。

AMPのSEO効果について

AMPとSEO

AMPがSEO対策に繋がるかどうかは様々な意見があり、Googleの検索アルゴリズムも頻繁に更新されているので一概には言えません。一つ言えるのは、AMP化しているサイトがSEO的に優遇されることはありませんが、ページが高速で表示されるようになるわけなので、ユーザーエクスペリエンスの向上につながり、結果的にはGoogleからのサイト評価が上がる可能性は十分にあります。もし2つの全く同じコンテンツ量と質のサイトがあり片方がAMP化されていれば、そのAMP化されているサイトの方が上位に表示されるでしょう。

 

WordPressへのAMPプラグイン導入方法

ラッキーなことに、WordPressでサイトを運営している場合は簡単にAMPに対応させることができるので、以下にその手順をご紹介します。

まずは、公式のAMP WorddPressプラグインがあるのでインストール&有効化をします。

基本的にはこれだけでAMPに対応したサイトになります。  一応簡単な設定ができるので、以下の設定画面から変更をすることができます。

(Template Mode)モード設定に関しては初心者の場合は「Reader」のままで大丈夫です。 Supported templatesはAMPを適応したいページテンプレートを選択することができます。例えばHOME画面にはこだわっているので、AMPで簡素化したくない時は「固定ページ」のチェックを外すことができます。

AMPに設定されているかどうかは、ページリンク末に /amp を付けることで確認できます。 例えばブログのURLが https://mydomain.com/hello だった場合は、https://mydomain.com/hello/amp にしてスマホでアクセスしてみるとページがAMP化されていることがわかると思います。

AMP化されたページ
WordPress公式AMPプラグインを利用した場合のテンプレート

このようにWordPressでは簡単にAMPを実装することができます。公式プラグインは誰でも使えるように必要最低限の機能しか提供していませんが、もしバナー広告の挿入や、Google Analyticsの設置、デフォルト以外のAMPのデザインテンプレートを使いたい場合は他にもAMP化の無料プラグインがあるのでそれを使ってもいいでしょう。少し高度な設定を行いたい方のために以下にプラグインをリストアップします。

 

AMP対応のWordPressテーマ例

WordPressではサイトをAMP化することは簡単と書きましたが、中には相性の悪いテーマも存在しており、そのテーマとAMP化のプラグインを利用しても上手くAMP化されないことがあります。AMPはまだ開発段階の仕組みですので、実装する段階でエラーがないとは言い切れません。1番ベストな方法はAMPに対応しているテーマを選択することです。

以下のテーマはWordPressの公式デフォルトテーマですのでAMPに完全に対応しています。

Twenty Twenty

Twenty Nineteen

Twenty Seventeen

Twenty Seventeen

また、デザイン性の優れた有料テーマにもAMPに対応しているものがあります。

Jannah

Jannah

Newspaper

Newspaper

JNews

JNews

Breek

Breek

これらの有料テーマは、AMP化をするとどうしても失われがちなデザイン性もできる限りキープしているので、「高速化もしたいし、サイトのデザインも保ちたい」という方にオススメです。以下は実際に、JannahのテーマでAMP化されたサイト(右)と普通のスマホビュー(左)とで比較したスクリーンショットです。

普通のスマホビュー

AMP化されたサイト

AMP化された場合でもサイトのデザインを保ったままになっていますのがわかりますね。

まとめ

いかがでしたでしょうか。サイトをAMP化することで、単純にサイトの読み込み速度が向上するので大きなメリットがあります。導入するのが難しいと思われがちですが、WordPressには公式のプラグインがあるので、基本的には簡単に実装することが可能です。AMP化をするとデザインが損なわれがちですが、海外のテーマにはAMPにしっかりと対応しているテーマもあるので、それを初めから選択することでいいデザインと高速化されたサイトの両方を得ることができるでしょう。