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

最後更新於 2020 年 07 月 07 日

本文參考資料 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 造成的

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

STEP 4

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

 

相關的文章

Brave Together 免費線上視訊會議,可分享螢幕畫面和 YouTube 影片

隨著台灣新冠肺炎(COVID-19)疫情趨緩,許多公司開始解除在家工作,恢復原本的辦公室工作模式,如果還有遠端開會的需求,有不少線上視訊會議服務可以做到,例如之前推薦過的 Google Meet 或微軟 Meet Now 都是效果很好的選擇,這些服務特色是不用額外下載軟體,只要以瀏覽器開啟和登入帳號就能進行視訊通話或螢幕分享,亦有文字聊天室讓沒有麥克風或不方便說話的人也能參與討論,更重要的就是線上會議服務的隱私及安全問題。

WordPress Security Scanner 掃描你的網站是否有已知弱點

全世界有超過 35% 網站使用 WordPress,做為最流行、最多人使用的開放原始碼內容管理系統(CMS),當然要有更高的安全性,WordPress 核心檔案確實非常安全,至少這麼多年幾乎沒看到任何大規模的漏洞或問題出現,但很多時候弱點都是出現在佈景主題或外掛程式,尤其是一些過時、來路不明的程式碼,可能會讓你的網站暴露於危險中。很多站長並不知道問題嚴重性,直到網站被植入惡意代碼,尋求解決方案為時已晚。

VaultPress 完整備份你的 WordPress 網站,無痛搬家或回復特定時間點

如果你是使用 WordPress 自架站(Self-hosted)的話,有一個經常被忽略的問題,那就是網站資料備份的重要性,你可能會問:主機商不都有提供每日備份或是異地備援嗎?即使如此,仍看到不少因為硬碟損壞或伺服器遭入侵而無法回復客戶資料的案例,因此最好的方法還是自己進行網站備份比較妥當。WordPress 備份工具非常多,方式也都不盡相同,想省錢還可利用外掛連接你的雲端硬碟備份資料,或是手動將資料壓縮後以 SSH、SFTP 傳輸到其他主機保存,不過這些缺點就是可能會比較耗費資源,要管理備份也不太方便。

instant.page 官方 WordPress 外掛程式,在網站頁面產生立即載入效果

我去年曾介紹過一個很有用的網站工具「instant.page 讓你的網頁載入更即時,只需加入一段程式碼」,透過只有 200 行、壓縮後僅有 1 Kb 左右的 JavaScript 程式碼來讓網站速度變得更快,而它的原理也不難懂,利用瀏覽器 prefetch 技術在使用者點選鏈結前預先取得網頁內容,雖然只有幾毫秒差距,但確實有助於改善網頁的瀏覽體驗。現在這項服務也被不少國際知名公司使用。如果你是一般使用者,透過 FasterChrome 瀏覽器擴充功能也能提升瀏覽網頁時的速度。

Jetpack 免費 CDN 自動加速分流 WordPress 圖片外掛教學

六年前寫過一篇「Photon 免費 CDN 圖片分流、加速服務,每個 WordPress 用戶都該開啟的外掛」,後來這項功能成為 Jetpack 網站加速器(Site Accelerator)一部分,另一個加速器功能是 Asset CDN,和圖片 CDN 差別在於一個是針對圖片進行分流,Asset CDN 是加速 WordPress 靜態檔案,例如 CSS 和 JavaScript,兩個功能都很有用,當然也可依照自己的需求開啟。

htaccess tester 設定檔語法檢查工具,測試伺服器 Rewrite 寫法是否正確

如果有使用 VPS、獨立主機(Dedicated Servers)或雲端主機架設過網頁伺服器,一定對 Apache 不陌生,當今有很多自動化的安裝設定工具,例如 ServerPilot 或 RunCloud 等等服務,可能比較少接觸到伺服器的設定檔,但一定會遇到相當重要的設定檔 .htaccess。簡單來說,這是 Apache 檔案目錄系統設定檔的預設檔名,比較常應用在設定網址重寫(URL Rewrite)或是一些安全權限管理,例如在「11 個強化 WordPress 網站安全的 .Htaccess 設定技巧」就有不少設定範例。

回應