最近よく耳にするAMPについての基礎知識をまとめました。
AMPとは
Accelerated Mobile Pages
直訳すると『加速されたモバイルページ』
GoogleとTwitterなどのIT企業9社で共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)。
対応するとどうなるか
- モバイル環境でのページ表示が高速化（15〜85％早くなるらしい）
- モバイルのgoogle検索画面で カルーセル形式で表示され、AMPマーク付きで表示される
これ →
仕組み
ウェブページのHTMLをあらかじめGoogleあるいはTwitter側でキャッシュすることで、読み込む分の時間を大幅に削減する。
基本的なルール
- AMP HTML（AMP specに従った、拡張されたHTML）を使用
- CSSはEmbedded StyleSheetで記述
- AMP JS以外のjavascriptは禁止（非同期のもののみ許容）
日本国内の導入事例
「朝日新聞」、「映画.com」、「zakzak」、「産経ニュース」、「SankeiBiz」、「日刊スポーツ」、「BLOGOS」、「毎日新聞」、「マイナビニュース」、「レスポンス」
いずれも記事ページ。
今は基本的に記事ページでのみ使用されているが、今後は様々なコンテンツに対応予定らしいです。
実装方法
以下はAMP HTMLの仕様に沿った記述です。
普通のHTMLの記述だとエラーがでます。
<html> → <html ⚡︎> もしくは <html amp>
<style> → <style amp-custom>
<img> → <amp-img>
<video> → <amp-video>
<audio> → <amp-audio>
<iframe> → <amp-iframe>
禁止タグ
<base>
<frame>
<frameset>
<object>
<param>
<applet>
<embed>
<form>
<input>
<textarea>
<select>
<option>
SNSとか広告とかGAとかpluginとかを実装するタグ
<amp-analytics>
<amp-ad>
<amp-carousel>
<amp-anim>
<amp-facebook>
<amp-youtube>
<amp-twitter>
<amp-vine>
<amp-instagram>
<amp-pinterest>
<amp-lightbox>
<amp-image-lightbox>
メリット
- サイト表示高速化によるユーザーストレス改善
- 検索結果直下にカルーセル表示されることによるクリック率上昇
- 検索結果の上位表示（Googleは、AMPを検索順位に反映させることは「今のところは」考えていないとコメントしているが為、予定）
- プラグインが用意されているので、スライドなどの実装が簡単
デメリット
- 既存のHTMLで組まれたページで、禁止タグを使用していたり、javascriptを使用しているページなどをAMP HTML形式で完全に再現するのは難しい。
- AMP HTMLだけで従来のHTMLのページを再現することはできないので、従来のHTMLとAMP HTMLの2つを管理する必要がある。
- 全ての広告タグに対応しているわけではなく、以下が現状対応しているベンダー一覧だそうです。
海外
- A9
- AdReactor
- AdSense
- AdTech
- Doubleclick
国内
- i-mobile
おわりに
以上が簡単なAMPについての説明です。
AMPは仕様のアップデート頻度が激しいので、この投稿に書いてあることも変わって行く可能性が高いです。
現状でも、最初からAMP HTMLでの実装を前提にしていれば、記事ページのようなテキストベースのページは割と簡単に実装できると思います。
まだまだ発展途上で、できないことは多いですが、プロジェクトに賛同するデベロッパーやパブリッシャーは増加傾向とのことで、今後改善されることを期待したいです。
以下のサイトを見れば、どんなことが可能なのかを簡単に確認できます。
公式サイト
Accelerated Mobile Pages Project
公式サンプルサイト
AMP by Example
どちらもAMP HTMLで実装されています。