AMP 广告规范
重要提示:此文档不适用于你当前选择的格式网站!
如果你想提出对标准的更改,请在 实施意向中发表评论.
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 头部中包含可选元标签作为标识符,格式为 <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> 可见性跟踪只能通过 "visibilitySpec": { "selector": "amp-ad" } 定位整个广告选择器,如 问题 #4018 和 PR #4368 中所定义。特别是,它可能不会定位广告创意中元素的任何选择器。 |
在某些情况下,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
规则 | 基本原理 |
---|---|
创意 CSS 中禁止使用 position:fixed 和 position:sticky 。 | 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; }
可转换和可动画的属性
唯一可以转换的属性是不透明度和变换。(理由)
好
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 继承。