AMP TECHBLOG

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は以下の１行のみとなっています。

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

CSS

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

CSS transtion/animation

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

/* これはOK */
.amp-animate .box {
    transform: rotate(180deg);
    transition: transform 2s;
}

/* これはNG */
.amp-animate .box {
    color: red;  /* non-animation property not allowed in animation selector. */
    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 に慣れておくとちょっとはアドバンテージになるのかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です