AMPドキュメント

使えるHTMLタグや属性

使えるHTMLタグ

HTMLタグ

タグ名 説明
html ルート要素
head メタデータの記述
title ページのタイトル
link 関連したURLに関しての情報。一部に制限あり
meta 一部に制限あり
style 内部スタイルシート。一部に制限あり
body コンテンツの記述
article 完結したコンテンツ
section 汎用的なセクション
nav ナビゲーション
aside 補足や関連情報
h1 見出し
h2 見出し
h3 見出し
h4 見出し
h5 見出し
h6 見出し
header ヘッダー
footer フッター
address コンテンツに関するお問い合わせ先
p パラグラフ
hr 区切り文字
pre 整形済みテキスト
blockquote 引用
ol 順番付きリスト
ul 順不同なリスト
li リストの各項目
dl 説明リスト
dt 語句
dd 語句の説明
figure フィギュア
figcaption フィギュアのキャプション
div 汎用タグ
main メインコンテンツ
em 強調
strong 重要
small 但し書き
s 変更
cite 作品のタイトルなど
q 引用
dfn 定義する語句
abbr 略語
data マシンリーダブルな情報
time 日時
code コンピュータコード
var 変数
samp コンピュータからの出力内容
kbd コンピュータへの入力内容
sub 上付き
sup 下付き
i 学名や慣用句など
b ちゅうもくしてほし語句
u 不明瞭な語句
mark ハイライト
ruby ルビ
rb ルビのベース
rt ルビ
rtc ルビのコンテナ
rp ルビに未対応なブラウザ用
bdi 双方向アルゴリズムの隔離
bdo 双方向アルゴリズムのオーバーライド
span 汎用タグ
br 改行
wbr 改行を認める箇所
ins 追加したコンテンツ
del 削除したコンテンツ
source メディアリソース
table テーブル
caption フローコンテンツ
colgroup 列のグループ
col 列に属性やスタイルを指定
tbody 行のグループ
thead 行のグループ
tfoot 行のグループ
tr テーブルの行
td テーブルのデータ
th テーブルの見出し
form フォーム。一部に制限あり
input 各種入力フォーム。一部に制限あり
button ボタン
script スクリプト。一部に制限あり
noscript スクリプトが動作しないブラウザ用の情報
a リンク。一部に制限あり

制限があるHTMLタグ

タグ名 補足
script タイプが「application/ld+json」または「text/plain」のみ
form amp-formと組み合わせることが必要
input タイプが「password」または「file」以外は使用可能
style amp-boilerplate以外でHEADタグ内で1つのみが使用可能。style amp-customのように指定
link microformats.orgに登録されているものだけ使用可能。<link rel=”<許可された文字列>”>のように指定
meta 「http-equiv」属性以外は使用可能。「http-equiv」は特定の値でのみ
a 原則として利用可能。「href」属性で「javascript:」で始まることはNG、「target」属性は「_blank」のみ
svg 一部のSVG要素が禁止

使えない HTML タグ

タグ名 補足
base  
img 代わりにamp-imgを使用
picture  
video 代わりにamp-videoを使用
audio 代わりにamp-audioを使用
iframe 代わりにamp-ifameを使用
frame  
frameset  
object  
param  
applet  
embed  

共通の属性

説明

様々なAMPタグやHTMLタグで使える共通の属性について

属性名 説明
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

fallback

<amp-anim src="animated.gif" width="466" height="355" layout="responsive" >
  <div fallback>この端末ではアニメーション画像は再生できません。</div>
</amp-anim>

heights

<amp-img
  heights="(min-width:500px) 200px, 80%"
  src="amp.png"
  width="320"
  height="256">
</amp-img>

layout

<amp-img
  layout="responsive"
  src="/img/amp.jpg"
  width="1080"
  height="610"
  alt="画像">
</amp-img>

media

<amp-img
  media="(min-width: 650px)"
  src="wide.jpg"
  width="466"
  height="355"
  layout="responsive">
</amp-img>

noloading

<amp-img
  src="card.jpg"
  noloading
  height="190"
  width="297"
  layout="responsive">
</amp-img>

on

<button
  on="tap:my-lightbox">
  ライトボックスを開く
</button>

placeholder

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
  <amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

sizes

<amp-img
  sizes="(min-width: 320px) 320px, 100vw"
  src="amp.png"
  width="400"
  height="300"
  layout="responsive">
</amp-img>

widthとheight

