AMP対応とは？概要と対応方法や導入の注意点について

AMP（Accelerated Mobile Pages）とは？

AMPとはAccelerated Mobile Pagesの略で、モバイルでWebページを読み込む速度を高速化させるためのプロジェクトです。プロジェクトはGoogleが主導していて、AMP対応することがSEO対策にもつながるという噂が広まり、あっという間にWebサイト作成に関わるデザイナーやSEO対策をしているマーケターといった業界人の間でAMPが広まっていきました。

GoogleはAMPの推進にとても積極的です。例えばGoogle Search Consoleを使っていて、コードがAMPに非対応だとします。そうすると、わざわざどこのコードがAMP化されていないと教えてくれるので、Google Search Consoleを使えば簡単にWebサイトをAMPに対応させることができます。

AMPに向いているコンテンツとは

AMPはどのようなサイトにも向いているというわけではありません。というのも、AMPページにすることによってサイト閲覧の速度が上がり、内容がストレスなく把握できてしまうため、他サイトへ流入しやすいという傾向があるからです。

つまりAMP対応させることで、皮肉にもユーザーのサイト滞在時間を減らしてしまう可能性があります。じっくりとコンテンツを読み込ませることでファンを獲得し、そこから他サイトへつなげたいケースなどはAMPには向いていません。ユーザーのサイトへの没入感を奪ってしまうことになりかねないからです。

AMPが向いているサイトは、アクセス数をとにかく増やしたいサイトです。SEO対策といっても基本的なことは上位表示されるサイトならば全て当たり前にやっているので、プラスアルファが必要になります。

AMP対応させることは先ほど説明したように全てのサイトにメリットがあるわけではないため、AMPによるモバイルユーザーからのアクセス増加がはっきりとメリットにつながると見込めるなら、やっておきましょう。

モバイルフレンドリーアップデートとの違いについて

2015年の4月からGoogleはモバイルフレンドリーアップデートというものを実施しています。モバイル環境を快適にという方向性は同じですが、AMPとはまるで違う施策で、Googleの公式発表では以下の4点が特徴としてあげられています。

• タップやズームなどしなくてもテキストが読みやすい
• タップターゲットの間隔が適切
• 再生できないコンテンツが含まれていない
• 横方向へのスクロールが発生しない

携帯端末での検索の掲載順位にのみ影響し、対象となるのはサイト全体ではなく個々のコンテンツページです。サイトがモバイルフレンドリーかどうかはGoogleウェブマスターツールのモバイルユーザビリティレポートで確認することができます。AMPとモバイルフレンドリーアップデートを相互に確認することで、ウェブサイトのモバイル対応は万全のものになるでしょう。

AMPの対応方法

それでは、AMPに対応させる方法についてご説明します。

まずAMPはHTMLページなので、対応させるにはHTMLの編集が必要になります。本来ならばAMP HTMLを覚えるなど、ウェブサイトをAMPに対応させるためにはかなりのコストが必要となってしまうのですが、例えばWordpressでサイトを運営しているならばプラグインを使えば簡単にAMPへ対応させることができます。

例えば「AMP for WordPress」をプラグインに追加し有効化すると、左側のメニューバーにAMPと追加されます。Generalと書かれているページでどのページをAMP化させたいかまで指定することができます。投稿ページだけ高速化したい、固定ページは通常のままで、といった細かな対応もプラグインひとつで可能になります。

もしコードを直接編集するのでしたら、AMPプロジェクトページを参照してみましょう。最も分かりやすくコードの配置などが書かれているからです。AMPは絵文字で⚡️と現すこともできるため、とてもユニークな言語です。細かなカスタマイズを可能とするには更にさまざまなことが必要となりますが、挑戦したい方はぜひやってみてください。

参照：初めての AMP ページを作成する

AMP対応で注意したい点

AMP対応をさせる際、注意したい点がいくつかあります。注意点を考慮すると、決してAMPにすることが最適な解とはいえないことが分かります。

広告がAMPに対応していない場合がある

広告を貼りつける際は、広告もAMP対応していなければ広告が他のウェブページ内にあるコンテンツに比べ遅くなってしまう、場合によっては表示そのものがされなくなってしまいます。タイミングがずれると広告がクリックされる可能性が下がってしまうため、広告もAMP対応しているものを使用するのが望ましいです。

Google AdSenceなどはAMP対応していますが、AMP用のタグを新たに貼りつける必要があり、広告をたくさん貼っているサイトならば編集が非常に面倒です。ただ広告を貼りつける際は通常の広告と同様、HTMLのhead内にタグを入れるだけですので、そう難しい作業を必要とするわけではありません。

とはいえこの部分は徐々に改善されていくと考えられます。

動的なコンテンツはAMPに対応していない

AMPは動的なコンテンツには対応していません。AMPではJavascriptの使用が制限されているからです。そのためAMP対応させると仕様上静的でシンプルなサイトになってしまいます。

ダイナミックな演出によって人気を得ているようなサイトであれば、サイトの特徴がAMP対応させることで丸ごとなくなってしまう可能性も考えられるため、ウェブサイトにとにかく動きをつけたい方にはAMPは向いていません。画像や動画の埋め込みもサイズが崩れてしまうことがあるため、いきなり導入するのではなく可能ならばテストサーバーでまずは試すなどしておいた方がいいでしょう。

引用元：Googleが推進する「AMP」と「AMP HTML」概要

崩れたデザインの修正は初心者には難しい

一度デザインが崩れてしまうとそれを修正するのは初心者にはとても難しいです。コードが分かっていないと何をどうしていいのかが理解できないからです。

その意味でプラグインからAMP化させるのはトラブルが発生したとき場合によってはとても難しい問題となるかもしれません。Word Pressなど使えばコードを知らなくてもAMP化できますが、初心者がプラグインのみでサイトを構築するのはトラブルの可能性を考えたときにあまり望ましくありません。

そのため、上述のようにテストサーバーを利用し、実際にアップする前に試験するのがよく、コードは覚えられるなら覚えるべきなのです。

SEO施策の一部が使えなくなる

SEO対策として行っていることもAMPによってできなくなってしまう可能性があります。例えばパンくずリストやSNSのシェアボタンが表示されなくなるかもしれません。そうなるとSEOを目的として行っているのに、AMPを優先することで結果的に多数のSEO施策が使えなくなってしまい、トータルするとSEO対策としては望ましくなかった、ということもあり得ます。

AMPを導入するとどうしてもできないことがでてくるので、サイト内でやりたいことに優先順位をつけ、AMPを取り入れることが本当にメリットにつながるかどうか事前に確認しましょう。

おわりに

以上、AMPとはなにか、対応方法や注意点などおわかりいただけたでしょうか？手間がかかったり、注意すべき点も多くありますが、表示速度の高速化はユーザーにとって快適なものです。スマホユーザーが増えていますので、ぜひAMP対応について一度考えてみてくださいね。