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 的子集，它對 HTML 提供的完整標籤和功能集施加了一些限制，但它不需要開發新的呈現引擎：現有的使用者代理程式可以像呈現所有其他 HTML 一樣呈現 AMP HTML。

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

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

  • 將圖片參考替換為調整大小以符合檢視器視窗的圖片。
  • 嵌入在首頁可見範圍內的圖片。
  • 嵌入 CSS 變數。
  • 預先載入擴充元件。
  • 縮減 HTML 和 CSS。

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

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

效能

可預測的效能是 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 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 標籤中允許使用一個額外的 style 標籤，用於自訂樣式。此 style 標籤必須具有 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-access。

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

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

樣式表

主要的語意標籤和 AMP 自訂元素都帶有預設樣式，使撰寫回應式文件變得相當容易。未來可能會新增選擇退出預設樣式的選項。

@-規則

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

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

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

作者樣式表

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

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

選取器

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

類別和標籤名稱

作者樣式表中的類別名稱、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 個位元組，則會發生驗證錯誤。

關鍵影格樣式表

除了 <style amp-custom> 之外，作者還可以新增 <style amp-keyframes> 標籤，該標籤專門用於關鍵影格動畫。

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

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

<style amp-keyframes> 標籤存在的原因是，即使對於適度複雜的動畫，關鍵影格規則通常也很龐大，這會導致 CSS 解析速度緩慢和首次內容繪製速度緩慢。但是，此類規則通常會超過 <style amp-custom> 上的大小限制。將此類關鍵影格宣告放在文件底部的 <style amp-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 附加到頁面的 URL 來觸發開發模式。

資源

圖片、影片、音訊檔案或廣告等資源必須透過自訂元素 (例如 <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 屬性。

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

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

網址

擴充元件的 URL 格式為：

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 屬性。指令碼 URL 必須以 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 元素在其子元素中或由 ID 參考中尋找 <template>。

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

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

網址

擴充元件的 URL 格式為：

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 注入。)