<amp-anim
  width="245"
  height="300"
  src="/img/cat.gif"
  alt="猫のアニメーション">
</amp-anim>

使えるSVG

使えるSVGタグ

タグ名 説明
svg 一部に制限あり
g グループ化するためのコンテナ
path パス
glyph グリフ定義
glyphref グリフ
marker ハイライト
view SVG用
circle
line 直線
polygon 閉じた図形
polyline 一連の直線
rect 角の丸まった四角形
text テキストからなるグラフィクス要素
textpath テキストをレンダリング用パス
tref 直接埋め込まれた文字データ
tspan テキストの位置を調整
clippath クリッピングパス
filter カスタムフィルター
lineargradient 線形グラデーション
radialgradient 放射状グラデーション
mask アルファマスク
pattern 同じ図形の繰り返し描画
vkern 垂直距離
hkern 水平距離
defs グラフィックオブジェクト
use 複製
symbol グラフィカルテンプレートオブジェクト
desc 説明がテキストのみ
title 説明がテキストのみの文字列

URL変数

URL 変数

変数名 説明
READER_ID AMPリーダーID
AUTHDATA 承認応答のフィールドの値
RETURN_URL AMPランタイムによって指定、ログインダイアログの戻り先URLのプレースホルダ
SOURCE_URL AMPドキュメントのURL。CDNから提供される場合、AMPDOC_URLにはCDNのURLを指定。SOURCE_URLには元のソースURLを指定
AMPDOC_URL AMPドキュメントのURL
CANONICAL_URL AMPドキュメントの正規URL
DOCUMENT_REFERRER 参照URL
VIEWER AMPビューアのURL
RANDOM 乱数。ブラウザキャッシュの防止など

使える変数

使える変数

変数名 説明
AMPDOC_HOST AMPドキュメントホスト
AMPDOC_HOSTNAME AMPドキュメントのホスト名
AMPDOC_URL AMPドキュメントのURL
CANONICAL_HOST 正規ホスト
CANONICAL_HOSTNAME 正規のホスト名
CANONICAL_PATH 正規パス
CANONICAL_URL 正規URL
COUNTER カウンター
DOCUMENT_CHARSET ドキュメントの文字セット
DOCUMENT_REFERRER ドキュメントリファラー
EXTERNAL_REFERRER 外部リファラー
HTML_ATTR HTML属性
SOURCE_URL ソースURL
SOURCE_HOST 送信元ホスト
SOURCE_HOSTNAME 送信元ホスト名
SOURCE_PATH ソースパス
TITLE タイトル
VIEWER 視聴者
CONTENT_LOAD_TIME コンテンツの読み込み時間
DOMAIN_LOOKUP_TIME ドメイン検索時間
DOM_INTERACTIVE_TIME DOMインタラクティブタイム
NAV_REDIRECT_COUNT ナビゲーションリダイレクトカウント
NAV_TIMING ナビゲーションのタイミング
NAV_TYPE ナビゲーションタイプ
PAGE_DOWNLOAD_TIME ページのダウンロード時間
PAGE_LOAD_TIME ページ読み込み時間
REDIRECT_TIME リダイレクト時間
SERVER_RESPONSE_TIME サーバー応答時間
TCP_CONNECT_TIME TCP接続時間
AVAILABLE_SCREEN_HEIGHT 利用可能なスクリーンの高さ
AVAILABLE_SCREEN_WIDTH 利用可能な画面幅
BROWSER_LANGUAGE ブラウザ言語
SCREEN_COLOR_DEPTH 画面の色深度
SCREEN_HEIGHT スクリーンの高さ
SCREEN_WIDTH スクリーン幅
SCROLL_HEIGHT スクロール高さ
SCROLL_WIDTH スクロール幅
SCROLL_LEFT 左にスクロール
SCROLL_TOP スクロールトップ
TIMEZONE タイムゾーン
TIMEZONE_CODE タイムゾーンコード
USER_AGENT ユーザーエージェント
VIEWPORT_HEIGHT ビューポートの高さ
VIEWPORT_WIDTH ビューポート幅
TOTAL_ENGAGED_TIME 合計エンゲージメント時間
INCREMENTAL_ENGAGED_TIME 増分関与時間
${backgrounded} バックグラウンド
VARIANT バリアント。が必要
VARIANTS バリアント。が必要
AMP_GEO ジオロケーション。が必要
AMP_VERSION AMPバージョン
AMP_STATE AMPの状態
BACKGROUND_STATE バックグラウンド状態
CLIENT_ID クライアントID
PAGE_VIEW_ID ページビューID
PAGE_VIEW_ID_64 ページビューID 64
QUERY_PARAM クエリパラメータ
RANDOM ランダム
TIMESTAMP タイムスタンプ

