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

修復 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 屬性」的問題。

修復 WordPress Gravatar 圖片遺失 ALT 標籤問題

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

修復 WordPress Gravatar 圖片遺失 ALT 標籤問題

STEP 2

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

修復 WordPress Gravatar 圖片遺失 ALT 標籤問題

STEP 3

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

.gist table { margin-bottom: 0; }


This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

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 部分,然後加入 alttitle 兩個屬性,除了顯示相關說明外也會有作者名稱。

STEP 4

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

修復 WordPress Gravatar 圖片遺失 ALT 標籤問題

相關文章

  • 使用 Cloudflare 的 Page Rule 增強 WordPress 安全性和效能教學
  • 設定 Jetpack 網站加速器的圖片壓縮畫質教學(Photon CDN)
  • Jetpack 免費 CDN 自動加速分流 WordPress 圖片外掛教學
  • Jetpack Boost 改善 WordPress 網站效能和搜尋引擎最佳化外掛程式

Ten articles before and after

免費 Simpo PDF Creator Pro:PDF製作軟體(中文版) – telegram 下載

Files to Friends 免費空間將 1GB 檔案傳送到指定的 Email 信箱 – telegram 下載

微軟推出免費工具,將 Evernote 移轉匯入 OneNote – telegram 下載

GameSchool遊戲學校 – 充滿人情味的遊戲網站! – telegram 下載

Perfect Icons 超棒社交網站按鈕產生器!三步驟快速加入圖示、CSS 語法教學 – telegram 下載

Nokia 也推出了地圖服務- HERE,功能相當齊全,還可以戴 3D 眼鏡來看地圖! – telegram 下載

SWeTE 免費幫你的網站建立多國語言版本! – telegram 下載

Jetdrop 強調加密安全免費空間,支援最大傳輸 10 GB 可保存七天 – telegram 下載

迎接 2016,Fireworks 讓你在網站上放煙火!加上新年問候與祝福訊息 – telegram 下載

Discipline 採用 macOS Big Sur 風格設計 100+ 常見應用程式圖案 – telegram 下載