歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

 最近工作上遇到一個問題是關於 Facebook 分享文章時的預設圖片

在分享的時候有時候會是小圖,有時候會是大圖

舉個小圖的例子,如下 :

擷取       

 

再來是大圖的例子 :

擷取     

 

這兩個相比,大部分的人都會覺得大圖的效果比較好啊!!

大家都知道要控制 Facebook 文章分享的內容 ex : 縮圖、摘要....等,這些可以在 html meta 裡面設定

請參考之前寫過的這篇 : Facebook 設定分享網頁的標題 + 內文 + 圖片

如以下例子 : 

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head><title>The Rock (1996)</title> 
<meta property="og:title" content="The Rock"/> 
<meta property="og:type" content="movie"/> 
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/> 
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> 
<meta property="og:site_name" content="IMDb"/> 
<meta property="fb:admins" content="USER_ID"/> 
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>
 ... </head> ... 
</html>

透過設定 meta 的屬性為 og:image 就可以自訂分享時的縮圖是哪一張

你也可以設定多個 og:image 標籤,這樣分享時就會有多張圖可以選

ex :

<meta property="og:image" content="http://xxx.xxx.com/1.jpg" />
<meta property="og:image" content="http://xxx.xxx.com/2.jpg" />
<meta property="og:image" content="http://xxx.xxx.com/3.jpg" />

就會像下面有多張圖可選擇

擷取   

 

但是要怎麼像上面一樣控制要出現大圖還是小圖就要看原圖的尺寸了

依照官方的說明 (找好久)

https://developers.facebook.com/docs/sharing/best-practices

 

一、分享文章的縮圖為大圖

如果你分享文章的縮圖要是寬版的大圖的話,那你的圖片至少要大於 600 x 315 px

然後顯示的裝置解析度至少要是 1200 x 630,這樣在上面觀看才會是寬版的縮圖

就如同官網的示範

擷取  

但有時候也會發生 og:image 的圖片已經超過 600 x 315 px 了,但是分享出去的還是小圖....

這個時候可以朝兩個方向來找問題

1. 被 cache 了

Facebook 會 cache URL 的相關 og: 設定 (但我不知道 cache 的時間點),但每隔一段時間就會重抓一次

如果發現分享出去的是小圖,可以到 debug 來重抓一次

https://developers.facebook.com/tools/debug/

輸入網址後按 Fetch new scrape information 就可以重抓一次

擷取     

 debug 中也可以稍微檢視一下,看抓到的 og: 設定有沒有抓對

 擷取  

 

2. 長寬比與圖片大小差異過大

這是今天遇到的問題,同事傳的圖片是 2248 x 3264 ,已經遠遠超過 600 x 315 px 了分享出去還是小圖

遇到這情況首先先檢查一下檔案的 file size,最大圖片大小不能超過 5MB

再來檢查一下圖片的寬高是否太誇張,最大不能超過 1500 x 1500 px

 

3. 如果還是不行,試試看都市傳說

網路上看到有人說可以如此設定

The recommended og:image size for your website is now 1200x627px; Minimum is 560x292px

來源 : Journalists on Facebook

雖然我覺得照官網的做應該80%可以解決

 

 二、分享文章的縮圖為小圖

分享出去的文章縮圖為小圖的原因有幾種,一種是官方說的圖片尺寸小於 600 x 315 px 且大於  200 x 200 px

圖片最小不能低於 200 x 200 px,不然會連圖都抓不到

 

結論 : 

綜合以上可以知道 og:image 設定完後如果要呈現圖片的邏輯如下

圖片尺寸 : 

0 x 0  ~ 199 x 199 =  會抓不到圖

200 x 200 ~ 599 x 314 = 會抓到小圖

600 x 315 ~ 1500 x 1500 = 會抓到大圖

1501 x 1501 ~  以上 = 會抓到小圖

另外圖片檔案容量不可超過 5MB

 

另一個官網提供的小技巧 :

如果你不要每次調整圖片都要 run 一次 debug 重抓一次

可以使用 og:image:width 跟 og:image:height  來直接指定圖片寬高

就會立即呈現在頁面上,請參考

https://developers.facebook.com/docs/sharing/best-practices

2. Use og:image:width and og:image:height Open Graph tags

Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.

 

 

創作者介紹

小雕雕的家

小雕 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • 悄悄話
  • 悄悄話
  • 路過
  • 謝謝分享
  • 不客氣 ^^ 希望有幫到你

    小雕 於 2016/10/04 11:45 回覆

  • 博語媽
  • 不好意思~我還是不大懂~我要去哪裡設定??貼文章的時候才能選擇縮圖??
  • 你要在來源網頁的原始碼加上
    <meta property="og:image" content="圖檔位置"/>
    如果有多個 og:image 就會有多張圖可以選
    至於是大圖還是小圖,就參考這篇文章裡面的尺寸

    小雕 於 2016/12/22 16:36 回覆