AMP Projectが広告表示を高速化させたAMP4ADSの準備を進めている件

WordPressでプラグインを入れたりしてAMP対応している方はご存知だと思いますが、Search Consoleの「検索での見え方」→「Accelerated Mobile Pages」でAMPで作ったページのエラーを確認することができます。ここでエラーのあるページがあると「検証ツールを実行」というボタンからAMP検証ツールへ飛ぶことができます。先日これを見ると、HTML Formatのところに『AMP』と『AMP4ADS』というのが選択できるようになっていました。これはなんだ?と思ってググってみると、どうやらAMPのサブセットとしてAMP4ADSというのが準備されているようなので、今更ですがその概要をまとめて見ました。

AMP4ADSとは? – 手っ取り早く知りたい人へ –

Adwardsなどの通常の広告は、イメージ広告 – AdWords 広告掲載のポリシー ヘルプにあるように

  • アニメーション以外のイメージ広告(jpg/png/gif形式)
  • アニメーションイメージ広告(gif形式)

に加えて「HTML5広告」というのがあります。Google Web Designerはそれを作るための一つのツールで、HTML5/CSS/JavaScriptを使って広告を作成することができます。このHTML5広告ではJavaScriptをゴリゴリ走らせたりするものもあって、AMPページではこうして作られた広告を表示する際にはユーザーエクスペリエンスを損なわないように、コンテンツの表示を優先して広告が遅れて表示されるような仕組みになっています。そうした遅延をなくすために、広告そのものをAMPで作ってしまって、それをAMPページで表示させる場合には遅延なく瞬時に表示されるようにしますよ、というのがこのAMP4ADSです。AMP自体がユーザー側でのJavaScriptを禁止しているので、AMP4ADSでも当然禁止されます。ということは広告内でアニメーションさせる場合は、CSSを使うかamp-carousel等のAMPコンポーネントを使用するようにしなさい、ということになります。

なぜAMP4ADSが必要なのか?

AMP4ADSの導入動機についてはMalte UblさんのMediumでの記事“But what about the ads?”GitHubのissueで詳しく述べられています。GitHubのissueの”Motivation”のところでは

Currently <amp-ad> elements can request ad creatives written in classical HTML+JS, which therefore must be sequestered inside cross-domain iframes and loaded only after a delay, to mitigate the potential UX degradation they could cause. Even so, long-running JS inside the ads can degrade scrolling, swiping in the carousel, etc.

We propose a new ad rendering path which continues to allow HTML+JS ads in cross-domain iframes, but also allows an ad request to instead return an ad written in AMP HTML. If the ad response is AMP, then the ad can be rendered early by splicing it into the surrounding AMP page, with no need for iframing or delays, without risk to the page’s UX. As a side benefit, we speed up HTML+JS ads as well, because the ad request will still run earlier than it does today; only the rendering will be delayed.

と書かれています。「現在のamp-ad要素による広告表示では、広告の表示がユーザーエクスペリエンスを損ねることがないよう、クロスドメインのiframe内で遅れて表示されるようになっている」が、「もし広告自体がAMPで作成されているなら、ページ全体のユーザエクスペリエンスを損ねずに、iframe化したり遅延したりすることなく広告を表示させることができる」そうです。Mediumの記事内ではNon-A4AとA4Aでの広告表示時間を示した動画があります。これをみると、AMPで遅かった普通の広告表示が、AMP広告(A4A)だと瞬時に表示されていることが見て取れます。

2016年10月13日現在でのルール

まだドラフト段階ですが、AMP4ADSを有効化させるためのルールがAMP A4A AD CREATIVE FORMATにあります。AMPよりもかなり制限がきつくなっています。広告用のAMPなのでそれに必要のないものが削られている感じです。以下、そのルールです。

A4Aフォーマットルール

  1. 最低限としてAMPのフォーマットルールに従う
  2. html要素は<html ⚡4ads><html amp4ads>にする
  3. AMPと違って、<link rel="canonical">を含めてはいけない
  4. ビデオの自動再生は禁止
  5. オーディオの自動再生は禁止
  6. amp-analytics要素の可視トラッキングは"visibilitySpec": { "selector": "amp-ad" }のみ

Boilerplate

AMPとは異なり、boilerplateは以下の1行のみとなっています。

<style amp4ads-boilerplate>body{visibility:hidden}</style>

CSS

  1. position:fixedposition:stickyは禁止
  2. touch-actionは禁止
  3. CSSは20,000バイトまで
  4. transitionanimationは制限される
  5. ベンダープレフィックスはプレフィックスなしのエイリアスとして扱われるため、プレフィックスなしと同等の制限を受ける

CSS transtion/animation

セレクタ内で指定することができるのはtransition, animation, transform, visibility, opacityプロパティのみを含む場合だけ(例えばcolorプロパティは含めることができない)で、.amp-animateに続くセレクタのみで許可されています。また、transitionで指定できるプロパティはopacitytransformのみだそうです(background-colorを変えたりはできない)。例えば

.amp-animate .box {
    transform: rotate(180deg);
    transition: transform 2s;
}

はOKだけど、

.amp-animate .box {
    color: red;  // non-animation property not allowed in animation selector
    transform: rotate(180deg);
    transition: transform 2s;
}

.box {
    transform: rotate(180deg);
    transition: transform 2s;
}

はアウトだということです。

AMPコンポーネント

現在のところ、使用できるコンポーネントは以下のコンポーネントのみとなっています。

  • amp-accordion
  • amp-analytics
  • amp-anim
  • amp-audio
  • amp-carousel
  • amp-fit-text
  • amp-font
  • amp-form
  • amp-img
  • amp-pixel
  • amp-social-share
  • amp-video

HTML文書のタグ

列挙すると長いので省略します。禁止されているところでは

  • <link rel=stylesheet>以外の<link rel=...>
  • <meta charset=utf8><meta name=viewport>以外のmeta要素
  • noscript要素
  • <script type="application/ld+json">

あたりが挙げられています。広告用のAMPには構造化データ等が不要なので、当然これらが入っていれば認められませんよ、ということになっています。

まとめ

ウェブ制作会社がAMP広告(AMP4ADS)を作成するようになるのはまだだいぶ先かもしれませんが、もしGoogleが本気でAMP Projectを進めようとしているなら、Google Web DesignerでAMP4ADSが対応になるかもしれません。それまでにAMPに慣れておくとちょっとはアドバンテージになるのかもしれません。