Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

広告用シェルの作成

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,minimum-scale=1,initial-scale=1">
</head>
<body>
</body>
</html>

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

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

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

<!doctype html>
<html 4ads>
<head>
...

注意 – 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></style> を使用し、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,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
  <style amp4ads-boilerplate>body{visibility:hidden}</style>
</head>
<body>
</body>
</html>

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