AMP
繁體中文
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 简体中文 Polski Tiếng việt

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 標頭中包含選用的 meta 標籤作為識別碼，格式為 <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">。這些 meta 標籤必須放在 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" } 在 Issue #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 秒時，此設定會將請求傳送至 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

規則 理由
position:fixed 和 position:sticky 在素材 CSS 中遭到禁止。 position:fixed 會跳脫 AMPHTML 廣告所依賴的陰影 DOM。此外，AMP 中的廣告已經不允許使用固定位置。
touch-action 遭到禁止。 可以操控 touch-action 的廣告可能會干擾使用者捲動主機文件的能力。
素材 CSS 限制為 20,000 位元組。 大型 CSS 區塊會膨脹素材、增加網路延遲並降低頁面效能。
轉場效果和動畫受到額外限制。 AMP 必須能夠控制屬於廣告的所有動畫，以便在廣告不在螢幕上或系統資源非常低時停止它們。
為了驗證目的，供應商特定的前綴被視為沒有前綴的相同符號的別名。這表示如果符號 foo 遭到 CSS 驗證規則禁止，則符號 -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;
}
可轉場及動畫屬性

唯一可以轉場的屬性是不透明度和變形。( 理由 )

良好

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 繼承。