AMP 广告规范

如果您想对标准提出更改建议，请在 Intent to Implement 下添加评论。

AMPHTML 广告是一种在 AMP 网页上快速高效渲染广告的机制。为了确保在浏览器中快速流畅地渲染 AMPHTML 广告文档（“AMP 广告素材”），并且不会降低用户体验，AMP 广告素材必须遵守一组验证规则。AMPHTML 广告在本质上与 AMP 格式规则类似，只能访问一组有限的受支持的标记、功能和扩展项。

AMPHTML 广告格式规则

除非下文另有说明，否则，广告素材必须遵守 AMP 格式规则指定的所有规则，此处仅供参考。例如，AMPHTML 广告样板偏离 AMP 标准样板。

此外，广告素材还必须遵守以下规则：

规则	理由
必须使用 `<html ⚡4ads>` 或 `<html amp4ads>` 作为封闭标记。	允许验证工具将广告素材文档识别为常规 AMP 文档或受限的 AMPHTML 广告文档并进行相应分发。
必须包含 `<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>` 而不是 `https://cdn.ampproject.org/v0.js` 作为运行时脚本。	允许在跨源 iframe 中投放的 AMPHTML 广告存在量身定制的运行时行为。
不得包含 `<link rel="canonical">` 标记。	广告素材没有“非 AMP 规范版本”，不会独立编制搜索索引，因此，自引用没有任何用处。
可以在 HTML head 中包含可选的元标记，作为标识符，格式为：`<meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">`。这些元标记必须放在 `amp4ads-v0.js` 脚本前面。`vendor` 和 `id` 的值是仅包含 [0-9a-zA-Z_-] 的字符串。`type` 的值为 `creative-id` 或 `impression-id`。	这些自定义标识符可用于标识展示或广告素材，并且有助于报告和调试。示例： <meta name="amp4ads-id" content="vendor=adsense,type=creative-id,id=1283474"> <meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">
`<amp-analytics>` 可见度跟踪只能通过问题 #4018 和 PR #4368 中定义的 `"visibilitySpec": { "selector": "amp-ad" }` 来定位完整广告选择器。特别需要说明的是，它无法定位广告素材中元素的任何选择器。	在某些情况下，AMPHTML 广告可能选择在 iframe 中渲染广告素材。这种情况下，托管页面分析只能定位整个 iframe，而无法访问任何细粒度更高的选择器。示例： <amp-analytics id="nestedAnalytics"> <script type="application/json"> { "requests": { "visibility": "https://example.com/nestedAmpAnalytics" }, "triggers": { "visibilitySpec": { "selector": "amp-ad", "visiblePercentageMin": 50, "continuousTimeMin": 1000 } } } </script> </amp-analytics> 如果所属广告的一半已在屏幕上持续显示 1 秒，则此配置会将请求发送到网址 `https://example.com/nestedAmpAnalytics`。

样板

AMPHTML 广告素材需要与常规 AMP 文档不同且更为简单的样板样式行。

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

理由：amp-boilerplate 样式会一直隐藏主体内容，直到 AMP 运行时准备就绪并且可以将其取消隐藏。如果 Javascript 已停用，或者 AMP 运行时无法加载，则无论如何默认样板都会确保内容完全显示。但是，在 AMPHTML 广告中，如果 Javascript 已完全停用，AMPHTML 广告将不会运行，并且不会显示任何广告，因此，不需要版块。如果缺少 AMP 运行时，AMPHTML 广告所依赖的大部分机制（例如，用于跟踪可见度的分析，或者用于显示内容的 amp-img）将不可用，因此，与出现故障相比，不显示任何广告要更好。

最后，AMPHTML 广告样板使用 amp-a4a-boilerplate，而不是 amp-boilerplate，因此，验证工具可以轻松识别它，并且可以生成更准确的错误消息，以便为开发者提供帮助。

请注意，有关样板文本变化的规则同样也适用于常规 AMP 样板。

CSS

规则	理由
广告素材 CSS 中不允许使用 `position:fixed` 和 `position:sticky`。	`position:fixed` 超出了 AMPHTML 广告所依赖的影子 DOM 的范围。目前还不允许 AMP 中的本地共享对象广告使用固定位置。
不允许使用 `touch-action`。	如果广告可以操作 `touch-action`，则该广告会干扰用户滚动托管文档。
广告素材 CSS 最多可以包含 20,000 字节。	大型 CSS 块会使广告素材膨胀，增加网络延迟，以及降低页面性能。
过渡和动画受其他限制影响。	AMP 必须能够对属于广告的所有动画进行控制，这样才能在广告未显示在屏幕上或者系统资源运行速度缓慢时将动画停止。
供应商特有的前缀被视为用于进行验证且无前缀的相同符号的别名。这意味着，如果 CSS 验证规则不允许使用符号 `foo`，则也不允许使用 `-vendor-foo` 符号。	有些以供应商为前缀的属性具有的功能与这些规则所禁用或限制的属性相同。示例：`-webkit-transition` 和 `-moz-transition` 均被视为 `transition` 的别名。它们只能在允许使用 `transition` 的语境下使用（请参阅下文的选择器部分）。

CSS 动画和过渡

选择器

transition 和 animation 属性只能在以下选择器中使用：

仅包含 transition、animation、transform、visibility 或 opacity 属性。

理由：这将支持 AMP 运行时从语境中移除此类，以便在必要时停用动画，从而提高页面性能。

效果良好

.box {
transform: rotate(180deg);
transition: transform 2s;
}

效果欠佳

不允许在 CSS 类中使用属性。

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}

可过渡和可添加动画效果的属性

只有 opacity 和 transform 属性可以进行过渡。（理由）

效果良好

transition: transform 2s;

效果欠佳

transition: background-color 2s;

