広告用シェルの作成

AMPHTML 広告に必要な HTML は、AMP ページに必要な AMPHTML が変形したものです。AMPHTML 広告のシェルを作成して、必要となるコードに慣れましょう。

使い慣れているテキストエディタで、my-amphtml-ad.html という HTML ファイルを作成します。以下の HTML マークアップをそのファイルにコピーします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

このマークアップは、有効な基本の HTML ファイルのマークアップです。meta ビューポートタグが含まれているところに注目してください。レスポンシブビューポートを使用しています。

では、この HTML を AMPHTML 広告になるように変更しましょう。

<html> タグに、⚡4ads 属性を追加します。この属性は、ドキュメントを AMPHTML 広告として識別するものです。または、amp4ads 属性を指定することもできます。これも有効です。

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

注意 – AMP ページとは異なり、AMPHTML 広告には <link rel="canonical"> タグは必要ありません。

AMPHTML 広告には独自の AMP ランタイムバージョンが必要であるため、以下の <script> タグをドキュメントの <head> セクションに追加します。

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

AMPHTML 広告クリエイティブには、AMP ページとは異なる非常に単純なボイラープレートスタイル行が必要です。以下のコードを <head> セクションに追加します。

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

AMPHTML 広告にスタイルを指定するには、<head> セクションに <style amp-custom> を使用し、CSS をインラインで AMPHTML ドキュメントに埋め込む必要があります。ここでは基本的な画像広告をレンダリングしており、CSS は必要ないため、このタグは追加しません。

注意– AMPHTML 広告におけるインラインスタイルシートの最大サイズは 20 キロバイトです。詳細は、AMPHTML 広告仕様の CSS 要件を参照してください。

以下は、HTML ファイルの全コードです。

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

これで、AMPHTML ファイルは完成しましたが、まだ中身がありませんので、画像広告を作成することにしましょう。

スタートガイド