為什麼臉書連結預覽圖不是文章的第一張圖？

日期：

將文章連結貼到臉書後，連結預覽圖顯示的不是網頁上看到的第一張圖。因為臉書的連結預覽圖取自 og:image 標籤。 

Photo by Wilfred Iven on StockSnap

問題狀況

在臉書上分享一篇來自開放原始碼社群的文章連結。瀏覽網頁時的畫面是：


但是貼到臉書後變成顯示超大張的作者個人照


問題分析

1. 前往 Meta 「分享偵錯工具」(Facebook Sharing Debugger)

2. 貼上 blog 文章連結

3. 「分享偵錯工具」除了顯示「連結預覽」


還有一個區塊「我們根據原始標籤建構出以下開放社交關係圖屬性」


可以看到臉書的連結預覽圖是取自「og:image」標籤，而不是原本預想文章看到的第一張圖。根據臉書的文件「網站管理員分享指南」提到「og:image」標籤：

用戶將內容分享至 Facebook 時顯示的圖像網址。請參閱以下內容取得詳細資訊，並查看我們的最佳作法指南以深入瞭解如何指定高畫質預覽圖像。

如果沒有設定「og:image」標籤，ahrefs 文章「Open Graph Meta Tags」提到

Facebook 會直接拿頁面上「第一張找到的圖片」來當預覽圖，可是那張圖不一定是高畫質的，效果常常不太理想。

建議解決方式

方法1. 設定「og:image」標籤

方法2. 如果使用 WordPress，可以搜尋支援「Open Graph」的外掛，才能設定 blog 文章連結對應的「og:image」標籤


參考資料

  1. 網站管理員分享指南
  2. Open Graph Meta Tags
  3. Open Graph Protocol Framework – WordPress plugin | WordPress.org 
  4. OG — Better Share on Social Media – WordPress plugin | WordPress.org 
  5. Open Graph Images: What Are They and How Do You Set Them? 



留言

張貼留言