AMP

AMP 基礎知識

More than 1 year has passed since last update.

最近よく耳にするAMPについての基礎知識をまとめました。


AMPとは


Accelerated Mobile Pages

直訳すると『加速されたモバイルページ』

GoogleとTwitterなどのIT企業9社で共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)。


対応するとどうなるか


  • モバイル環境でのページ表示が高速化(15〜85%早くなるらしい)

  • モバイルのgoogle検索画面で カルーセル形式で表示され、AMPマーク付きで表示される

    これ → スクリーンショット 2017-03-30 16.20.44.png


仕組み

ウェブページの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で実装されています。