AMP errors – 如何修正加速行動版網頁錯誤

max

8 年前

AMP errors

在前面的文章已經跟大家分享過，如何讓自己的 WordPress 網站支援 Accelerated Mobile Pages Project，這個加速行動版網頁計畫對於網頁內容格式的要求比較嚴謹，如果在 Google Strunctured Data Testing Tool 測試時發現了問題 AMP errors（圖一），那麼要如何的修正呢？接著的內容要分享這個修正錯誤的步驟，如果有發生問題相似的朋友可以參考看看。

（圖一）WordPress AMP errors

logo: 請提供這個必要屬性

第一個錯誤 logo: 請提供這個必要屬性，這是因為網站的logo沒有被定義，很簡單的只要在WordPress的控制台頁面，外觀/自訂/網站身份/網站圖示（圖二），可以設定圖示的區塊，新增網站圖示的圖片檔，設定完成後再執行一次檢查工具，就可以發現錯誤少一樣了（圖三）。

（圖二）WordPress 網站圖示

（圖三）AMP errors image:請提供這個必要屬性

image: 請提供這個必要屬性

第二個錯誤是image: 請提供這個必要屬性，這是因為網站文章沒有定義到特色圖片所致，很簡單的只要在文章編輯頁面新增特色圖片（圖四），就可以解決這個錯誤（圖五），開啟google chrome瀏覽器/更多工具/開發人員工具，輸入AMP 驗證網址，例如：http://yourdomain.com.tw/amp-test-post/amp/#development=1，也可以看到AMP 驗證成功的指示 AMP validation successful（圖六）。

（圖四）新增特色圖片

（圖五）沒有問題

（圖六）AMP validation successful

補充說明

關於第二個錯誤 image: 請提供這個必要屬性，如果是新建的 WordPress網站那麼當然可以在編輯文章時新增特色圖片，來解決這個 AMP錯誤，但是如果您的 WordPress網站已經經營一段時間，累積了不少的文章，而且有很多文章都沒有設定特色圖片，那麼應該如何處理呢？AMP 外掛程式討論區有網友提供了解決方案，作法也不難，請開啟子佈景主題的functions.php檔案，填入以下語法，這個語法的目的是在子佈景主題資料夾下新增images資料夾，上傳一個default.png圖檔作為預設的圖檔（可以自行建立圖檔），用作定義 image來解決 AMP錯誤。

add_filter( 'amp_post_template_metadata', 'bbm_amp_modify_json_metadata', 10, 2 );

function bbm_amp_modify_json_metadata( $metadata, $post ) {
    if (!array_key_exists('image', $metadata)) {
	$metadata['image'] = array(
            '@type' => 'ImageObject',
            'url' => get_template_directory_uri() . '/images/default.png',
            'height' => 512,
            'width' => 1024,
        );
    }
    return $metadata;
}

add_filter( 'amp_post_template_metadata', 'bbm_amp_modify_json_metadata', 10, 2 );

function bbm_amp_modify_json_metadata( $metadata, $post ) {

if (!array_key_exists('image', $metadata)) {

$metadata['image'] = array(

'@type' => 'ImageObject',

'url' => get_template_directory_uri() . '/images/default.png',

'height' => 512,

'width' => 1024,

);

}

return $metadata;

}

有興趣研究Schema.org (JSON) Metadata相關問題解決方法的話，也可以到 AMP for WordPress 找到更多說明文件。