FB 網址分享破圖不是你的問題
近期 Facebook 的更新調整對許多網站管理者來說，可能是一項挑戰，特別是當您發現分享到 Facebook 的文章封面圖因為包含中文檔名而導致 og:image 撈取失效，進而出現破圖的情形。雖然我知道許多人都是將圖檔命名為中文方便管理辨識，特別是許多電商產品名稱圖片更是如此。這篇文章旨在提供一套全面的解決方案，從根本解決 Facebook 分享網址縮圖的破圖問題。
問題產生的原因
Facebook 近期的修改調整導致其不再支援中文檔名的 og:image。這意味著，如果您的精選代表圖(封面圖)的檔名包含中文，一旦被分享到 Facebook，就會造成撈取 og:image 失效，導致破圖。
解決方案：強制轉檔名
此程式碼段會在每次上傳檔案時檢查檔名是否包含中文字元。如果是，則將檔名改為以「my_prefix_」開頭，後接上傳時間的 Unix 時間戳，再加上原檔案的副檔名，從而達成英文化的檔名重命名過程。透過加入這段程式碼至您的 WordPress 網站的 functions.php 檔案或透過 Code Snippet 外掛來實施這個更動。為了預防此類問題，可以透過以下的程式碼，強制將未來上傳到 WordPress 的圖片中文檔名轉換為英文。
function rename_image_on_upload($filename) {
if (preg_match('/[一-龥]/u', $filename)) {
$info = pathinfo($filename);
$ext = empty($info['extension']) ? '' : '.' . $info['extension'];
$name = basename($filename, $ext);
return 'my_prefix_' . time() . $ext; // 在這裡定義重新命名的英文詞
}
return $filename;
}
add_filter('sanitize_file_name', 'rename_image_on_upload', 10);進階處理：批次重命名
為了處理現有的中文檔名圖片，推薦使用 Phoenix Media Rename 外掛。先切換媒體庫的「清單模式」再選擇圖片後，批次選擇你看到的中文檔名「Rename from Post」功能，可以觸發上述程式碼，將所有選中的中文檔名圖片強制轉換成英文檔名。
如果遇到無法修改檔名的權限問題，請透過 sFTP 或任何可以管理主機網站資料夾權限之工具功能，變更權限為 755 即可。
或者另一套更強的但是需要付費才能使用的 PRO 版功能，Media File Renamer Pro，它可重新命名依照你的準則，例如依照媒體的標題，這樣很適合組合另一套外掛「Auto image attributes from filename with bulk updater」先進行將媒體關聯標題取回反向寫入圖片媒體的標題與替代文字、說明，這樣就可以反向取得媒體標題並透過這方式寫回去。
FB 網址批次失效清除快取
解決了上面的名稱問題，雖然已經預防了未來上傳的圖片不會再次因為設定中文檔名造成抓取不到破圖的問題，但批次處理完的舊文章該怎麼辦？舊文章、舊商品、舊作品．．．．blabla 超多各種 CPT、CCT 都會有這問題需要替換原有的精選代表圖檔名，舊的內容必須要到 FB 上面進行批次失效工具清除作業。在這個部分，我們必須要用一段程式碼來達成收集並列出所有網址的方式，由於程式碼有 JS 的部分會預轉譯，讓我設計的一鍵複製網址按鈕失效，因此請下載：
list_all_urls_shortcode 檔案，這是一個 zip 壓縮檔，下載之後請解壓縮後打開裡面的 txt 檔案並將 code 放進 functions.php 或者 Code Snippet 去執行。
接著創一個文章或者頁面，輸入 共有 153 條網址 短碼儲存送出發表，並前往瀏覽會顯示類似以下結果：
當你按下我特別製作的「複製所有網址」按鈕時，他就會進行複製網址的作業，接著我們需要前往 Facebook Debugger 工具，選擇「批次失效工具」，將剛剛所有複製的網址貼上去，並按下偵錯：
由於 Facebook Debugger 的批次失效工具運作原理是清除在 FB 上面的網址預覽快取，一次只清除 50 個結果，這個案例 172 條網址，清除後會跳出警告：
當你看到以上訊息「輸入的部分網址為 Facebook 網址或超過數量上限，因此系統已略過這些網址。顯示略過的網址」別緊張，只要按下「顯示略過的網址」，會顯示被略過未完成清除的網址，只要「將這些被略過的網址」全部選取後，再貼上去上面的批次失效工具欄位，再送出一次「偵錯」就可以再一次清除 50 條網址，如此重複直到你網址都清除完畢為止。
修復結果
這個案例就成功修復因為 FB 無法正確抓取到中文檔名的圖檔導致網址分享破圖的問題，我知道對於某一些自己架站的使用者有一點小複雜跟難度，我們也提供代客解決修復問題的服務，透過這項服務您可以：
- 變更所有中文檔名的圖檔為英文圖檔
- 建立良好的圖片命名習慣
- 重新關聯正確圖檔與資料表
- 臉書分享圖片不再因此破圖找不到圖片
- 拯救你上千小時的工作時間
- 拯救因為破圖導致客戶覺得你的網站產品服務而離去的問題
需要幫忙?
我們提供相關技術支援服務
或許您對於此文章的功能或解決方式不熟悉，需要專業的技術人員為您協助。我們提供「收費代客處理」服務，歡迎隨時與我們聯絡。