AMPDOC_HOST

<amp-pixel src="https://foo.com/pixel?host=AMPDOC_HOST"></amp-pixel>
# https://foo.com/pixel?host=example.com:8080

AMPDOC_HOSTNAME

<amp-pixel src="https://foo.com/pixel?hostname=AMPDOC_HOSTNAME"></amp-pixel>
# https://foo.com/pixel?hostname=example.com

AMPDOC_URL

<amp-pixel src="https://foo.com/pixel?ref=AMPDOC_URL"></amp-pixel>
# https://foo.com/pixel?ref=https%3A%2F%2Fexample.com%2F

AMP_STATE

<amp-pixel src="https://foo.com/pixel?bar=AMP_STATE(foo.bar)"></amp-pixel>

AMP_VERSION

<amp-pixel src="https://foo.com/pixel?v=AMP_VERSION"></amp-pixel>
# 1460655576651

AVAILABLE_SCREEN_HEIGHT

<amp-pixel src="https://foo.com/pixel?availScreenHeight=AVAILABLE_SCREEN_HEIGHT"></amp-pixel>
# 1480

AVAILABLE_SCREEN_WIDTH

<amp-pixel src="https://foo.com/pixel?availScreenWidth=AVAILABLE_SCREEN_WIDTH"></amp-pixel>
# 2500

BROWSER_LANGUAGE

<amp-pixel src="https://foo.com/pixel?lang=BROWSER_LANGUAGE"></amp-pixel>
# en-us

CANONICAL_HOST

<amp-pixel src="https://foo.com/pixel?host=CANONICAL_HOST"></amp-pixel>
# http://pinterest.com:9000

CANONICAL_HOSTNAME

<amp-pixel src="https://foo.com/pixel?hostname=CANONICAL_HOSTNAME"></amp-pixel>
# pinterest.com

CANONICAL_PATH

<amp-pixel src="https://foo.com/pixel?path=CANONICAL_PATH"></amp-pixel>
# %2Fanalytics.html

CANONICAL_URL

<amp-pixel src="https://foo.com/pixel?href=CANONICAL_URL"></amp-pixel>
# http%3A%2F%2Fexample.com%3A8000%2Fanalytics.html

CLIENT_ID

<amp-pixel src="https://foo.com/pixel?cid=CLIENT_ID(cid-scope-cookie-fallback-name)"></amp-pixel>
# U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynbUWtIodJxP5TEIYBic4qcV

CONTENT_LOAD_TIME

<amp-pixel src="https://foo.com/pixel?contentLoadTime=CONTENT_LOAD_TIME"></amp-pixel>
# 40

DOCUMENT_CHARSET

<amp-pixel src="https://foo.com/pixel?charSet=DOCUMENT_CHARSET"></amp-pixel>
# UTF-8

DOCUMENT_REFERRER

<amp-pixel src="https://foo.com/pixel?referrer=DOCUMENT_REFERRER"></amp-pixel>
# https://www.google.com

DOMAIN_LOOKUP_TIME

<amp-pixel src="https://foo.com/pixel?domainLookupTime=DOMAIN_LOOKUP_TIME"></amp-pixel>
# 1

DOM_INTERACTIVE_TIME

<amp-pixel src="https://foo.com/pixel?domInteractiveTime=DOM_INTERACTIVE_TIME"></amp-pixel>
# 40

EXTERNAL_REFERRER

<amp-pixel src="https://foo.com/pixel?referrer=EXTERNAL_REFERRER"></amp-pixel>
# https://www.google.com

AMP_GEO

<amp-pixel src="https://foo.com/pixel?domInteractiveTime=AMP_GEO"></amp-pixel>
# ca
<amp-pixel src="https://foo.com/pixel?nrc=NAV_REDIRECT_COUNT"></amp-pixel>
# 0
<amp-pixel src="https://foo.com/pixel?navStart=NAV_TIMING(navigationStart)&amp;pageLoadTime=NAV_TIMING(navigationStart,loadEventStart)"></amp-pixel>
# 1451606400000
# 10
<amp-pixel src="https://foo.com/pixel?nt=NAV_TYPE"></amp-pixel>
# 1

