技術筆記

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

time square(如何設定臉書分享呈現圖片)

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

FB連結縮圖1(如何設定臉書分享呈現圖片)

這區塊包含了三個部分:

縮圖、標題、網頁描述。

 

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

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

 

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

<!-- og -->
<meta property="og:title" content="【財經雷Look】歷史巧合正在重演?! 我們即將面對的經濟局勢 | 部落格 | MacroMicro 財經M平方">
<meta property="og:type" content="website">
<meta property="og:site_name" content="MacroMicro 財經M平方">
<meta property="og:url" content="https://www.macromicro.me/blog/cai-jing-lei-look-zhe-ci-jiu-shi-ya-zhou-jin-rong-feng-bao-fan-ban">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://cdn.macromicro.me/blog/2015/08/mf_pay47__01__630x420.jpg">
<meta property="og:description" content="致力於整合全球總經數據,試圖發覺景氣循環的蛛絲馬跡,相信所有金融商品的投資決策都應回歸基本面。期待協助大家找到屬於自己的投資地圖!">

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

 

根據 Facebook for developers 內的說明文件

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

像素圖片就會縮小顯示,
FB連結縮圖(sm)(如何設定臉書分享呈現圖片)

 

 

 

 

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

 

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

FB連結縮圖(多張)(如何設定臉書分享呈現圖片)

 

 

 

 

 

 

 

 

 

 

可以自己設定多個 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" />

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

可能是因為這些原因:

 

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

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

FB偵錯工具(如何設定臉書分享呈現圖片)

 

 

 

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

 

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 喔。

 

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

 

 

 

 

易歐思創意 的個人頭像

易歐思創意

易歐思創意 數位轉單顧問

看 易歐思創意 的所有文章 →
回文章列表