效果良好

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

效果欠佳

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

允许使用的 AMP 扩展项和内置标记

允许在 AMPHTML 广告素材中使用以下 AMP 扩展模块和 AMP 内置标记。只能使用明确列出的扩展项或内置标记。

amp-accordion
amp-ad-exit
amp-analytics
amp-anim
amp-animation
amp-audio
amp-bind
amp-carousel
amp-fit-text
amp-font
amp-form
amp-img
amp-layout
amp-lightbox
amp-mraid（实验性）。如果您考虑使用此标记，请在 wg-monetization 上提问。
amp-mustache
amp-pixel
amp-position-observer
amp-selector
amp-social-share
amp-video

忽略的大部分标记是出于性能考虑或者是为了简化 AMPHTML 广告的分析。

示例：上述列表中未列出 <amp-ad>。明确禁止的原因在于，如果允许在 <amp-ad> 内放入 <amp-ad>，可能会导致生成不受控制的广告加载瀑布流，从而无法满足 AMPHTML 广告的性能目标。

示例：上述列表中未列出 <amp-iframe>。禁止的原因在于，广告可以使用该标记执行任意 Javascript 并加载任意内容。如果广告想使用此类功能，它们应当在 a4aRegistry 条目中返回 false，并使用现有的“3p iframe”广告渲染机制。

示例：上述列表中未列出 <amp-facebook>、<amp-instagram>、<amp-twitter> 和 <amp-youtube>，原因与 <amp-iframe> 相同：这些标记全部都会创建 iframe，并且可能会在 iframe 中占用无限多的资源。

示例：上述列表中未列出 <amp-ad-network-*-impl>。<amp-ad> 标记会处理对这些实现标记的委托；广告素材不应当尝试直接包含这些实现标记。

示例：尚未包括 <amp-lightbox> 的原因在于，有些 AMPHTML 广告素材甚至可能会在 iframe 中进行渲染，目前还没有机制可以支持广告扩展到 iframe 范围外。以后可能会增加这方面的支持，前提是存在相应的需求。

HTML 标记

允许在 AMPHTML 广告素材中使用以下标记。只能使用明确允许的标记。以下列表是常规 AMP 标记附录许可名单的一部分。与许可名单一样，以下列表按照 HTML5 规范中的第 4 节 HTML 的元素排序。

出于性能考虑或者是因为标记不符合 HTML5 标准，大部分标记均未列出。例如，未列出 <noscript> 的原因在于，AMPHTML 广告依赖于启用的 JavaScript，因此，<noscript> 块从不执行，只会使广告素材膨胀，占用带宽并增加延迟。同样地，也不允许使用 <acronym>、<big> 等标记，因为它们与 HTML5 标准不兼容。

4.1 根元素

4.1.1 <html>

必须使用 <html ⚡4ads> 或 <html amp4ads> 类型

4.2 文档元数据

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

不允许使用 <link rel=...> 标记，但 <link rel=stylesheet> 除外。
注：与常规 AMP 不同的是，不允许使用 <link rel="canonical"> 标记。

4.2.5 <style> 4.2.6 <meta>

4.3 版块

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 内容分组

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 文本级语义

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 编辑

4.6.1 <ins> 4.6.2 <del>

4.7 嵌入式内容

只能使用 <amp-img> 或 <amp-video> 等 AMP 标记支持嵌入式内容。

4.7.4 `<source>`

4.7.18 SVG

SVG 标记不属于 HTML5 命名空间。以下列出的 SVG 标记没有板块 ID。

4.9 表格数据

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 表单

4.10.8 <button>

4.11 脚本

与常规 AMP 文档一样，广告素材的 <head> 标记必须包含 <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> 标记。
与常规 AMP 不同，不允许使用 <noscript>。
理由：由于 AMPHTML 广告需要启用 Javascript 才能工作，<noscript> 块在 AMPHTML 广告中不起任何作用，只会占用网络带宽。
与常规 AMP 不同，不允许使用 <script type="application/ld+json">。
理由：JSON LD 用于托管页面上的结构化数据标记，但广告素材不是独立的文档，并且不包含结构化数据。JSON LD 块本身只会占用网络带宽。
所有其他脚本规则和排除对象与常规 AMP 相同。

{{#initial}}重要组件{{/initial}}{{^initial}}组件{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}热门文章{{/initial}}{{^initial}}结果{{/initial}}

{{title}}

;(

尝试加载更多搜索结果时…

¯\_(ツ)_/¯

无搜索结果。

AMP 广告规范

AMPHTML 广告格式规则

样板

CSS

CSS 动画和过渡

选择器

可过渡和可添加动画效果的属性

允许使用的 AMP 扩展项和内置标记

HTML 标记

4.1 根元素

4.2 文档元数据

4.3 版块

4.4 内容分组

4.5 文本级语义

4.6 编辑

4.7 嵌入式内容

4.7.4 `<source>`

4.7.18 SVG

4.9 表格数据

4.10 表单

4.11 脚本

{{#initial}}重要组件{{/initial}}{{^initial}}组件{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}热门文章{{/initial}}{{^initial}}结果{{/initial}}

{{title}}

;(

尝试加载更多搜索结果时…

¯\_(ツ)_/¯

无搜索结果。

AMP 广告规范

AMPHTML 广告格式规则

样板

CSS

CSS 动画和过渡

选择器

可过渡和可添加动画效果的属性

允许使用的 AMP 扩展项和内置标记

HTML 标记

4.1 根元素

4.2 文档元数据

4.3 版块

4.4 内容分组

4.5 文本级语义

4.6 编辑

4.7 嵌入式内容

4.7.4 <source>

4.7.18 SVG

4.9 表格数据

4.10 表单

4.11 脚本

4.7.4 `<source>`