驗證 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
格式的舊方法。以下 URLhttps://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 驗證錯誤指南。如果您在仔細評估後仍然卡住,請提出問題,我們會盡力協助您。