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

AMP HTML 規格

重要事項：本文件不適用於您目前選取的格式 廣告！

AMP HTML 是 HTML 的子集，用於編寫內容網頁 (例如新聞報導)，以確保特定的基本效能特性。

身為 HTML 的子集，AMP HTML 針對透過 HTML 提供的完整標籤和功能集施加了一些限制，但並不需要開發新的呈現引擎：現有的使用者代理程式可以像呈現所有其他 HTML 一樣呈現 AMP HTML。

如果您主要想瞭解 AMP 中允許和不允許的內容，請觀看我們的AMP 限制入門影片。

此外，AMP HTML 文件可以上傳到網路伺服器並像任何其他 HTML 文件一樣提供服務；伺服器不需要特殊設定。但是，它們也設計為可選擇性地透過專門的 AMP 服務系統提供服務，這些系統會代理 AMP 文件。這些文件會從其自身的來源提供服務，並允許對文件套用轉換，以提供額外的效能優勢。以下列出此類服務系統可能執行之部分最佳化作業：

  • 將圖片參照替換為調整為檢視器視埠大小的圖片。
  • 內嵌在首頁可見範圍內的圖片。
  • 內嵌 CSS 變數。
  • 預先載入擴充元件。
  • 最小化 HTML 和 CSS。

AMP HTML 使用一組貢獻但集中管理和託管的自訂元素，來實作進階功能，例如可能在 AMP HTML 文件中找到的圖片庫。雖然它允許使用自訂 CSS 設定文件樣式，但不允許作者撰寫超出透過自訂元素提供的 JavaScript，以達到其效能目標。

透過使用 AMP 格式，內容生產者可以讓第三方檢索 (受 robots.txt 限制)、快取和顯示 AMP 檔案中的內容。

效能

可預測的效能是 AMP HTML 的主要設計目標。我們的主要目標是縮短頁面內容可供使用者取用/使用之前的時間。具體來說，這表示：

  • 應盡可能減少呈現和完整配置文件所需的 HTTP 要求。
  • 只有在使用者可能看到圖片或廣告等資源時，才應下載這些資源。
  • 瀏覽器應能夠在不擷取資源的情況下，計算頁面上每個資源所需的空間。

AMP HTML 格式

文件範例 

<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sample document</title>
    <link rel="canonical" href="./regular-html-version.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-custom>
      h1 {
        color: red;
      }
    </style>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Article headline",
        "image": ["thumbnail1.jpg"],
        "datePublished": "2015-02-05T08:00:00+08:00"
      }
    </script>
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-ad"
      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
    ></script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src="sample.jpg" width="300" height="300"></amp-img>
    </p>
    <amp-ad
      width="300"
      height="250"
      type="a9"
      data-aax_size="300x250"
      data-aax_pubname="test123"
      data-aax_src="302"
    >
    </amp-ad>
  </body>
</html>

必要標記

AMP HTML 文件必須：

  • 以 doctype <!doctype html> 開頭。🔗
  • 包含最上層的 <html ⚡> 標籤 (也接受 <html amp>)。🔗
  • 包含 <head> 和 <body> 標籤 (在 HTML 中為選用)。🔗
  • 在其 head 標籤內包含 <link rel="canonical" href="$SOME_URL"> 標籤，該標籤指向 AMP HTML 文件的正規 HTML 版本，如果沒有此類 HTML 版本，則指向自身。🔗
  • 在其 head 標籤中，包含 <meta charset="utf-8"> 標籤作為第一個子項。🔗
  • 在其 head 標籤內包含 <meta name="viewport" content="width=device-width"> 標籤。也建議加入 minimum-scale=1 和 initial-scale=1。🔗
  • 在其 head 標籤內包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 標籤。🔗
  • 在其 head 標籤中，包含 AMP 樣板程式碼 (head > style[amp-boilerplate] 和 noscript > style[amp-boilerplate])。🔗

中繼資料

建議使用標準化中繼資料註解 AMP HTML 文件：Open Graph Protocol、Twitter Cards 等。

