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

正在解決驗證錯誤

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

加入字元集

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

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

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

加入以下程式碼作為 <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 這樣做是為了防止未設定樣式的內容呈現，這也稱為 Flash Of Unstyled Content (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> 標記的網路元件，它是 <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 可以預先判斷元素的長寬比。

加入 width 和 height 到您的 amp-img 標記，如下所示

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

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

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

我們的圖片沒有回應式。

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

讓我們將版面配置屬性設定為 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.

常見問題

上一章 下一章