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 之外，它不允許作者編寫 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 <!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])。🔗

Metadata (中繼資料)

建議使用標準化中繼資料註解 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。
請注意：根據 HTML5，<img> 是空元素，因此它沒有結束標籤。但是，<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-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 文件的末尾。如需詳細資訊，請參閱本文件的「Keyframes 樣式表」章節。

選取器

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

類別和標籤名稱

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

為了防止使用屬性選取器來規避類別名稱限制，通常不允許 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> 標籤，該標籤專門用於關鍵影格動畫。

以下限制適用於 <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>

自訂字型

作者可以包含自訂字型的樣式表。支援的 2 種方法是指向允許清單中的字型供應商的 link 標籤和 @font-face 包含。

範例

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

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

  • 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 Runtime (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。

網址

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

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 有效輸出。

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

網址

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

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js
版本控制

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

安全性

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

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