如何設定臉書分享呈現圖片,簡單步驟不是工程師也能懂

  • Prototype Hacker Leo Hsu #leo.hsu
  • Apr 4
  • HTML

在Facebook分享網址連結時,會在下方自動生成網頁摘要,

這區塊包含了三個部分:

縮圖、標題、網頁描述。

 

部落格文章、新聞的瀏覽率,很大程度來自網路社群的轉貼和分享。

封面圖片是吸引讀者點閱的關鍵,下面讓我來告訴你如何正確的設定圖片顯示格式。

 

以截圖的分享文章為例,下面是該網頁的 og 標籤的程式碼

og:image 就是顯示圖片的標籤,可以看到這邊圖片還被設定了width及height。

 

根據 Facebook for developers 內的說明文件

我們可以知道使用 1200 x 630 像素的圖片在高解析度的裝置呈現效果最好,使用的圖片小於 600 x 315

像素圖片就會縮小顯示,

 

 

 

 

如果使用 200×200 像素以下的圖片,Facebook會抓不到圖喔。

 

如果需要多張圖片可供讀者切換檢視(左上會顯示切換箭頭),

 

 

 

 

 

 

 

 

 

 

可以自己設定多個 og:image 標籤,就能讓左上角出現切換的按鈕。

ex:

有時候會發現,明明設定要顯示的圖片已經超過 600 x 315 像素了,卻還是顯示小圖,

可能是因為這些原因:

 

1. 之前已經分享過同樣連結,摘要資訊已經被Facebook快取儲存了

這時候可以使用Facebook的分享偵錯工具,在網頁內容更正之後,輸入網址點選再次抓取,

 

 

 

就可以抓到新設定的圖片了。

 

2. 圖片大小或檔案大小過大

圖片最大不能超過 1500x 1500,檔案大小最大不能超過 5MB,不然都會變成小圖。

 

總結:

0 x 0 ~ 199 x 199                 抓不到圖

200 x 200 ~ 599 x 314      小圖

600 x 315 ~ 1500 x 1500  大圖

1501 x 1501 以上                    小圖

記得圖片檔案容量不可超過 5MB 喔。

 

就是這麼簡單,下次記得正確的控制臉書上出現的分享資訊,肯定可以吸引更多的讀者點擊前往網站喔~