驗證 AMP 頁面

重要事項：本文件說明不適用於您目前選取的格式 電子郵件！

觀看我們的影片，了解各種驗證選項。

AMP 的主要優勢不僅在於它能讓您的頁面速度更快，還在於它能以可驗證的方式讓您的頁面速度更快。這樣一來，Twitter、Instagram 或 Google 搜尋等第三方就能更放心地以越來越有趣的方式向讀者提供 AMP 頁面。

如何檢查我的頁面是否為有效的 AMP？

有多種方法可用於驗證 AMP 文件。它們都會產生完全相同的結果，因此請使用最適合您開發風格的方法。

除了 AMP 有效性之外，您可能還想確認您的 AMP 文件是否能被第三方平台探索到。

瀏覽器開發人員工具

AMP 驗證工具與 AMP JS 函式庫捆綁在一起，因此在每個 AMP 頁面中都可直接使用。若要驗證

在瀏覽器中開啟您的 AMP 頁面。
在 URL 後面附加 "#development=[1,actions,amp,amp4ads,amp4email]"，例如，https://127.0.0.1:8000/released.amp.html#development=1 是驗證 AMP 格式的傳統方法。以下 URL https://127.0.0.1:8000/released.amp.html#development=amp4email 將根據 AMP for email 規格驗證文件。
開啟 Chrome 開發人員工具主控台，並檢查是否有驗證錯誤。

開發人員主控台錯誤看起來會像這樣

網頁介面

AMP 驗證工具可以作為網頁介面在 validator.ampproject.org 上使用。此介面會將錯誤與頁面的 HTML 原始碼並排顯示。此介面是一個互動式編輯器：變更 HTML 原始碼會導致互動式重新驗證。

瀏覽器擴充功能

可以使用瀏覽器擴充功能直接從瀏覽器的工具列存取 AMP 驗證工具。當您瀏覽時，它會自動驗證每個造訪的 AMP 頁面，並以彩色圖示視覺化指示頁面的有效性。

	當 AMP 頁面中存在錯誤時，擴充功能的圖示會以紅色顯示，並顯示遇到的錯誤數量。
	當 AMP 頁面中沒有錯誤時，圖示會以綠色顯示，並顯示警告數量（如果有的話）。
	當頁面不是 AMP，但頁面指示有可用的 AMP 版本時，圖示會以藍色顯示，並帶有連結圖示，點擊擴充功能會將瀏覽器重新導向至 AMP 版本。

適用於 Chrome 和 Opera 的 AMP 驗證工具擴充功能。

用於 CI 的 NPM 套件

作為建置和測試管道的一部分，您可以透過 AMP 驗證工具 NPM 套件整合 AMP 驗證：amphtml-validator 或 gulp-amphtml-validator (gulp 外掛程式)。例如，您可以使用 AMP 驗證工具 NPM 套件進行整合測試，或在排定的工作中驗證生產環境 AMP 頁面。

範例：驗證 AMP HTML 檔案

在此範例中，我們使用 amphtml-validator NPM 套件驗證 AMP HTML 檔案。驗證狀態會透過管道輸出到主控台。

'use strict';
var amphtmlValidator = require('amphtml-validator');
var fs = require('fs');

amphtmlValidator.getInstance().then(function (validator) {
  var input = fs.readFileSync('index.html', 'utf8');
  var result = validator.validateString(input);
  ((result.status === 'PASS') ? console.log : console.error)(result.status);
  for (var ii = 0; ii < result.errors.length; ii++) {
    var error = result.errors[ii];
    var msg = 'line ' + error.line + ', col ' + error.col + ': ' + error.message;
    if (error.specUrl !== null) {
      msg += ' (see ' + error.specUrl + ')';
    }
    ((error.severity === 'ERROR') ? console.error : console.warn)(msg);
  }
});

範例：使用 gulp 工作任務來驗證 AMP HTML

在此範例中，我們有一個 gulp 工作任務，用於驗證所有 AMP HTML 檔案。如果發生 AMP 驗證錯誤，工作任務將以錯誤代碼 (1) 結束。

const gulp = require('gulp');
const gulpAmpValidator = require('gulp-amphtml-validator');

const paths = {
  src: 'src/*.html'
};

gulp.task('amphtml:validate', () => {
  return gulp.src(paths.src)
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});

gulp.task('default', ['amphtml:validate'], function () {
});

命令列工具

您可以使用 AMP HTML 驗證工具命令列工具來驗證 AMP HTML 檔案。

開始使用

請確保您的系統上已安裝 Node.js 及其套件管理器 'npm'。
執行以下命令來安裝 AMP HTML 驗證工具命令列工具：npm install -g amphtml-validator。

現在讓我們驗證一個真實的 AMP HTML 頁面

$ amphtml-validator https://amp.dev.org.tw/
https://amp.dev.org.tw/: PASS

不出所料，此頁面是有效的 AMP HTML。讓我們嘗試一個無效的頁面：several_errors.html。若要執行 amphtml-validator 命令，您可以提供頁面的 URL 或本機檔案名稱。下載並儲存 several_errors.html 到檔案中，然後執行

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see /documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /documentation/components/amp-ad/)
...

錯誤訊息的格式包含檔案名稱、行號、欄號和訊息，通常後面會接著 AMP HTML 參考文件的連結。某些編輯器（包括 Emacs）可以解譯此格式，並讓您跳到原始檔案中的錯誤。

若要取得建立您自己的 AMP 頁面的良好起點，請考慮 minimum_valid_amp.html

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

命令列工具提供其他功能，包括關閉顏色、列印 JSON 輸出，或執行特定版本的驗證工具 Javascript（預設情況下，它會執行最新發布的指令碼）。

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

如果我的頁面無效會怎麼樣？

AMP 驗證工具不只是您在開發期間的便利工具。Twitter 或 Google 等平台也會使用它，將您的 AMP 頁面整合到其內容和搜尋結果中。更重要的是，他們通常不會直接從您的伺服器請求頁面，而是使用 Google AMP 快取，這是一項免費服務，可快取您的頁面並使其在全球範圍內可用，因此它們的載入速度更快。

如果 AMP 驗證服務偵測到您的頁面有問題，它將不會被第三方網站發現和散布，也不會出現在 Google AMP 快取中。因此，您不僅會失去快取的速度優勢，您的頁面也可能在許多地方看不到！那就太可惜了，所以讓我們確保這種情況不會發生。

如何修正驗證錯誤？

大多數驗證錯誤都很容易解決和修正。請考慮以下 HTML 標記

<img src="cat.png">

這會產生此 AMP 驗證錯誤，在這些不同的工具中顯示

瀏覽器開發人員工具
網頁介面
瀏覽器擴充功能

每個工具都提供幾項資訊

錯誤在 HTML 文件中的位置（行號和欄號），在某些介面中可點擊以反白顯示該位置。在本例中，問題發生在第 11 行，第 2 欄。
描述錯誤的文字行。在本例中，文字表示我們正在使用 <img> 標記，但我們應該使用 <amp-img> 標記。
連結到有關錯誤的相關文件。在本例中，是 <amp-img> 標記的文件說明。並非所有錯誤都會產生文件說明連結。

仔細重新閱讀規格，我們意識到我們正在使用 <img> 標記，但我們應該使用 <amp-img> 標記。

若要更深入瞭解潛在錯誤的完整清單，請參閱AMP 驗證錯誤指南。如果您在仔細評估後仍然遇到困難，請提出問題，我們會盡力協助您。