TIPS 2019.4.12

【WebクリエイターのためのSEO】Webサイトの高速化を実現するAMP導入のポイント

現在のSEOではユーザー体験が重要視されてきています。ページの表示速度もユーザー体験に大きく影響するものの一つです。とりわけ検索主体のウェイトがPCからモバイルに移行するにつれ、不安定な回線でも高速なレスポンスが要求されています。

AMPはモバイルページを高速に表示するための技術であり、Acceralated Mobile Pageの略語となります。AMPはGoogle社とTwitter社が共通で開発した仕様であり、オープンソースで開発されている、モバイルユーザーの体験向上を目的とした仕様です。現在Chrome、Firefox、Edge、Safariなど主要なブラウザには全て対応しています。

今回はAMPの効果やその表示、導入方法などを解説していきます。

AMP導入によって得られる効果

AMPの導入によって得られる効果としては、大きく２つあります。

①Webページが高速で表示される

②検索結果一覧において、検索結果のリッチ表示を実現する

その名の通り高速化されるのは前述した通りですが、②のリッチ表示とはどのようなものでしょうか？AMPが導入されたページについては、モバイル版の検索結果に「カミナリ」のマークとともに表示されることがあります。その際通常の検索結果だけでなく、トップニュースや画像とともに表示されるトップカルーセルに表示されることがあります。

またAMPページを検索結果でタップした場合は、表示したコンテンツを提供するWebサイトではなく、キャッシュされたページが高速表示される仕様となっています。AMPページが表示される際は、URLも本来のWebサイトのURLでなく「www.google.com/amp/—-」というURLになります。

現状ではAMPを理解して、カミナリマークのページを選択しているユーザーは多くないと考えられますが、検索結果のリッチ表示はクリック率の向上にも直結します。加えてページ表示の高速化はユーザーの滞在時間やコンテンツ読了率の向上にもつながるため、副次的なSEO効果を得られる可能性があります。

AMPページのデザイン原則

AMPページにおけるデザインについては、推進するAMPプロジェクトが以下のようなデザイン原則を提起しています。以下に筆者が重要と考えるものをいくつか抜粋します。

・実装のしやすさよりもユーザー体験を最優先する

・60fpsで確実に動作する現在のモバイル環境で瞬時に読み込まれるものを実装する

・適切な階層で問題を解決する。（安易にクライアント側対処にしない。）

表示範囲の限られた高速化については、CSSのチューニングや画像の圧縮のようなエンジニアサイドだけでなく、デザインサイドでも留意しながらデザインをしていく必要があります。一方で最も大切にするのは「ユーザー体験の向上」です。ウェブの一部のみ高速化した場合でも、ユーザーの使い勝手を損なう場合もあります。あくまでもユーザー体験を念頭に、チューニングしていくところはデザイナーにも大きく関わる領域と言えるでしょう。

※参考：AMP DESIGN PRINCIPLES