Facebook og:image 該注意地方

前言

在這次的專案中,也有針對 Facebook 進行了 Open graph (OG)的優化,那這次的優化只算是基本的,就是把網站上的摘要、標題、圖片……等加上去而已,之前因為曾經弄過這部分,所以想說應該沒什麼問題,但這次就真的踩到雷了……。


基本上要弄 OG 也不困難,只要在 HTML 裡面的 head 加上一些程式碼就可以了,像是:

<head>
    <meta name="og:url" content="site_url" />
<meta name="og:image" content="site_image" />
<meta name="og:description" content="site_description" />
<meta name="og:title" content="site_title" />
<meta name="og:site_name" content="site_name" />
<meta name="og:type" content="type" />
</head>

這樣就可以把網頁的一些基本的介紹加上去,但如果是下列的情況:

  1. 一些原本就有上線的網站
  2. 之前有做 OG 之後想更新

可能會發現更新後,使用者在 Facebook 上分享出去的網頁,還是舊的標題或圖片,那其實這部分是因為 Facebook 在處理 OG 時,會先把抓取到的資料快取,等快取期限過後才會再次抓取新資料,因此才會有這種情況。

這種情況下就可以使用 Facebook sharing debugger 來幫助我們。


Facebook sharing debugger

Facebook sharing debugger 可以協助我們查看分享頁面時 OG 的屬性,那前面有提到說 Facebook 會快取網頁的 OG 的資料,在 Facebook sharing debugger 可以強制 Facebook 再次抓取 OG 的資料,因此更新網站的 OG 後,務必來這強迫 Facebook 抓取新的屬性。


Facebook sharing debugger

使用上也相當容易,只需把網頁的網址丟進 Facebook sharing debugger 按下 除錯 後,就可以查看網頁現在的 OG 屬性了。


Facebook sharing debugger 除錯畫面

或是可以按下 Scrape Again 強迫再次抓取 OG 屬性。


那這次在實作上發生的問題是在 OG 的 image 這個屬性, 網站上的圖片可以正常的顯示,在 Facebook sharing debugger 上也有正確到抓取到圖片的網址,但是 Facebook 就是不使用設定好的 OG image 這個屬性,那後來 Google 後翻到 Facebook 在 developer 文件裡面的 Best practices 才知道問題出在 圖片尺寸太小 ,這時候不得不吐槽 Facebook sharing debugger 上居然沒寫錯誤訊息,真是……。


總結

在 OG image 這個屬性有幾個重點:

  1. 圖片的尺寸必須大於 200*200 px
  2. 圖片長寬比最好為 1.91:1
  3. 更新 OG 屬性後,務必使用 Facebook sharing debugger 查看結果是否正確

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.