AMP HTML 仕様

AMP HTML は、一定のベースラインパフォーマンス特性を保証するようにニュース記事などのコンテンツページを作成するための HTML のサブセットです。

HTML のサブセットであるため、HTML で利用可能なタグと機能のフルセットに制限がありますが、新しいレンダリングエンジンを開発する必要はありません。既存のユーザエージェントは他のすべての HTML と同じように AMP HTML をレンダリングできます。

AMP で許可されているものと許可されていないものに関心がある場合は、AMP の制限事項に関する入門ビデオをご覧ください。

また、AMP HTML ドキュメントを Web サーバにアップロードして、他の HTML ドキュメントと同じように配信することもできます。サーバ用の特別な構成は必要ありません。しかしながら、それらはまた、オプションで AMP ドキュメントをプロキシする特別な AMP サービングシステムを通して提供されるように設計されています。これらのドキュメントはそれらを自身のオリジンから提供し、追加のパフォーマンス上のメリットを提供するドキュメントに変換を適用することが許可されています。このようなサービングシステムが行う可能性のある最適化の不完全なリストは次のとおりです:

画像の参照を、閲覧者のビューポートに合わせたサイズの画像に置き換えます。
折り目の上に表示されるインライン画像。
CSS 変数をインライン化します。
拡張コンポーネントをプリロードします。
HTML と CSS を縮小します。

AMP HTML は、寄稿されているが一元管理されホストされているカスタム要素のセットを使用して、AMP HTML ドキュメントに見られるかもしれない画像ギャラリーなどの高度な機能を実装します。カスタム CSS を使用してドキュメントをスタイリングすることはできますが、カスタム要素を介して提供されるものを超えて JavaScript を作成しても、そのパフォーマンス目標を達成することはできません。

AMP フォーマットを使用することで、コンテンツ制作者は AMP ファイル内のコンテンツをクロール(robots.txt の制限の対象となる)、キャッシュ、および第三者による表示が可能になります。

パフォーマンス

予測可能なパフォーマンスは、AMP HTML の重要な設計目標です。主に私達はページのコンテンツがユーザによって消費/使用されるまでの時間を減らすことを目指しています。具体的には、次のことを意味します:

ドキュメントをレンダリングして完全にレイアウトするために必要な HTTP リクエストは最小限に抑えるべきです。
画像や広告などのリソースは、ユーザに見られる可能性が高い場合にのみダウンロードしてください。
ブラウザは、リソースを取得しなくても、ページ上のすべてのリソースに必要なスペースを計算できるはずです。

AMP HTML フォーマット

サンプルドキュメント

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html">
    <meta name="viewport" content="width=device-width">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

必要なマークアップ

AMP HTML ドキュメントに必須ものは次の通りです。

Doctype <!doctype html>で始まります。🔗
c トップレベルの <html ⚡> タグを含みます (<html amp> も同様に受け付けられます)。🔗
<head> タグと <body> タグを含みます(これらは HTML ではオプションです)。🔗
通常の HTML バージョンの AMP HTML ドキュメントを指すか、そのような HTML バージョンが存在しない場合はそれ自体を指す <link rel="canonical" href="$SOME_URL"> タグを head の中に入れます。🔗
head タグの最初の子として <meta charset="utf-8"> タグを含めます。🔗
head タグの中に <meta name="viewport" content="width=device-width"> タグを含めます。minimum-scale=1 と initial-scale=1 を含めることもお勧めです。🔗
head タグの中に <script async src="https://cdn.ampproject.org/v0.js"></script> タグを含めます。🔗
head タグに AMP ボイラープレートコード (head > style[amp-boilerplate] と noscript > style[amp-boilerplate]) を入れてください。🔗

メタデータ

AMP HTML ドキュメントには標準化されたメタデータで注釈を付けることをお勧めします。例えば Open Graph Protocol、Twitter Cards などです。

AMP HTML ドキュメントは schema.org/CreativeWork または schema.org/NewsArticle や schema.org/BlogPosting のようなより具体的なタイプでマークアップすることをお勧めします。

HTML タグ

HTML タグは AMP HTML では変更なしに使用できます。特定のタグには同等のカスタムタグ (<img> と <amp-img> など) があり、他のタグは一切禁止されています:

