AMP導入でアクセスアップさせるために最低限おさえておきたいポイント

AMP

@よしみです。

AMP対応されていますか?ネットショップでは、売上に貢献しているAMPではありますが、まだまだその存在を知らない、設定方法がわからないという方も多いはず。AMPに関しては、様々な記事が上がっていますが、良い噛み砕いて、AMPをご紹介します。

そもそもAMPって何?

AMPとはAccelerated Mobile Pagesの略で、モバイル端末でのサイト表示高速化されたページのことです。ちなみにアンプと呼ぶそうです。スマホ普及率に合わせてGoogleが推し進めているプロジェクトです。

Googleは、モバイル端末によるGoogle検索が、コンピューターによる検索を超えたことを2015年に発表した。と記事がアップされています。(参照:Inside AdWords

つまり、検索プラットフォームのgoogleとしては、このモバイル端末ユーザーにより良い環境を提供することが収益につながります。結果、3秒の表示されらにでかで離脱してしまうゆーアーガイルので、改善点は表示速度が必要不可欠になるわけです。

移動中や観光地、ゲームなどスマホを使うユーザーは本当に多くなりました。今の時代の手放すことのできない3種の神器のうちの一つといっても過言ではありません。であるからして、より検索した際に、ユーザーの求める情報へ高速でマッチさせたいというのがこのAMP対応です。

技術的な特徴

Googleが先陣を切ってスタートさせたプロジェクトであり、インターネットサービス企業の多くが参加しオープンソースで開発が進められています。そんなメンバー間での新しルール・仕様があります。

AMP引用:huffingtonpost

  • JavaScriptは原則使用できない
  • imgiframeは専用タグに書き換えられる
  • CSSサイズは、50kbが上限。外部ファイルの読み込みは減速できない
  • Googleのサーバー上で表示される(対応してもすぐに反映されない)

などなどです。

imgiframeが書き換えられたり、CSSの上限はレイアウトにかなりの影響を及ぼします。

AMPを利用するメリット・デメリット

Google先生の通りに実施していればメリットばかりがあるということでもないです。中途半端にAMP対応しないほうが良い場合もあるのです。

AMP対応したときの最大の3つのメリット

  • 高速化されるので、レスポンスが早く、ユーザーのストレス軽減
  • 検索結果の上位表示がされる可能性が高くなる
  • 検索結果にカルーセル表示で、記事を読まれる確率が上がる

ユーザーはページ表示が3秒かかると離脱すると言われている都市伝説がありますが、高速化によってそのストレスを軽減することが可能です。また、高速化することによりSEO効果もアップします。検索結果の上部に画像付きの記事がカルーセルで表示されていましたら、きになるというよりクリックしやすいです。結果、アクセス数も集まります。いいことだらけですね。

AMP対応のデメリットや注意点

  • htmlのタグの修正など、手間がかかる
  • CSSが反映されず、レアアウトが崩れる場合がある
  • アナリティクスの設定も一手間必要
  • 一部の広告が表示されない

特にしよう禁止タグの影響力は大きいでしょう。

HTML の要素 AMP HTML での扱い
base 使用禁止
img amp-img を利用して下さい。
video amp-video を利用して下さい。
audio amp-audio を利用して下さい。
iframe amp-iframe を利用して下さい。
frame 使用禁止
frameset 使用禁止
object 使用禁止
param 使用禁止
applet 使用禁止
embed 使用禁止
form 使用禁止
input elements input, textarea, select, option 要素、全部禁止

CSSにタグが書かれている場合は、レイアウトが崩れる場合がありますので、凝ったデザインページで導入するに場合は注意が必要です。画像をキャッシュし、または必要最低限の画像やCSS以外はとにかく排除して高速化を目指しているというのが要因でしょう。

WordPressで簡単設置をする

WordPressでのAMP導入はプラグイン「AMP」がありますので、比較的簡単です。「とりあえずAMP化して見て、どうなるか見たい」という方のために、簡単な手順をご紹介します。

amp

WordPressのダッシュボードのプラグイン追加ページかAMPからプラグインをインストールして下さい。あとは有効化して終わりです。

URLが変わります。
通常の記事URLは
http://sophie-rc.jp/persona-manual
です。

AMP対応ページは
http://sophie-rc.jp/persona-manual/amp
になります。

一通りの設定は噛んで王

少し技術的なことをプラスする必要がある

Google Analyticsの設定、別ページになってしまったAMPページのAMP HTMLのバリデーションエラー、推奨されていないタグの修正などが発生する可能性があります。凝ったサイトほどエンジニアの力が必要になってきますので、その点は覚えておきましょう。

しかし、エンジニアの力が必要ということは、工数(費用)がかかるということです。そこで一歩踏み出せない企業も多くいるはずです。ビジネスの世界では先行者利益という言葉ある通り、やったもん勝ちということもしばしばあります。

ニュースサイト・記事系コンテンツ以外でも表示可能

「AMPはニュース、記事系コンテンツのみの対応である」という記事があり、個人的にもそういうものだと思っていましたが、、そうでもないです。しっかりショップ系サイトでもAMP対応と表示され、高速化可能です。

zozo
スマホで検索した結果しっかりAMPと表示されています。

ZOZOTOWNがAMPに対応されていることに気がついた企業は早速対応されているかと思います。ECサイトがAMP対応となれば、商品・物販系だけにとどまらず、自ずと不動産などにもこの波はくるはずです。

最後に

まだまだ、発展途上のAMPではありますが、導入した際のSEO的に見ても良いことですし、ネットショップを運営されているのであれば、購入促進になりますので、やらない手はないです。ただ、少し手間なだけです。

通常サイトと/ampといったように、効果計測で作業ボリュームが増えますが、成果につながる施策であれば手を入れるべきです。

Webを事業の成果につなげたいとお考えであれば、ぜひ一度ご相談ください!

ソフィーリサーチ&コンサルティングは、事業の成果を伸ばすため、実践的な戦略思考力と実行力で徹底的に成果を追求し、クライアントのパートナーとしてWebコンサルティングをさせていただきます。