fbpx
黑色星期五 (Black Friday) 優惠開始

[2022 年] 如何解決 FB 臉書分享連結貼文時,縮圖預覽無法正確顯示的問題?

Facebook 作為全球最大的社交平台,每小時都有 [新內容] 加入其中,尤其像我們部落格最經常會分享自己的 [新文章] 到不同的社團、粉絲專頁、Line 和新興媒體平台。不同工具普遍都以 Facebook 的制式作為業內標準,所以如果您的內容在 Facebook 顯示為 [正常],理論上在其他平台的展示都不太會出問題。這次分享常見的新文章在發佈到 Facebook 時,縮圖和內容預覽無法正確顯示的解決方法。

Youtube 教學影片:

影片長度:6 分鐘
語言:國語
字幕:繁體中文

為什麼我的縮圖預覽怪怪的?

為什麼我的縮圖預覽怪怪的?

上方的圖片很經常出現,如果一個網址連結 (Link) 從未在 Facebook 被分享過,就是第一次出現,一般可能未法正確被讀取,就會出現灰色的一片底色和純文字。說白點就是精選圖片和網頁描述無法正確被顯示出來,這不是誰的錯誤或犯錯,但您需要了解什麼原因導致這個狀況出現,並使用正確的方式來解決,讓我繼續談下去。

設定 WordPress 精選圖片 (Featured Image)

在 WordPress 的文章 (Post) 和頁面 (Page) 裡,一般會不大量文字和圖片等內容,新手記得不要忘記在右方的設定區,有一個精選圖片 (Featured Image) 的區域,讓您 [上傳] 一張圖片,這張圖片代表文章的封面圖片,也會出現在社交媒體的封面照,所以真的不要忘記這點。

備注:如果不設定精選圖片 (Featured Image)?

一般來說,有些系統會搜索您文章的圖片,尤其是第一張比較大的圖片,但最終選擇那張圖片您無法決定,有時候可能出現未如人意的結果,所以記得千萬不要忘記設定精選圖片喔!

WordPress 精選圖片 (Featured Image) 是什麼?

WordPress 精選圖片 (Featured Image) 是什麼?
WordPress 精選圖片 (Featured Image) 是什麼?

常見的 WordPress 精選圖片 (Featured Image) 可以類比成我們人類在社交媒體上的個人「大頭照片 / Profile Image」或書籍的「封面 / Cover」等等。不過這是適用於 WordPress 網站裡的文章和頁面。因此,這是網絡上的訪客對這個內容的第一印象。

雖然 WordPress 系統沒有限制一定要使用精選圖片 (Featured Image),這個並非必須的設定,但我們強烈建議新手一定要認真思考這個步驟。新手如果不太懂使用像 Adobe Illustrator 和 Adobe Photoshop 等專業的網頁和平面設計工具,市場上不少知名部落格的文章,他們的圖片都是直接套用 免費圖片 的,並不需要任何額外加工和創作,重點是只要圖片能夠緊扣文章的主題即可。

設定 SEO 外掛的社交分享內容

設定 SEO 外掛的社交分享內容
設定 SEO 外掛的社交分享內容

在 WordPress 的使用者之中,使用比例最多的 SEO 輔助外掛,分別是 Rank Math、Yoast SEO 和 All in One SEO Pack 這 3 個選擇,佔了最大宗。它們都各自提供可以設定社交媒體 (Social Media) 的面板,一般最少需要提供 3 項的資訊。

  • 精選圖片 (Featured Image)
  • 文章的標題 (Post Title)
  • 文章的描述 (Post Description)

什麼是 Facebook [分享除錯工具]?

什麼是 Facebook [分享除錯工具]?
什麼是 Facebook [分享除錯工具]?

這次介紹的免費工具是 分享除錯測試工具 – Facebook for Developers,我認為每位站長都應該把這個工具的網址加入您的網頁瀏覽器的書籤 (Book Mark) 裡,因為真的非常實用,差不多每次撰寫完一篇新的文章,就立即要放上去測試看看,然後才會分發到不同的社交媒體和群組。


引用部分官方的介紹:

你可以使用分享偵錯工具,瞭解網站內容分享在 Facebook、Messenger 和其他位置時所使用的資訊;Batch Invalidator 讓你能同時針對多個網址,重新整理這些資訊;開放式圖表標記則能讓你控制網站內容的顯示方式。

你可以透過存取憑證偵錯工具,針對使用 Facebook 登入你應用程式的用戶,查看與該用戶的特定存取憑證連結的資訊。

什麼是開放式圖表標記?

大多數內容是以網址方式分享至 Facebook,因此,務必使用「開放式圖表」標籤來標記您的網站,以便管理內容在 Facebook 的顯示方式。為了讓我們的網絡爬蟲正確分享您的網站,您的伺服器還必須使用 gzip 和 deflate 編碼。

如果沒有這些「開放式圖表」標籤,Facebook 網絡爬蟲會使用內部啟發學習法儘可能猜測內容的標題、說明和預覽圖像。使用「開放式圖表」標籤明確指定此資訊,以確保在 Facebook 上展示最高品質的帖子。

開始使用 – Facebook 分享除錯工具

開始使用 - Facebook 分享除錯工具
開始使用 – Facebook 分享除錯工具

步驟一:貼上您新文章的網址

您可以從文章的右方的 [永久連結] 欄位,找到您的文章網址,直接貼上那個輸入框即可。

步驟二:按下除錯 [Debug] 按鈕

記得用原始的網址,不要用 短網址,還有注意 http 和 https 的差異。

實作除錯步驟

實作除錯步驟
實作除錯步驟

步驟一:點擊 [再次抓取]

第一次除錯,理論上不可能成功抓到圖片和引言,這非常正常,請按下 [再次抓取] 的按鈕,然後稍等數秒。

步驟二:確認 [連結預覽] 正確無誤

未必可以一次就成功,如果不成功,請重複 [步驟一] 數次,直至成功為止。

成功,確認預覽正確無誤

成功,確認預覽正確無誤
成功,確認預覽正確無誤

如果出現您設置的精選圖片 (Featured Image),恭喜,您現在就是大成功,不過如果之後 (更新) 了圖片和資訊,記得返回這個地方,重新抓取新的資訊,大致流程就是這樣。

參考資料和引用文獻

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:7,800+ 人 (持續增加之中)

中文語系的 WordPress - Facebook 社團列表

在〈[2022 年] 如何解決 FB 臉書分享連結貼文時,縮圖預覽無法正確顯示的問題?〉中有 4 則留言

  1. 感謝分享,利用debug工具後,我的連結預覽無誤,將連結貼在貼文裡的預覽也正確,但是按下發佈之後,精選圖片還是沒出現,不知道是何原故?
    另外,網站好美,謝謝您的分享

    回覆
    • 您好,請問您有使用 WordPress 相關的 SEO 外掛嗎?例如 Yoast SEO 或 Rank Math 等等,在那邊的設定也可能影響您在社交媒體的顯示狀況。如果你不介意可以把連結貼在這裡,替你查看一下相關問題,謝謝。

      回覆
  2. 您好
    我也是使用WordPress 無使用其他外掛
    想請問連結預覽的地方是有出現我需要的圖片
    但是在fb發文後就是顯示logo的圖檔
    想請問知道是什麼原因嗎?
    謝謝你~

    回覆

發表您的留言