最近よく耳にする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で実装されています。