AMP
英
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 中文 波蘭語 越南語

解決驗證錯誤

在本節中，我們將逐步解決 AMP 頁面中的 AMP 驗證錯誤。請注意，錯誤在您的主控台中可能會以不同的順序顯示。

包含字元集

我們將從修正以下錯誤開始

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

為了正確顯示文字，AMP 要求您指定頁面的字元集。meta charset 資訊也必須是 <head> 標記的第一個子元素。此標記必須是第一個的原因是為了避免重新解譯在 meta charset 標記之前新增的內容。

將以下程式碼新增為 <head> 標記的第一行

<meta charset="utf-8" />

儲存檔案並重新載入頁面。確認字元集錯誤不再出現。

現在，讓我們看看以下錯誤

The mandatory tag 'link rel=canonical' is missing or incorrect.

每個 AMP 文件都需要一個連結，以參照該文件的「標準」版本。我們將在本教學課程的「讓您的網頁可被搜尋到」步驟中，進一步瞭解標準頁面是什麼，以及標準連結的不同方法。

在本教學課程中，我們將把我們正在轉換的原始 HTML 文章視為標準頁面。

繼續新增以下程式碼，置於 <meta charset="utf-8" /> 標記下方

<link rel="canonical" href="/article.html">

您可以建立獨立的標準 AMP 頁面。標準連結仍然是必要的，但應指向 AMP 文章本身

<link rel="canonical" href="article.amp.html">

現在，重新載入頁面。雖然還有許多錯誤需要修正，但標準連結錯誤已不再出現。

指定 AMP 屬性

AMP 要求在頁面的根 <html> 元素上使用屬性，以將該頁面宣告為 AMP 文件。

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

上述錯誤可以透過簡單地將 ⚡ 屬性新增至 <html> 標記來解決，如下所示

<html ⚡ lang="en">

現在，繼續重新載入頁面，並檢查兩個錯誤是否都已消失。

雖然指定 ⚡ 是建議的方法，但也可以使用 amp 屬性來取代 ⚡ 屬性，如下所示

<html amp lang="en">

指定 viewport

接下來，讓我們處理以下錯誤

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP 要求定義 viewport 的 width 和 minimum-scale。這些值必須分別定義為 device-width 和 1。viewport 是 HTML 頁面的 <head> 中常見的標記。

為了解決 viewport 錯誤，請將以下 HTML 片段新增至 <head> 標記

<meta name="viewport" content="width=device-width">

為 width 和 minimum-scale 指定的值是 AMP 中的必要值。定義 initial-scale 不是強制性的，但在行動網路開發中很常見，而且建議使用。您可以在「設定 Viewport」中閱讀更多關於 viewport 和回應式設計的資訊。

和之前一樣，重新載入頁面並檢查錯誤是否已消失。

取代外部樣式表

以下錯誤與我們使用樣式表有關

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

具體來說，此錯誤抱怨的是我們 <head> 標記中的以下樣式表連結標記

<link href="base.css" rel="stylesheet" />

問題在於這是外部樣式表參照。在 AMP 中，為了盡可能縮短文件的載入時間，您不能包含外部樣式表。相反地，所有樣式表規則都必須使用 <style amp-custom></style> 標記或作為內嵌樣式嵌入 AMP 文件中。

<style amp-custom>

/* The content from base.css */

</style>

因此，讓我們解決錯誤

  1. 移除 <head> 中指向樣式表的 <link> 標記，並將其取代為內嵌 <style amp-custom></style> 標記。樣式標記上的 amp-custom 屬性是強制性的。
  2. 將所有樣式從 base.css 檔案複製到 <style amp-custom></style> 標記中。

再次重新載入頁面，並確認樣式表錯誤已消失。

注意事項 – 不僅需要嵌入樣式，而且所有樣式資訊的檔案大小限制為 50 KB。您應該使用 CSS 預處理器 (例如 SASS) 來縮減 CSS，然後再將 CSS 內嵌到您的 AMP 頁面中。

重要事項 – 您的整個 AMP 文件中只能有一個 style 標記。如果您的 AMP 頁面參照了多個外部樣式表，則需要將這些樣式表整理成一組規則。若要瞭解哪些 CSS 規則在 AMP 中有效，請參閱「支援的 CSS」。

排除第三方 JavaScript

雖然樣式表可以透過在 AMP 中內嵌 CSS 來相對容易地重新製作，但 JavaScript 則不然。

The tag 'script' is disallowed except in specific forms.

一般而言，只有當 AMP 中的指令碼符合以下兩個主要要求時才允許使用：

  1. 所有 JavaScript 都必須是非同步的 (也就是說，在 script 標記中包含 async 屬性)。
  2. JavaScript 用於 AMP 函式庫和頁面上的任何 AMP 元件。

這實際上排除了在 AMP 中使用所有使用者產生/第三方 JavaScript 的可能性，除非如下所述。