我們也建議使用 schema.org/CreativeWork 或其任何更具體的類型 (例如 schema.org/NewsArticle 或 schema.org/BlogPosting) 標記 AMP HTML 文件。

HTML 標籤

HTML 標籤可以在 AMP HTML 中保持不變地使用。某些標籤具有等效的自訂標籤 (例如 <img> 和 <amp-img>)，而其他標籤則完全禁止使用

標籤 AMP HTML 中的狀態
script 禁止使用，除非類型為 application/ld+json、application/json 或 text/plain。(可能會視需要新增其他非可執行值。) 例外情況是載入 AMP 執行階段的必要 script 標籤，以及載入擴充元件的 script 標籤。
noscript 允許使用。可以在文件中的任何位置使用。如果指定，如果使用者停用 JavaScript，則會顯示 <noscript> 元素內的內容。
base 禁止使用。
img 已替換為 amp-img。
請注意：<img> 是 根據 HTML5 的 Void Element (空元素)，因此沒有結束標籤。但是，<amp-img> 具有結束標籤 </amp-img>。
picture 禁止使用。透過使用 後備 屬性或提供多個 <amp-img> 上的 srcset，來提供不同的圖片格式。
video 已替換為 amp-video。
audio 已替換為 amp-audio。
iframe 已替換為 amp-iframe。
frame 禁止使用。
frameset 禁止使用。
object 禁止使用。
param 禁止使用。
applet 禁止使用。
embed 禁止使用。
form 允許使用。需要加入 amp-form 擴充功能。
input 元素 大部分允許使用，但 部分輸入類型例外，也就是說，<input type=button>、<button type=image> 無效。也允許使用相關標籤：<fieldset>、<label>
button 允許使用。
style amp-boilerplate 的必要樣式標籤。允許在 head 標籤中使用一個額外的樣式標籤，以用於自訂樣式。此樣式標籤必須具有屬性 amp-custom。🔗
link 允許使用在 microformats.org 上註冊的 rel 值。如果我們的允許清單中缺少 rel 值，請提交錯誤報告。不允許使用 stylesheet 和其他具有瀏覽器端效應的值 (例如 preconnect、prerender 和 prefetch)。從允許清單中的字型供應商擷取樣式表是一種特殊情況。
meta http-equiv 屬性可用於特定的允許值；如需詳細資訊，請參閱 AMP 驗證器規格。
a href 屬性值不得以 javascript: 開頭。如果設定了 target 屬性值，則必須為 _blank。否則允許使用。🔗
svg 允許使用大多數 SVG 元素。

驗證器實作應使用以 HTML5 規格為基礎的允許清單，並移除上述標籤。請參閱 AMP 標籤附錄。

註解

不允許使用條件式 HTML 註解。

HTML 屬性

在 AMP HTML 中不允許使用以 on 開頭的屬性名稱 (例如 onclick 或 onmouseover)。允許使用具有字面名稱 on (無後綴) 的屬性。

在 AMP HTML 中不允許使用 XML 相關屬性，例如 xmlns、xml:lang、xml:base 和 xml:space。

在 AMP HTML 中不允許使用以 i-amp- 為字首的內部 AMP 屬性。

類別

在 AMP HTML 中不允許使用以 -amp- 和 i-amp- 為字首的內部 AMP 類別名稱。

請參閱 AMP 文件，瞭解以 amp- 為字首的類別名稱的含義。允許使用這些類別，目的是允許自訂 AMP 執行階段和擴充功能的部分功能。

在 AMP HTML 標記中，允許使用所有其他作者撰寫的類別名稱。

ID

在 AMP HTML 中不允許使用某些 ID 名稱，例如以 -amp- 和 i-amp- 為字首的 ID，這些 ID 可能與內部 AMP ID 衝突。

在使用 amp- 和 AMP ID 之前，請參閱特定擴充功能的 AMP 文件，以避免與這些擴充功能提供的功能衝突，例如 amp-access。

