本日は、モバイルでのサイト表示が爆速となるAMPについて解説致します！モバイル検索した際にニュースサイトなどでAMPマークの表示を見られた事がある方も多いと思います。AMPとは一体何なのか？！見ていきたいと思います。

Accelerated Mobile Pages・通称AMP(アンプ)とは？

日本語で表現しますと「加速化モバイルページ」となります。ユーザーがモバイル検索を使用した際にサイトを素早く閲覧出来るシステムを言います。

モバイル検索ユーザーはPC検索ユーザーよりもサイトの表示スピードが2秒遅いだけで、直帰率が50％増加する傾向にあると言われています。そういったモバイル検索ユーザーを逃さないようにサイトの表示スピードを上げるシステムを検索エンジンは実装しました。

また、AMPはモバイルユーザーにありがちな通信速度制限によるサイトの読み込み遅延の状況でも、スピーディに表示出来るといった優位な点があります。

AMPをサイトに実装するには？

AMPはサイト構造が通常のHTMLとは異なるため実装するのは簡単ではありません。AMP宣言とviewportが必須となり、AMP専用のタグを使用すること、通常のHTMLでは使用していたが使用出来なくなるタグがあること等々、AMPのルールが存在します。

AMPに必要な3つの構成

①AMP JS

AMPHTMLはAMP専用のJavaScript以外は使用出来ません。
読み込み動作の素早さを優先する静的なコンテンツが想定されているので、通常のHTMLで使用されているHTML＋CSSでのJSは使用出来ません。

②AMP CDN

AMP JSを配信するCDN(Content Delivery Network-コンテンツ配信ネットワーク)にて、AMPを発信するページは全てAMP CDNでAMP JSを読み込まれることになります。

AMP CDNで読み込まれる事によって各AMPページでのキャッシュが有効となります。

③AMP HTML

AMPのルールに則ったAMP専用のHTMLタグでの記述が必要となります。
例えば画像を挿入する場合は、「imgタグ」を「amp-img」タグへと変更が必要となり、width(横幅)・height(縦幅)・src(画像のパス)が記述必須となります。また、imgタグでは不要だった閉じタグも必要となります。

AMPにはこの他、様々な専用タグが存在しています。

AMPを実装するメリット

AMPを実装することでモバイルユーザーの離脱を軽減することが出来、サイト内でのユーザーの動きも活性化されていくことに繋がります。

最後になりますが、AMP対応には専門的な知識が必要です。
弊社で対応できることもありますので、ご検討される際にはお気軽にご相談下さい！