分享網址到Facebook上時,Facebook會去讀取該網址所連到的網頁,並產生出標題、描述、縮圖等預覽訊息。然而,許多人在張貼網址到Facebook上時,常會遇到網頁圖片或是縮圖出不來的情形,然後就認為是Facebook出BUG了,才沒有成功抓到圖片。有些不在意的人覺得網頁圖片出不來就算了,但有些人則會嘗試使用Facebook提供的偵錯工具來不斷地嘗試重新取得網頁圖片,直到圖片正常出現為止。事實上,把網址貼到Facebook上後,發生網頁圖片或縮圖出不來的情形幾乎都是該網頁的「Open Graph」協定設定有誤的緣故,若是「Open Graph」協定有設定正確,該網頁的網址只要一貼上Facebook,即可顯示出正確的圖片。



如下圖,網頁有設定正確的Open Graph協定,將其網址貼到Facebook上後,就會正常地顯示出網頁的相關資訊。

facebook-thumbnail

Open Graph協定是Facebook所制定的META標籤格式,寫在HTML中的HEAD標籤內,目的在於讓Facebook能夠快速取得這頁HTML網頁的基本重要資訊,如標題、描述、圖片等等。Open Graph縮寫為og,一般我們也會直接以「og」來稱呼它,Open Graph的相關META標籤欄位名稱也都是以og:作為開頭。有關於Open Graph協定的用法,Facebook官方有提供還算詳細的文件,網址如下:

簡單來說,有四個主要的Open Graph協定欄位會影響網頁圖片的顯示:

  1. og:url:網頁的canonical網址,一般來說就是用網頁瀏覽器瀏覽網頁時,顯示在網址列上的網址。
  2. og:image:網頁圖片的網址。
  3. og:image:width:網頁圖片的寬度,單位是像素。
  4. og:image:height:網頁圖片的高度,單位是像素。

如果沒有在META標籤提供圖片的尺寸資訊,Facebook雖然還是可以取得正確的網頁圖片,但是在第一次讀取網址的時候,圖片通常會無法顯示出來。以本篇文章來舉例,Open Graph協定的圖片相關設定如下:

<meta property="og:url" content="https://magiclen.org/facebook-thumbnail"/>
<meta property="og:image" content="https://magiclen.org/wp-content/uploads/2018/10/shot-01.png"/>
<meta property="og:image:width" content="612"/>
<meta property="og:image:height" content="689"/>

要被拿來填進og:image欄位的圖片,其尺寸必須要大於200x200,建議的長寬高比是1.91:1,且顯示出來的圖片尺寸不會超過1200x630(超過的話會被等比例縮圖)。筆者偏好使用1:1的圖片,Facebook會在需要使用1.91:1尺寸的圖片時,自動裁切1:1圖片的中央部份,用起來比較方便一點。示意圖如下:

facebook-thumbnail

學會正確設定「og」之後,就不用很蠢地一直去刷Facebook提供的偵錯工具,或是還去用第三方的轉址服務了!