AMP

AMP 广告规范

重要提示:此文档不适用于您当前选择的格式 电子邮件

如果您想提出对标准的更改建议,请在 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 标头中包含可选的 meta 标签作为标识符,格式为 <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">。这些 meta 标签必须放置在 amp4ads-v0.js 脚本之前。vendorid 的值是仅包含 [0-9a-zA-Z_-] 的字符串。type 的值是 creative-idimpression-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" } 作为 Issue #4018PR #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>

当外层广告在屏幕上持续可见 1 秒钟时,此配置会向 https://example.com/nestedAmpAnalytics URL 发送请求。

样板

AMPHTML 广告素材需要与 通用 AMP 文档 不同的、更简单的样板样式行

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

原理:amp-boilerplate 样式会隐藏 body 内容,直到 AMP 运行时准备就绪并可以取消隐藏。如果 Javascript 被禁用或 AMP 运行时加载失败,默认样板会确保最终显示内容。但是,在 AMPHTML 广告中,如果 Javascript 被完全禁用,则 AMPHTML 广告将不会运行,并且不会显示任何广告,因此不需要 <noscript> 部分。在没有 AMP 运行时的情况下,AMPHTML 广告所依赖的大部分机制(例如,用于可见性跟踪的分析或用于内容显示的 amp-img)将不可用,因此最好不显示广告,而不是显示出现故障的广告。

最后,AMPHTML 广告样板使用 amp-a4a-boilerplate 而不是 amp-boilerplate,以便验证器可以轻松识别它并生成更准确的错误消息以帮助开发人员。

请注意,有关样板文本的修改的规则与 通用 AMP 样板 中的规则相同。

CSS

规则 原理
position:fixedposition:sticky 在素材 CSS 中被禁止。 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 动画和过渡

选择器

transitionanimation 属性仅允许用于以下选择器

  • 仅包含 transitionanimationtransformvisibilityopacity 属性。

    原理: 这允许 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 内置标签。未明确列出的扩展或内置标签被禁止。

大多数省略要么是为了性能,要么是为了使 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=stylesheet> 之外,不允许使用 <link rel=...> 标签。
  • 注意:与一般的 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 广告中没有任何用途,只会消耗网络带宽。
  • 与一般的 AMP 不同,禁止使用 <script type="application/ld+json">
    • 理由:JSON LD 用于宿主页面上的结构化数据标记,但广告素材不是独立的文档,不包含结构化数据。其中的 JSON LD 块只会消耗网络带宽。
  • 所有其他脚本规则和排除项都从一般的 AMP 中继承而来。