對於使用者產生/第三方指令碼的限制，唯一的例外是

  1. 將中繼資料新增至頁面或設定 AMP 元件的指令碼。這些指令碼將具有 type 屬性 application/ld+json 或 application/json。
  2. 包含在 iframe 中的指令碼。在 iframe 中包含 JavaScript 應被視為最後的手段。在任何可能的情況下，JavaScript 功能都應替換為使用 AMP 元件。我們將在下一節中探索我們的第一個 AMP 元件。

嘗試開啟外部 base.js 檔案。您看到了什麼？檔案應該是空的，沒有任何 JavaScript 程式碼，並且只包含資訊註解，例如：

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the
use of external JavaScript files.

*/

考慮到這個外部 JavaScript 檔案不是我們網站的功能元件，我們可以安全地完全移除參照。

從您的文件中移除以下外部 JavaScript 參照

<script type="text/javascript" src="base.js"></script>

現在，重新載入頁面並確認指令碼錯誤已消失。

包含 AMP CSS 樣板

以下錯誤參照遺失的樣板程式碼

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

每個 AMP 文件都需要以下 AMP 樣板程式碼

<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>

將樣板程式碼新增到您文件的 <head> 標記底部。

<style amp-boilerplate> 標記最初會隱藏 body 的內容，直到 AMP JavaScript 函式庫載入完成，然後才會呈現內容。AMP 這樣做的目的是為了防止未套用樣式的內容呈現，這也稱為未套用樣式內容閃爍 (FOUC)。這有助於確保使用者體驗真正即時，因為頁面的內容會一次全部顯示，並且首頁的所有內容都會一起呈現。如果瀏覽器中停用了 JavaScript，則第二個標記會還原此邏輯。

將 <img> 取代為 <amp-img>

AMP 不支援用於顯示媒體的預設 HTML 對應項目，這解釋了以下錯誤

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP 有一個專門設計用於取代 <img> 標記的 Web 元件，即 amp-img 標記

<amp-img src="mountains.jpg"></amp-img>

將 <img> 標記取代為上述 amp-img 標記，然後再次執行驗證器。您應該會收到幾個新的錯誤

Layout not supported: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

為什麼 amp-img 會觸發另一個錯誤？因為 amp-img 不是傳統 HTML img 標記的直接替代品。使用 amp-img 時還有其他要求。

AMP 版面配置系統

版面配置錯誤告訴我們 amp-img 不支援 container 版面配置類型。AMP 設計中最重要的概念之一是其專注於減少呈現網頁所需的 DOM 重排量。

為了減少 DOM 重排，AMP 包含一個版面配置系統，以確保在下載和呈現頁面的生命週期中盡早知道頁面的版面配置。

下圖比較了 HTML 頁面通常的版面配置方式與 AMP 強制的版面配置方式。請注意，在左側的方法中，每次載入廣告或圖片時，文字都會重排。AMP 的版面配置方法可防止文字移動，即使圖片和廣告需要很長時間才能載入。

內容正常版面配置方式與 AMP 方法之間的比較

AMP 版面配置系統允許以多種方式定位和縮放頁面上的元素，包括固定尺寸、回應式設計、固定高度等等。

在我們的文章中，版面配置系統將 amp-img 的版面配置類型推斷為 container 類型。但是，container 類型僅適用於包含子元素的元素。container 類型與 amp-img 標記不相容，這就是造成此錯誤的原因。

為什麼會推斷出 container 類型？因為我們沒有為 amp-img 標記指定 height 屬性。在 HTML 中，可以透過始終為頁面上的元素指定固定寬度和高度來減少重排。在 AMP 中，您需要為 amp-img 元素定義寬度和高度，以便 AMP 可以預先確定元素的長寬比。

如下所示，將寬度和高度新增到您的 amp-img 標記

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

重新整理頁面並檢查驗證器；您應該不再看到任何錯誤！

您現在擁有一個有效的 AMP 文件，但圖片看起來不太好，因為它在頁面上的位置很尷尬。預設情況下，當您為 amp-img 指定高度和寬度時，AMP 會將尺寸固定為您指定的尺寸，但如果 AMP 可以縮放圖片以回應式地拉伸並適合頁面，無論螢幕尺寸如何，那不是很好嗎？

我們的圖片不是回應式的。

幸運的是，AMP 可以從您指定的寬度和高度計算出元素的長寬比。這允許 AMP 版面配置系統以多種方式定位和縮放元素。layout 屬性會告知 AMP 您希望如何定位和縮放元素。

讓我們將 layout 屬性設定為 responsive，以便我們的圖片可以縮放和調整大小

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

瞧！我們的圖片具有正確的長寬比，並且回應式地填滿螢幕寬度。

我們的圖片現在是回應式的！

繼續閱讀 – 在「AMP 版面配置規格」中瞭解更多關於 AMP 版面配置系統的資訊。

成功！

現在您的 AMP 文件應該看起來像這樣

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

重新整理頁面並查看主控台輸出。您應該會看到以下訊息

AMP validation successful.

常見問題

上一章 下一章