Google Accelerated Mobile Pages (AMP)移動端加速網頁技術,如博客(Blog)或網站(Web Site)運用了此技術,為了確保您的AMP運作正常,可以使用Google Search Console(Google 網站管理員工具)改善AMP頁面的測試工具。
如自己架站,你可以查看Google說明文檔建立AMP網頁。請按此處查看教學!
如果使用的程序是WordPress,可以在控制台安裝「AMP」外掛。
Accelerated Mobile Pages (AMP) 報告
AMP 報告會顯示 Google 檢索您的網站時成功建立索引的 AMP 網頁數或發生 AMP 相關錯誤的 AMP 網頁數。如果網頁含有 AMP 錯誤或缺少必要的結構化資料元素,就不會出現在有 AMP 相關功能的 Google 搜尋結果中。
AMP錯誤!
網站支援 Accelerated Mobile Pages Project 加速行動版網頁計畫,AMP對於網頁內容格式的要求比較嚴謹,稍有不規範的頁面就不予收錄;如果在Google Search Console(Google 網站管理員工具)的加速行動版網頁位置,查看到有AMP網頁錯誤警告,就需要修正問題了。
Logo: 請提供這個必要屬性
錯誤「logo」請提供這個必要屬性,這是因為網站的logo沒有被定義,可以前往WP的控制台「外觀」--> 主題「自訂」-->「網站識別」-->「網站圖示」新增Logo。 請看圖片▼
Image: 請提供這個必要屬性
錯誤「image」請提供這個必要屬性,這是因為網站文章沒有定義「特色圖片」所致,在文章編輯頁面新增「特色圖片」即可。 請看圖片▼
如果!文章累積太多都沒有設定特色圖片,可以在佈景主題的「functions.php」檔案,填入以下語法。並上傳一張圖片到主題的Image目錄。用作定義Image 來解決AMP 錯誤。其中「default」圖片名稱可以自行修改。
//修正AMP image錯誤
function bbm_amp_modify_json_metadata( $metadata, $post ) {
if (!array_key_exists('image', $metadata)) {
$metadata['image'] = array(
'@type' => 'ImageObject',
'url' => get_template_directory_uri() . '/image/default.png',
'height' => 512,
'width' => 1024,
);
}
return $metadata;
}
add_filter( 'amp_post_template_metadata', 'bbm_amp_modify_json_metadata', 10, 2 );
AMP 標記中發現了無效的版式屬性
提示「amp-img」代碼中的「height」或「Width」屬性設為了無效的值,這是文章的網頁其中有部份圖片的「height」高沒有定義數值。 請看圖片▼
修正錯誤後!你可以使用上方的「新測」功能,重新測試錯誤頁面。 請看圖片▼
備註:
如果你已經為網站加入行動版網頁或AMP加速網頁,那麼使用「手機版測試:Mobile-Friendly Testing Tool」或「AMP網頁檢測:AMP Test」行動裝置相容性測試工具,可以測試行動版網頁標記的有效性以及頁面上的任何結構化數據。希望此工具可以更輕鬆地創建優秀的AMP’d內容,同時找到並解決您的AMP頁面上可能出現的問題。
如果你是自己製作的網頁想看看有無把AMP語法寫好,請打開Chrome瀏覽器,並開啟「Chrome DevTools」開發者工具的「Console」即可查看,如果顯示「Powered by AMP ⚡ HTML – Version XXXXX」那就是表示此頁面為正確的AMP網頁。
若下方有錯誤訊息,可以依照訊息做修正處理。 請看圖片▼
【註】想知道有無驗證過,可以在網址末端加上「#development=1」,然後開啟本步驟的開發者工具,將會顯示是否驗證通過。
如何打開AMP頁面,只要在網址(連結)後加上「/amp」尾巴即可。
例如: https://www.moonlol.com/hong-kong-style-wordpress-theme-template-5673.html/amp