fbpx
WordPress 黑色星期五活動

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

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

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

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

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

設定 WordPress 精選圖片 (Featured Image)

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

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

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

設定 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 for Developers】,我認為每位站長都應該把這個工具的網址加入您的網頁瀏覽器的書籤(Book Mark)裡,因為真的非常實用,差不多每次撰寫完一篇新的文章,就立即要放上去測試看看,然後才會分發到不同的社交媒體和群組。


引用部分官方的介紹:

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

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

什麼是開放式圖表標記?

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

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

開始使用【分享錯誤測試工具】

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

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

步驟二:按下【除錯 Debug】按鈕

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

實作除錯步驟

步驟一:點擊【再次抓取】

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

步驟二:確認【連結預覽】正確無誤

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

成功,確認預覽正確無誤

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

參考資料和引用文獻

學員人數:5,500+ 人(持續增加之中)

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

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

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

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

      回覆

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術