タグ	AMP HTML の状況
script	タイプが `application/ld+json` または `text/plain` でない限り禁止されています。(必要に応じて他に実行不可能な値が追加されるかもしれません。) 例外として、AMP ランタイムをロードするための必須の script タグと、拡張コンポーネントをロードするための script タグがあります。
noscript	許可されています。ドキュメント内のどこでも使用できます。指定した場合、JavaScript がユーザによって無効にされていると、`<noscript>` 要素内のコンテンツが表示されます。
base	禁止されています。
img	`amp-img`に置き換わりました。注意: `<img>` は HTML5 に準拠した Void 要素なので、終了タグはありません。ただし、`<amp-img>` には終了タグ `</amp-img>` があります。
picture	禁止されています。[fallback](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders?format=websites) 属性を使用して異なる画像フォーマットを提供するか、複数の [`<amp-img>` の `srcset`](https://amp.dev/documentation/components/amp-img#attributes)を指定してください。
video	`amp-video` に置き換わりました。
audio	`amp-audio` に置き換わりました。
iframe	`amp-iframe` に置き換わりました。
frame	禁止されています。
frameset	禁止されています。
object	禁止されています。
param	禁止されています。
applet	禁止されています。
embed	禁止されています。
form	許可されています。amp-form 拡張子を含める必要があります。
input elements	`<input[type=image]>`、`<input[type=button]>`、`<input[type=password]>`、`<input[type=file]>` などの無効な一部の入力タイプを除いて、ほとんどの場合に使用できます。関連するタグも許可されています：`<fieldset>`、`<label>`
button	許可されています。
`style`	amp-boilerplate に必須のスタイルタグ。カスタムスタイルの目的で、head タグに1つの追加スタイルタグを使用できます。このスタイルタグは、`amp-custom` 属性を持つ必要があります。🔗
link	microformats.org に登録されている `rel` 値は許可されています。`rel` 値がホワイトリストにない場合は、issue を送信してください。`stylesheet`、およびブラウザでの副作用のある `preconnect`、`prerender`、`prefetch` などの値は許可されていません。ホワイトリストのフォントプロバイダからスタイルシートを取得する特殊なケースがあります。
meta	`http-equiv` 属性は特定の許容する値に使用できます。詳細は AMP バリデータの仕様を参照してください。
`a`	`href` 属性値は `javascript:` で始まってはいけません。設定されている場合、`target` 属性の値は `_blank` でなければなりません。それ以外の場合は許可されています。🔗
svg	ほとんどの SVG 要素は許可されています。

バリデーターの実装は上記のタグを取り除いた HTML5 仕様に基づくホワイトリストを使うべきです。AMP タグ付属文書を参照してください。

条件付き HTML コメントは許可されていません。

HTML 属性

on で始まる属性名 (onclick や onmouseover など) は AMP HTML では許可されていません。リテラル名 on (接尾辞なし) の属性は許されます。

xmlns、xml:lang、xml:base、xml:space などの XML 関連の属性は、AMP HTML では許可されていません。

先頭に i-amp- が付いた内部 AMP 属性は AMP HTML では許可されていません。

クラス

AMP HTML では、内部で AMP クラス名の前に -amp- と i-amp- を付けることはできません。

接頭辞 amp- のクラス名の意味については AMP のドキュメントを参照してください。これらのクラスの使用は許可されており、AMP ランタイムおよび拡張機能の機能の一部をカスタマイズ可能にすることを意図しています。

他のすべての作成したクラス名は AMP HTML マークアップで許可されています。

ID

-amp- と i-amp- をプレフィックスとする内部 AMP ID は AMP HTML では許可されていません。

amp-access のような、これらの拡張によって提供される機能との衝突を避けるために、amp- と AMP ID を使う前に、特定の拡張について AMP のドキュメントを調べてください。

AMP HTML マークアップでは、他のすべての作成した ID が許可されています。

リンク

javascript: スキーマは許可されていません。

スタイルシート

主要なセマンティックタグと AMP カスタム要素には、レスポンシブドキュメントの作成を合理的に簡単にするためのデフォルトスタイルが付属しています。デフォルトスタイルを無効にするオプションが将来追加される可能性があります。

@ 規則

次の @ 規則はスタイルシートで使用できます。

@font-face, @keyframes, @media, @page, @supports.

@import は許可されません。他のものは将来追加されるかもしれません。

作成したスタイルシート

文書の先頭にある 1 つの <style amp-custom> タグまたはインラインスタイルを使ってドキュメントにカスタムスタイルを追加できます。

@keyframes ルールは <style amp-custom> で許可されています。しかし、それらが多すぎる場合は、追加の <style amp-keyframes> タグ内に配置することをお勧めします。これは AMP ドキュメントの最後に配置する必要があります。詳しくは、このドキュメントの Keyframes スタイルシートのセクションをご覧ください。

セレクタ

作成したスタイルシートのセレクタには、次の制限があります。

クラス名とタグ名

作成したスタイルシートのクラス名、ID、タグ名、属性は文字列 -amp- と i-amp- で始めることはできません。これらは AMP ランタイムによる内部使用のために予約されています。つまり、ユーザのスタイルシートは -amp- クラス、i-amp- ID、i-amp- タグと属性の CSS セレクタを参照できないということです。これらのクラス、ID、およびタグ/属性名は、作成者によってカスタマイズされることを意図していません。ただし、これらのコンポーネントの仕様で明示的に禁止されていない CSS プロパティについては、作成者が amp- クラスおよびタグのスタイルをオーバーライドできます。

クラス名の制限を回避するために属性セレクタを使用しないようにするために、CSS セレクタに -amp- と i-amp- で始まるトークンと文字列を含めることは一般的に許可されていません。

Important

!important 修飾子の使用は許可されていません。これは、AMP がその要素サイジング不変量を強制できるようにするために必要な要件です。

プロパティ

AMP は、一般的なブラウザで GPU を高速化できるプロパティの遷移とアニメーションのみを許可します。現在のホワイトリストは、opacity、transform (-vendorPrefix-transformも) です。

以下の例では、<property> は上記のホワイトリストに含まれている必要があります。

transition <property> (-vendorPrefix-transition も)
@keyframes name { from: {<property>: value} to {<property: value>} } (@-vendorPrefix-keyframes も)

overflow (そして overflow-y、overflow-x) は “auto” や “scroll” のようにはスタイル設定できません。AMP ドキュメント内のユーザ定義要素にスクロールバーを含めることはできません。

最大サイズ

作成したスタイルシートまたはインラインスタイルが合わせて 75,000 バイトを超える場合は検証エラーです。

Keyframe スタイルシート

<style amp-custom> に加えて、<style amp-keyframes> タグを追加することもできます。これは特にキーフレームアニメーションに許可されています。

以下の制限が <style amp-keyframes> タグに適用されます:

ドキュメントの <body> 要素の最後の子としてのみ配置できます。
@keyframes、@media、@supports のルールとそれらの組み合わせのみが含まれます。
500,000 バイトを超えないようにしてください。

<style amp-keyframes> タグが存在するのは、適度に複雑なアニメーションであってもキーフレームの規則はしばしばかさばっているため、CSS の解析が遅くなり、最初のコンテンツの描画が内容豊富なものになるためです。しかし、そのような規則はときに <style amp-custom> に課されたサイズ制限を超えます。そのようなキーフレーム宣言をドキュメントの一番下の <style amp-keyframes> に置くことで、サイズ制限を超えることができます。キーフレームはレンダリングをブロックしないため、最初のコンテンツペイントをブロックして解析することも避けられます。

例:

<style amp-keyframes>
@keyframes anim1 {}

@media (min-width: 600px) {
  @keyframes anim1 {}
}
</style>
</body>

カスタムフォント

作成したスタイルシートにはカスタムフォントを含めることができます。サポートされている 2 つの方法はホワイトリストのフォントプロバイダを指すリンクタグと @font-face インクルードです。

例:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

フォントプロバイダは、CSS のみの統合をサポートし、HTTPS 経由で機能する場合はホワイトリストに登録できます。以下の起源は現在リンクタグを介したフォント提供を許可されています:

Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Font Awesome: https://maxcdn.bootstrapcdn.com
Typekit: https://use.typekit.net/kitId.css (適宜 kitId を置き換えてください)

実装者注: このリストに追加することは AMP Cache CSP ルールへの変更を必要とします。

作成した自分のカスタム CSS を介して @font-face CSS 命令を介してすべてのカスタムフォントを自由に含めることができます。@font-face で取り込まれたフォントは HTTP または HTTPS スキームで取り出さなければなりません。

AMP ランタイム

AMP ランタイムは、すべての AMP ドキュメント内で実行される JavaScript の一部です。AMP カスタム要素の実装を提供し、リソースのロードと優先順位付けを管理し、オプションで開発中に使用するための AMP HTML のランタイムバリデータを含みます。

AMP ランタイムは、AMP ドキュメント <head> の必須の <script src="https://cdn.ampproject.org/v0.js"></script> タグを介してロードされます。

AMP ランタイムは、どのページでも開発モードにすることができます。開発モードでは埋め込みページで AMP 検証がトリガーされ、検証ステータスとエラーが JavaScript 開発者コンソールに送信されます。開発モードはページの URL に #development=1 を追加することで起動されます。

リソース

画像、ビデオ、オーディオファイル、広告などのリソースは、<amp-img> などのカスタム要素を通じて AMP HTML ファイルに含める必要があります。それらをロードしてユーザに表示するかどうか、またいつ表示されるかは AMP ランタイムによって決定されるため、これらを「管理対象リソース」と呼びます。

AMP ランタイムの読み込み動作については特に保証はありませんが、一般的にはリソースを素早く読み込むようにしてください。ランタイムは、現在ビューポート内にあるリソースに優先順位を付け、ビューポートへの変更を予測し、それに応じてリソースを事前に読み込もうとします。

AMP ランタイムは、現在ビューポートにないリソースをアンロードするか、iframe などのリソースコンテナを再利用して RAM 全体の消費量を減らすことをいつでも決定できます。

AMP コンポーネント

AMP HTML は、「AMP コンポーネント」と呼ばれるカスタム要素を使用して、<img> や <video> などの組み込みリソースローディングタグを置き換えたり、画像ライトボックスやカルーセルなどの複雑なインタラクションを伴う機能を実装します。

サポートされているコンポーネントの詳細については AMP コンポーネント仕様を参照してください。

サポートされている AMP コンポーネントは 2 種類あります:

ビルトイン
拡張

ビルトインコンポーネントは AMP ドキュメント内で常に利用可能で、<amp-img> のような専用のカスタム要素を持ちます。拡張コンポーネントはドキュメントに明示的に含まれていなければなりません。

共通の属性

`layout`, `width`, `height`, `media`, `placeholder`, `fallback`

これらの属性は要素のレイアウトを定義します。ここでの主な目標は、JavaScript またはリモートリソースがダウンロードされる前に、要素を表示し、そのスペースを適切に予約できるようにすることです。

レイアウトシステムについての詳細は AMP レイアウトシステムを参照してください。

`on`

on 属性は要素にイベントハンドラをインストールするのに使われます。サポートされているイベントは要素によって異なります。

構文の値は、フォームの単純なドメイン固有の言語です:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

例: on="tap:fooId.showLightbox"

methodName が省略された場合、要素に対して定義されていればデフォルトのメソッドが実行されます。例: on="tap:fooId"

ドキュメント化されている場合、一部のアクションは引数を取ります。引数は key=value 記法で括弧の間に定義されます。許容される値は:

引用符で囲まれていない単純な文字列: simple-value;
引用符付き文字列: "string value" もしくは 'string value';
ブール値: true or false;
数値: 11 or 1.1.

2 つのイベントをセミコロン ; で区切ることで、要素上の複数のイベントを待ち受けることができます。

例: on="submit-success:lightbox1;submit-error:lightbox2"

AMP アクションとイベントについての詳細を参照してください。

拡張コンポーネント

拡張コンポーネントは、必ずしも AMP ランタイムに付属しているわけではないコンポーネントです。代わりに、それらは明示的にドキュメントに含まれていなければなりません。

拡張コンポーネントはこのようにドキュメントの先頭に <script> タグを含めることでロードされます:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<script> タグは async 属性を持ち、要素の名前を参照する custom-element 属性を持つ必要があります。

ランタイム実装はこれらの要素のプレースホルダーをレンダリングするために名前を使うかもしれません。

スクリプトの URL は https://cdn.ampproject.org で始まり、/v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js の非常に厳密なパターンに従う必要があります。

URL

拡張コンポーネントの URL は次の形式です:

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js

バージョン管理

AMP バージョン管理ポリシーを参照してください。

拡張テンプレート

テンプレートは、言語固有のテンプレートと提供された JSON データに基づいて HTML コンテンツをレンダリングします。

サポートされているテンプレートの詳細については、AMP テンプレートの仕様を参照してください。

拡張テンプレートは AMP ランタイムに同梱されていないため、拡張要素と同様にダウンロードする必要があります。拡張コンポーネントはこのようにドキュメントの先頭に <script> タグを含めることでロードされます:

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<script> タグは async 属性を持っていなければならず、そしてテンプレートの型を参照する custom-template 属性を持っていなければなりません。スクリプトの URL は https://cdn.ampproject.org で始まり、 /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.jsという非常に厳密なパターンに従う必要があります。

テンプレートは次のようにドキュメント内で宣言されています:

<template type="amp-mustache" id="template1">
Hello {{you}}!
</template>

type 属性は必須であり、宣言された custom-template スクリプトを参照しなければなりません。

Tid 属性はオプションです。個々の AMP 要素はそれら自身のテンプレートを発見します。典型的なシナリオでは、AMP 要素がその子の中から ID で参照される <template> を探します。

テンプレート要素内の構文は、特定のテンプレート言語によって異なります。ただし、テンプレート言語は AMP 内で制限される可能性があります。例えば、"template" 要素に従って、すべてのプロダクションは有効な整形式の DOM 上になければなりません。すべてのテンプレート出力は、AMP に準拠した出力を保証するためにサニタイズすることもあります。

拡張テンプレートの構文と制限事項については、拡張テンプレートのドキュメントを参照してください。

URL

拡張コンポーネントの URL は次の形式です:

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js

バージョン管理

詳細については、カスタム要素のバージョン管理を参照してください。

セキュリティ

AMP HTML ドキュメントは、キーワード unsafe-inline と unsafe-eval を含まないコンテンツセキュリティポリシーで提供されたときにエラーを引き起こしてはいけません。

AMP HTML フォーマットは、常にそうなるように設計されています。

すべての AMP テンプレート要素は、AMP リポジトリに送信する前に AMP セキュリティレビューを通過する必要があります。

SVG

現在、以下の SVG 要素が許可されています:

基本: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
形状: "circle", "ellipse", "line", "polygon", "polyline", "rect"
テキスト: "text", "textPath", "tref", "tspan"
レンダリング: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
特殊: "defs" (上記のすべての子はここで許可されています), "symbol", "use"
フィルター: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
ARIA: "desc", "title"

これらの属性と同様です:

"xlink:href": "#" で始まる URI のみが許可されます
"style"

AMP ドキュメントディスカバリー

以下で説明されるメカニズムは、AMP バージョンが正規ドキュメント用に存在するかどうかをソフトウェアが発見するための標準化された方法を提供します。

正規ドキュメントの代替表現である AMP 文書が存在する場合、正規ドキュメントは "amphtml" リレーションを持つ link タグを介して AMP ドキュメントを指すべきです。

例:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

AMP ドキュメント自体は、"canonical" リレーションを持つ link タグを介してその正規ドキュメントを指し示すことが期待されます。

例:

<link rel="canonical" href="https://www.example.com/url/to/canonical/document.html">

(単一のリソースが同時に AMP と標準ドキュメントである場合、標準リレーションはそれ自体を指す必要があります。つまり "amphtml" リレーションは必要ありません。)

AMP を使用するシステムとの最も広い互換性のために、JavaScript を実行せずに "amphtml" リレーションを参照可能であるべきであることに注意してください。 (つまり、タグは素の HTML 内に存在し、JavaScript を介して挿入されるべきではありません。)

AMP HTML 仕様

パフォーマンス

AMP HTML フォーマット

サンプルドキュメント

必要なマークアップ

メタデータ

HTML タグ

コメント

HTML 属性

クラス

ID

リンク

スタイルシート

@ 規則

作成したスタイルシート

セレクタ

クラス名とタグ名

Important

プロパティ

最大サイズ

Keyframe スタイルシート

カスタムフォント

AMP ランタイム

リソース

AMP コンポーネント

共通の属性

layout, width, height, media, placeholder, fallback

on

拡張コンポーネント

URL

バージョン管理

拡張テンプレート

URL

バージョン管理

セキュリティ

SVG

AMP ドキュメントディスカバリー

`layout`, `width`, `height`, `media`, `placeholder`, `fallback`

`on`