如要檢視不允許使用的 ID 名稱的完整清單，請在此處搜尋 mandatory-id-attr。

不允許使用 javascript: 結構描述。

樣式表

主要的語意標籤和 AMP 自訂元素隨附預設樣式，以便輕鬆編寫回應式文件。未來可能會新增選擇退出預設樣式的選項。

@-規則

樣式表中允許使用下列 @-規則：

@font-face、@keyframes、@media、@page、@supports。

不允許使用 @import。未來可能會新增其他規則。

作者樣式表

作者可以使用文件 head 中的單個 <style amp-custom> 標籤或內嵌樣式，將自訂樣式新增至文件。

@keyframes 規則允許在 <style amp-custom> 中使用。但是，如果規則太多，建議將它們放在額外的 <style amp-keyframes> 標籤中，該標籤必須位於 AMP 文件的結尾。如需詳細資訊，請參閱本文件的「Keyframes 樣式表」章節。

選取器

下列限制適用於作者樣式表中的選取器：

類別和標籤名稱

在作者樣式表中，類別名稱、ID、標籤名稱和屬性不得以字串 -amp- 和 i-amp- 開頭。這些字串保留供 AMP 執行階段內部使用。因此，使用者的樣式表不得參照 -amp- 類別、i-amp- ID 和 i-amp- 標籤和屬性的 CSS 選取器。這些類別、ID 和標籤/屬性名稱不適用於作者自訂。但是，對於這些元件規格未明確禁止的任何 CSS 屬性，作者可以覆寫 amp- 類別和標籤的樣式。

為了防止使用屬性選取器來規避類別名稱限制，一般而言，CSS 選取器不允許包含以 -amp- 和 i-amp- 開頭的符記和字串。

重要

不允許使用 !important 限定詞。這是讓 AMP 能夠強制執行其元素尺寸不變性的必要條件。

屬性

AMP 僅允許在常見瀏覽器中可透過 GPU 加速的屬性進行轉換和動畫。我們目前允許：opacity、transform (以及 -vendorPrefix-transform)。

在以下範例中，<property> 需要在上述允許清單中。

  • transition <property> (以及 -vendorPrefix-transition)
  • @keyframes name { from: {<property>: value} to {<property: value>} } (以及 @-vendorPrefix-keyframes)

最大尺寸

如果作者樣式表或內嵌樣式加總後大於 75,000 個位元組，則會發生驗證錯誤。

Keyframes 樣式表

除了 <style amp-custom> 之外，作者也可以加入 <style amp-keyframes> 標籤，該標籤專門用於 keyframes 動畫。

下列限制適用於 <style amp-keyframes> 標籤：

  1. 只能放在文件 <body> 元素的最後一個子項。
  2. 只能包含 @keyframes、@media、@supports 規則及其組合。
  3. 大小不得超過 500,000 個位元組。

<style amp-keyframes> 標籤存在的原因是，即使是稍微複雜的動畫，keyframes 規則通常也很龐大，這會導致 CSS 剖析速度緩慢和首次內容繪製緩慢。但此類規則通常會超出 <style amp-custom> 上強制執行的尺寸限制。將此類 keyframes 宣告放在文件底部的 <style amp-keyframes> 中，可讓它們超出尺寸限制。而且由於 keyframes 不會阻擋轉譯，因此也可以避免阻擋首次內容繪製來剖析它們。

範例

<style amp-keyframes>
@keyframes anim1 {}

@media (min-width: 600px) {
  @keyframes anim1 {}
}
</style>
</body>

自訂字型

作者可以加入自訂字型的樣式表。支援的兩種方法是指向允許清單中字型供應商的連結標籤，以及 @font-face 包含項目。

範例

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Tangerine"
/>

如果字型供應商支援僅限 CSS 的整合，並透過 HTTPS 提供服務，則可以將其加入允許清單。目前允許透過連結標籤提供字型服務的來源如下：

  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
  • Typekit: https://use.typekit.net/kitId.css (請據此替換 kitId)

