修復 WordPress Gravatar 大頭貼圖片遺失 ALT 標籤 SEO 問題

本文參考資料 Missing WordPress Gravatar ALT tag value? How to fix, 原作者 App Shan。

如果有使用 WordPress 架站的話一定對 Gravatar 不陌生，Gravatar 算得上十年來最流行的大頭貼服務，只要在網站上以 Email 註冊一個帳號，上傳頭像與該信箱地址連結，在支援大頭貼功能的部落格留言後就會顯示你的頭像，而最多人使用的 WordPress 平台就支援 Gravatar（畢竟他們也是同一家公司 Automattic 旗下的項目）。即使現在比較多網站直接使用 Facebook 留言框取代內建的留言功能，依然會在作者介紹的欄位使用 Gravatar 大頭貼。

最近在研究 Bing 網站管理員工具時發現有個 SEO 問題，雖然不是很嚴重，但放在那邊看了很礙眼，這個問題就是在載入 Gravatar 的頁面會出現「img 標籤未定義 ALT 屬性」錯誤，簡單來說，搜尋引擎看不懂圖片影像，開發者透過 alt 屬性為圖片加入文字描述，當圖片無法載入或使用者停用時就會以 ALT 文字替代，而這也會用於螢幕助讀程式，因此在 SEO 建議上多半會希望為圖片加入 ALT 屬性。

雖然為圖片加上 ALT 標籤並不困難，但是 Gravatar 是由 WordPress 函式獲取大頭貼圖片，在不修改 WordPress 程式的情況下就只能透過其他方式來替換載入 Gravatar 的原始碼，還好我在網路上找到國外部落客提供的一段程式碼，只要加入 functions.php 就能修復這個問題。

使用教學

STEP 1

從 Bing 網站管理員的「SEO 報告」可以看到網站有那些 SEO 建議和需要改進的項目，如果你的網站是以 WordPress 架站，本身也有用到 Gravatar ，那麼有很大的機會會看到「img 標籤未定義 ALT 屬性」的問題。

透過 Bing「SEO 分析程式」輸入要檢測的網站網址，在下方的 SEO 建議就會看到該頁面所有的錯誤問題，原則上嚴重性較低的可以不修復，如果嚴重性很高就可能影響到你的網站，還是得找時間將這些錯誤處理一下，剛好 Gravatar 造成的 ALT 標籤遺失是比較輕微的問題，如果你覺得小問題看了礙眼，除了把大頭貼拔掉以外還能先修復一下。

STEP 2

從「網頁來源」可以看到標記為黃色的就是 SEO 建議出現的錯誤部分。

STEP 3

開啟你的佈景主題裡 functions.php，將以下這段函式加入：

	function crunchify_gravatar_alt( $crunchifyGravatar ) {
	if ( have_comments() ) {
	$alt = get_comment_author();
	}
	else {
	$alt = get_the_author_meta( 'display_name' );
	}
	$crunchifyGravatar = str_replace( 'alt=\'\'', 'alt=\'Avatar for ' . $alt . '\' title=\'Gravatar for ' . $alt . '\'', $crunchifyGravatar );
	return $crunchifyGravatar;
	}
	add_filter( 'get_avatar', 'crunchify_gravatar_alt' );

view raw fix-gravatar-alt.js hosted with ❤ by GitHub

這段函式的意思是找尋 Gravatar 出現的 img 部分，然後加入 alt 和 title 兩個屬性，除了顯示相關說明外也會有作者名稱。

STEP 4

編輯完成後清除 WordPress 快取，再次回到 SEO 分析程式，重新檢查後就會發現原有的圖片標籤遺失問題已經解決。