驗證 AMP 頁面

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

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

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

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

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

瀏覽器開發人員主控台

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

在您的瀏覽器中開啟您的 AMP 頁面。
將 "#development=[1,actions,amp,amp4ads,amp4email]" 附加到 URL，例如，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 DevTools 主控台並檢查驗證錯誤。

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

網頁介面

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 Cache，這是一項免費服務，可快取您的頁面並在全球範圍內提供，讓它們載入速度更快。

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

如何修正驗證錯誤？

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

<img src="cat.png">

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

瀏覽器開發人員主控台
網頁介面
瀏覽器擴充功能

每個工具都提供幾項資訊

錯誤發生的位置 (HTML 文件中的行號和欄號)，在某些介面中可點擊以醒目提示該位置。在此案例中，問題發生在第 11 行第 2 欄。
描述錯誤的文字行。在這個案例中，文字指出我們正在使用 <img> 標籤，但應該使用 <amp-img> 標籤。
指向錯誤相關文件的連結。在這個案例中是 <amp-img> 標籤的文件。並非所有錯誤都會產生文件連結。

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

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