實作者注意事項：新增至此清單需要變更 AMP 快取 CSP 規則。

作者可以透過自訂 CSS，自由地透過 @font-face CSS 指令包含所有自訂字型。透過 @font-face 包含的字型必須透過 HTTP 或 HTTPS 結構描述擷取。

AMP 執行階段

AMP 執行階段是一段 JavaScript，可在每個 AMP 文件內執行。它提供 AMP 自訂元素的實作、管理資源載入和優先順序，並選擇性地包含 AMP HTML 的執行階段驗證器，以在開發期間使用。

AMP 執行階段是透過 AMP 文件 <head> 中的必要 <script src="https://cdn.ampproject.org/v0.js"></script> 標籤載入的。

AMP 執行階段可以置於任何頁面的開發模式。開發模式將觸發內嵌頁面上的 AMP 驗證，這會將驗證狀態和任何錯誤發送到 JavaScript 開發人員主控台。可以透過將 #development=1 附加到頁面的網址來觸發開發模式。

資源

圖片、影片、音訊檔案或廣告等資源必須透過自訂元素 (例如 <amp-img>) 包含到 AMP HTML 檔案中。我們將它們稱為「受管理資源」，因為它們是否以及何時載入並顯示給使用者是由 AMP 執行階段決定的。

AMP 執行階段的載入行為沒有任何特定保證，但它通常應力求盡快載入資源，以便在使用者想要查看資源時 (如果可能的話) 載入資源。執行階段應優先處理目前在視埠中的資源，並嘗試預測視埠的變更並據此預先載入資源。

AMP 執行階段可能隨時決定卸載目前不在視埠中的資源，或重複使用資源容器 (例如 iframe) 以減少整體 RAM 消耗。

AMP 元件

AMP HTML 使用稱為「AMP 元件」的自訂元素來取代內建的資源載入標籤 (例如 <img> 和 <video>)，並實作具有複雜互動的功能，例如圖片燈箱或輪播。

請參閱 AMP 元件規格，瞭解關於支援元件的詳細資訊。

支援 2 種類型的 AMP 元件：

  1. 內建
  2. 擴充

內建元件在 AMP 文件中始終可用，並具有專用的自訂元素，例如 <amp-img>。擴充元件必須明確加入到文件中。

通用屬性

layout、width、height、media、placeholder、fallback

這些屬性定義元素的版面配置。此處的關鍵目標是確保元素可以顯示，並且可以在下載任何 JavaScript 或遠端資源之前正確地保留其空間。

請參閱 AMP 版面配置系統，瞭解關於版面配置系統的詳細資訊。

on

on 屬性用於在元素上安裝事件處理常式。支援的事件取決於元素。

語法的值是一種簡單的網域特定語言，形式如下：

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

範例：on="tap:fooId.showLightbox"

如果省略 methodName，則如果為元素定義了預設方法，則會執行預設方法。範例：on="tap:fooId"

某些動作 (如果記錄在案) 可能接受引數。引數在括號之間以 key=value 標記法定義。接受的值為：

  • 簡單的未加引號字串：simple-value；
  • 加引號的字串："string value" 或 'string value'；
  • 布林值：true 或 false；
  • 數字：11 或 1.1。

您可以透過使用分號 ; 分隔兩個事件，來監聽元素上的多個事件。

範例：on="submit-success:lightbox1;submit-error:lightbox2"

請參閱 AMP 動作和事件，瞭解更多資訊。

擴充元件

擴充元件是不一定隨附 AMP 執行階段的元件。相反地，它們必須明確加入到文件中。

擴充元件是透過在文件 head 中加入 <script> 標籤來載入的，如下所示：

<script
  async
  custom-element="amp-carousel"
  src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>

<script> 標籤必須具有 async 屬性，並且必須具有 custom-element 屬性，該屬性參照元素的名稱。

執行階段實作可以使用名稱來呈現這些元素的預留位置。

指令碼網址必須以 https://cdn.ampproject.org 開頭，並且必須遵循非常嚴格的模式 /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js。

