広告用シェルの作成
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>
<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 は必要ないため、このタグは追加しません。
以下は、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 ファイルは完成しましたが、まだ中身がありませんので、画像広告を作成することにしましょう。