AMP頁面錯誤修正

發表留言 人氣: 156°c

Google Accelerated Mobile Pages (AMP)移動端加速網頁技術,如博客(Blog)或網站(Web Site)運用了此技術,為了確保您的AMP運作正常,可以使用Google Search Console(Google 網站管理員工具)改善AMP頁面的測試工具。

如自己架站,你可以查看Google說明文檔建立AMP網頁。請按此處查看教學!

如果使用的程序是WordPress,可以在控制台安裝「AMP」外掛。

 Accelerated Mobile Pages (AMP) 報告

開啟AMP報告: 請按此 1 請按此 2

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(
[email protected]' => '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

相關文章:
1. Google AMP加入Adsense廣告及Analytics分析統計
2. AMP新增分享按鈕及相關文章
3. AMP上方頭部及下方底部加上代碼

標籤: , | 短網址