PAGE_DOWNLOAD_TIME

<amp-pixel src="https://foo.com/pixel?pageDownloadTime=PAGE_DOWNLOAD_TIME"></amp-pixel>
# 100

PAGE_LOAD_TIME

<amp-pixel src="https://foo.com/pixel?pageLoadTime=PAGE_LOAD_TIME"></amp-pixel>
# 220

PAGE_VIEW_ID

<amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID"></amp-pixel>
# 978

PAGE_VIEW_ID_64

<amp-pixel src="https://foo.com/pixel?pid=PAGE_VIEW_ID_64"></amp-pixel>
# U6XEpUs3yaeQyR2DKATQH1pTZ6kg140fvuLbtl5nynb

QUERY_PARAM

<amp-pixel src="https://foo.com/pixel?bar=QUERY_PARAM(baz,biz)"></amp-pixel>

RANDOM

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
# 0.12345632345

REDIRECT_TIME

<amp-pixel src="https://foo.com/pixel?redirectTime=REDIRECT_TIME"></amp-pixel>
# 0

SCREEN_COLOR_DEPTH

<amp-pixel src="https://foo.com/pixel?colorDepth=SCREEN_COLOR_DEPTH"></amp-pixel>
# 24

SCREEN_HEIGHT

<amp-pixel src="https://foo.com/pixel?sh=SCREEN_HEIGHT"></amp-pixel>
# 1600

SCREEN_WIDTH

<amp-pixel src="https://foo.com/pixel?sw=SCREEN_WIDTH"></amp-pixel>
# 2560

SCROLL_HEIGHT

<amp-pixel src="https://foo.com/pixel?scrollHeight=SCROLL_HEIGHT"></amp-pixel>
# 400

SCROLL_LEFT

<amp-pixel src="https://foo.com/pixel?scrollLeft=SCROLL_LEFT"></amp-pixel>
# 100

SCROLL_TOP

<amp-pixel src="https://foo.com/pixel?st=SCROLL_TOP"></amp-pixel>
# 0

SCROLL_WIDTH

<amp-pixel src="https://foo.com/pixel?scrollWidth=SCROLL_WIDTH"></amp-pixel>
# 600

SERVER_RESPONSE_TIME

<amp-pixel src="https://foo.com/pixel?serverResponseTime=SERVER_RESPONSE_TIME"></amp-pixel>
# 10

SOURCE_URL

<amp-pixel src="https://foo.com/pixel?href=SOURCE_URL"></amp-pixel>
# https://foo.com/pixel?href=https%3A%2F%2Fpinterest.com%2F

SOURCE_HOST

<amp-pixel src="https://foo.com/pixel?host=SOURCE_HOST"></amp-pixel>
# https://foo.com/pixel?host=pinterest.com:9000

SOURCE_HOSTNAME

<amp-pixel src="https://foo.com/pixel?host=SOURCE_HOSTNAME"></amp-pixel>
# https://foo.com/pixel?host=pinterest.com

SOURCE_PATH

<amp-pixel src="https://foo.com/pixel?path=SOURCE_PATH"></amp-pixel>
# https://foo.com/pixel?path=%2Fpage2.html

TCP_CONNECT_TIME

<amp-pixel src="https://foo.com/pixel?tcpConnectTime=TCP_CONNECT_TIME"></amp-pixel>
# 10

TITLE

<amp-pixel src="https://foo.com/pixel?title=TITLE"></amp-pixel>
# AMPキュメント

TIMESTAMP

<amp-pixel src="https://foo.com/pixel?timestamp=TIMESTAMP"></amp-pixel>
# 10

TIMEZONE

<amp-pixel src="https://foo.com/pixel?tz=TIMEZONE"></amp-pixel>
# 480

TIMEZONE_CODE

<amp-pixel src="https://foo.com/pixel?tz_code=TIMEZONE_CODE"></amp-pixel>
# Europe/Rome

USER_AGENT

<amp-pixel src="https://foo.com/pixel?sh=USER_AGENT"></amp-pixel>
# Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

VIEWER

<amp-pixel src="https://foo.com/pixel?viewer=VIEWER"></amp-pixel>
# www.google.com

VIEWPORT_HEIGHT

<amp-pixel src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"></amp-pixel>
# 1600

VIEWPORT_WIDTH

<amp-pixel src="https://foo.com/pixel?viewportHeight=VIEWPORT_HEIGHT"></amp-pixel>
# 2560