STASEON

企業とクリエイターのマッチングサービス

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

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

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

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

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

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

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

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

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

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

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

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

AMPページのデザイン原則

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

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

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

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

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

※参考:AMP DESIGN PRINCIPLES

AMP HTMLの実装について

AMPページは通常のHTMLとは大きく異なる、「AMP HTML」と呼ばれる仕様の実装が必要です。AMP HTMLでは高速化を目的としているため、以下のような制限があります。

・CSSはインクルードの展開またはインライン記述が必要

・独自のJavaScriptは読み込めない

・img要素は縦横のサイズを記述しなければならない

ただし一般的なCSSのほとんどは使用可能で、JavaScriptについても独自のものは読み込めないものと、AMPコンポーネントが多数用意されています。

実装するにあたっては、以下の3つの要素を準備して、AMP HTMLフォーマットを用意します。

①AMP HTML・・・高速化に特化したHTML

②AMP JS・・・コンテンツの高速ロードを実現したJS

③AMP Cache・・・キャッシュ機能で高速化を実現するもの

モバイルにおけるユーザー体験については、高速化は非常に重要で、サイトの表示に3秒以上かかると4割のユーザーは離脱すると言われています。WEBサイト界隈では、2〜3秒以内に抑えるのが望ましいと言われています。

※参考: Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増

AMPは単に表示速度を高速化するだけでなく、ユーザーの体験を大きく変えることに大きく貢献します。これからのモバイルユーザーの体験向上に不可避な取り組みでもありますので、まだAMPに対応していないWebサイトの場合は、ぜひ検討してみてください。

▼関連記事

・【WebクリエイターのためのSEO】SEOで評価を落とさないためにサイトの高速化が必要なわけ
・【クリエイターのためのSEO】SEOを行うのに押さえておくべき基本ツール5選
・コンテンツマーケティングにおけるSEOのポイント(設計編1/2)