AMP
EN
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 要求您為頁面指定字元集。中繼字元集資訊也必須是 <head> 標記的第一個子項。此標記必須是第一個的原因是為了避免重新解譯在中繼字元集標記之前新增的內容。

加入 以下程式碼作為 <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 (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

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

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

一般而言，只有在滿足以下兩個主要要求的情況下，才允許在 AMP 中使用腳本

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

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

使用者產生/第三方腳本限制的唯一例外是

  1. 將中繼資料新增到頁面或設定 AMP 元件的腳本。這些腳本將具有類型屬性 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 您希望如何定位和縮放元素。

讓我們設定 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.

常見問題

上一章 下一章