網址

擴充元件的網址格式如下：

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js
版本設定

請參閱 AMP 版本設定政策。

範本

範本根據語言特定的範本和提供的 JSON 資料來呈現 HTML 內容。

請參閱 AMP 範本規格，瞭解關於支援範本的詳細資訊。

範本未隨附 AMP 執行階段，必須像擴充元素一樣下載。擴充元件是透過在文件 head 中加入 <script> 標籤來載入的，如下所示：

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

<script> 標籤必須具有 async 屬性，並且必須具有 custom-template 屬性，該屬性參照範本的類型。指令碼網址必須以 https://cdn.ampproject.org 開頭，並且必須遵循非常嚴格的模式 /v\d+/[a-z-]+-(latest|\d+|\d+\.\d+)\.js。

範本在文件中宣告如下：

<template type="amp-mustache" id="template1">
  Hello {{you}}!
</template>

type 屬性為必要屬性，並且必須參照已宣告的 custom-template 指令碼。

id 屬性為選用屬性。個別 AMP 元素會探索自己的範本。典型的案例會牽涉到 AMP 元素在其子項中尋找 <template>，或由 ID 參照的 <template>。

範本元素內的語法取決於特定的範本語言。但是，範本語言可能會在 AMP 中受到限制。例如，根據「範本」元素，所有產品都必須透過有效的格式正確的 DOM。所有範本輸出也都要經過清理，以確保 AMP 有效輸出。

如要瞭解範本的語法和限制，請造訪範本文件。

網址

擴充元件的網址格式如下：

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
版本設定

請參閱自訂元素的版本設定，瞭解更多詳細資訊。

安全性

AMP HTML 文件在使用不包含關鍵字 unsafe-inline 和 unsafe-eval 的內容安全性政策提供服務時，不得觸發錯誤。

AMP HTML 格式的設計使其始終如此。

所有 AMP 範本元素都必須經過 AMP 安全性審查，才能提交到 AMP 儲存庫。

SVG

目前，允許使用下列 SVG 元素：

  • 容器元素：「clipPath」、「defs」、「g」、「marker」、「mask」、「pattern」、「svg」、「switch」和「symbol」。
  • 結構元素：「defs」、「g」、「svg」、「symbol」和「use」。
  • 圖形元素：「circle」、「ellipse」、「foreignObject」、「image」、「line」、「path」、「polygon」、「polyline」、「rect」、「text」、「textPath」和「tspan」。
  • 文字內容元素：「text」、「textPath」和「tspan」。
  • 繪圖伺服器元素：「linearGradient」、「pattern」和「radialGradient」。
  • 描述性元素：「desc」、「metadata」和「title」。
  • 濾鏡基本元素：「feColorMatrix」、「feComposite」、「feGaussianBlur」、「feMerge」、「feMergeNode」和「feOffset」。
  • 未分類元素：「view」和「filter」。
  • 已淘汰元素：「glyph」、「glyphRef」、「hkern」、「tref」 和 「vkern」。

以及這些屬性：

  • 「xlink:href」：僅允許使用以「#」開頭的 URI
  • 「style」

AMP 文件探索

以下描述的機制提供了一種標準化方式，讓軟體探索正規文件是否存在 AMP 版本。

如果存在 AMP 文件作為正規文件的替代表示形式，則正規文件應透過具有 關聯「amphtml」 的 link 標籤指向 AMP 文件。

範例

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />

AMP 文件本身預期會透過具有關聯「canonical」的 link 標籤指回其正規文件。

範例

<link
  rel="canonical"
  href="https://www.example.com/url/to/canonical/document.html"
/>

(如果單一資源同時是 AMP 和 正規文件，則正規關聯應指向自身 - 不需要「amphtml」關聯。)

請注意，為了與取用 AMP 的系統達到最廣泛的相容性，應可以在不執行 JavaScript 的情況下讀取「amphtml」關聯。(也就是說，標籤應存在於原始 HTML 中，而不是透過 JavaScript 注入。)