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 head 中包含可选的 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 秒的 50% 时,向 https://example.com/nestedAmpAnalytics URL 发送请求。

样板

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:fixedposition:sticky position:fixed 会脱离 AMPHTML 广告所依赖的 Shadow 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;
}
可过渡和可动画属性

可以过渡的唯一属性是 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 内置标签。未明确列出的扩展或内置标签将被禁止。

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