AMP for Ads 规范
如果您想对该标准提出更改建议,请在 Intent to Implement 上评论.
AMPHTML 广告是一种在 AMP 页面中呈现快速、高性能广告的机制。为了确保 AMPHTML 广告文档(“AMP 素材”)可以在浏览器中快速平稳地呈现,并且不会降低用户体验,AMP 素材必须遵守一组验证规则。与 AMP 格式规则 类似,AMPHTML 广告可以使用一组有限的允许标签、功能和扩展。
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> 可见性跟踪只能通过 Issue #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> 当包含广告的 50% 在屏幕上持续可见 1 秒时,此配置会向 |
样板代码
AMPHTML 广告素材需要与 通用 AMP 文档 不同的,且相当简单的样板样式行
<style amp4ads-boilerplate> body { visibility: hidden; } </style>
理由: amp-boilerplate
样式会在 AMP 运行时准备就绪并可以取消隐藏之前隐藏正文内容。如果 JavaScript 被禁用或 AMP 运行时加载失败,默认样板代码可确保最终显示内容。但是,在 AMPHTML 广告中,如果 JavaScript 完全被禁用,则 AMPHTML 广告将不会运行,并且不会显示任何广告,因此不需要 <noscript>
部分。在没有 AMP 运行时的情况下,AMPHTML 广告所依赖的大部分机制(例如,用于可见性跟踪的分析或用于内容显示的 amp-img
)将不可用,因此最好不显示广告,而不是显示有故障的广告。
最后,AMPHTML 广告样板代码使用 amp-a4a-boilerplate
而不是 amp-boilerplate
,以便验证器可以轻松识别它并生成更准确的错误消息以帮助开发人员。
请注意,关于样板代码文本更改的规则与 通用 AMP 样板代码 中相同。
CSS
规则 | 理由 |
---|---|
position:fixed 和 position:sticky 在素材 CSS 中被禁止。 | position:fixed 会跳出 AMPHTML 广告所依赖的阴影 DOM。此外,AMP 中的广告已经不允许使用固定位置。 |
禁止使用 touch-action 。 | 可以操作 touch-action 的广告可能会干扰用户滚动宿主文档的能力。 |
素材 CSS 限制为 20,000 字节。 | 大型 CSS 块会使素材膨胀、增加网络延迟并降低页面性能。 |
过渡和动画受到其他限制。 | AMP 必须能够控制属于广告的所有动画,以便在广告不在屏幕上或系统资源非常低时停止它们。 |
供应商特定的前缀被视为不带前缀的同一符号的别名,以进行验证。这意味着如果 CSS 验证规则禁止符号 foo ,则符号 -vendor-foo 也将被禁止。 | 某些供应商前缀属性提供了与这些规则下禁止或约束的属性等效的功能。 示例: |
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 并且可能会在其中消耗无限的资源。
示例: 从此列表中省略了 <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>
和 <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 标签支持嵌入内容,例如
<amp-img>
或<amp-video>
。
4.7.4 <source>
4.7.18 SVG
SVG 标签不在 HTML5 命名空间中。它们在下面列出,没有章节 ID。
<svg>
<g>
<path>
<glyph>
<glyphref>
<marker>
<view>
<circle>
<line>
<polygon>
<polyline>
<rect>
<text>
<textpath>
<tref>
<tspan>
<clippath>
<filter>
<lineargradient>
<radialgradient>
<mask>
<pattern>
<vkern>
<hkern>
<defs>
<use>
<symbol>
<desc>
<title>
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 广告中没有任何作用,只会消耗网络带宽。
- 理由:由于 AMPHTML 广告需要启用 Javascript 才能正常工作,
- 与一般 AMP 不同,禁止使用
<script type="application/ld+json">
。- 理由:JSON LD 用于在宿主页面上标记结构化数据,但广告素材不是独立文档,不包含结构化数据。其中的 JSON LD 代码块只会消耗网络带宽。
- 所有其他脚本规则和排除项都从一般 AMP 继承。