驗證 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 開發人員工具主控台 並檢查驗證錯誤。
開發人員主控台錯誤看起來會像這樣
網頁介面
AMP 驗證工具可以用作網頁介面,網址為 validator.ampproject.org。此介面會將錯誤與網頁的 HTML 原始碼並排顯示。此介面是互動式編輯器:變更 html 原始碼會導致互動式重新驗證。
瀏覽器擴充功能
可以使用瀏覽器擴充功能直接從瀏覽器的工具列存取 AMP 驗證工具。當您瀏覽時,它會自動驗證每個造訪的 AMP 網頁,並以彩色圖示視覺化指示網頁的有效性。
| 當 AMP 網頁中存在錯誤時,擴充功能的圖示會以紅色顯示,並顯示遇到的錯誤數量。 |
| 當 AMP 網頁中沒有錯誤時,圖示會以綠色顯示,並顯示警告數量 (如果有的話)。 |
| 當網頁不是 AMP,但網頁指示有 AMP 版本可用時,圖示會以藍色顯示,並帶有連結圖示,按一下擴充功能會將瀏覽器重新導向至 AMP 版本。 |
AMP 驗證工具擴充功能,適用於 Chrome 和 Opera。
用於 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 驗證錯誤指南。如果您在仔細評估後仍然遇到困難,請提出問題,我們會盡力協助您。