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

AMP HTML 規格

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

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

AMP 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 版本，則指向其自身。🔗
  • 將 <meta charset="utf-8"> 標記作為其 head 標記的第一個子項。🔗
  • 在其 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 屬性

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

與 XML 相關的屬性 (例如 xmlns、xml:lang、xml:base 和 xml:space) 在 AMP HTML 中不允許。

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

類別

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

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

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

ID

某些 ID 名稱在 AMP HTML 中不允許，例如以 -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> 標記或內嵌樣式，將自訂樣式新增至文件。

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

選取器

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

類別和標記名稱

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

關鍵影格樣式表

除了 <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
版本設定

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

安全性

使用不包含關鍵字 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 注入。)