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 要求您指定頁面的字元集。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 文件中只能有一個樣式標記。如果您的 AMP 頁面參考了多個外部樣式表，您將需要將這些樣式表整理成一組規則。若要瞭解哪些 CSS 規則在 AMP 中是有效的，請閱讀「支援的 CSS」。

排除第三方 JavaScript

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

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

一般來說，只有在符合以下兩個主要要求的情況下，才允許在 AMP 中使用指令碼

  1. 所有 JavaScript 都必須是非同步的 (即在指令碼標記中包含 async 屬性)。
  2. JavaScript 用於 AMP 程式庫和頁面上的任何 AMP 元件。

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

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

  1. 將中繼資料新增至頁面或設定 AMP 元件的指令碼。這些將具有類型屬性 application/ld+json 或 application/json。
  2. 包含在 iframe 中的指令碼。在 iframe 中包含 JavaScript 應被視為最後的手段。在可能的情況下，應使用 AMP 元件 取代 JavaScript 功能。我們將在下一節中探索我們的第一個 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> 標記最初會隱藏主體的內容，直到 AMP JavaScript 程式庫載入完成，然後才會呈現內容。AMP 這樣做是為了防止未套用樣式的內容呈現，也稱為 Flash Of Unstyled Content (FOUC)。這有助於確保使用者體驗真正即時，因為頁面的內容會一次全部顯示，並且摺疊以上的內容會一起呈現。如果瀏覽器中停用了 JavaScript，則第二個標記會還原此邏輯。

以 <amp-img> 取代 <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>

以上面的 <amp-img> 標記取代 <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.

常見問題

上一章 下一章