-
#leo.hsu
- Apr 4
- HTML
在Facebook分享網址連結時，會在下方自動生成網頁摘要，
這區塊包含了三個部分:
縮圖、標題、網頁描述。
部落格文章、新聞的瀏覽率，很大程度來自網路社群的轉貼和分享。
封面圖片是吸引讀者點閱的關鍵，下面讓我來告訴你如何正確的設定圖片顯示格式。
以截圖的分享文章為例，下面是該網頁的 og 標籤的程式碼
|
1 2 3 4 5 6 7 8 9 |
<!-- 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
像素圖片就會縮小顯示，
如果使用 200×200 像素以下的圖片，Facebook會抓不到圖喔。
如果需要多張圖片可供讀者切換檢視(左上會顯示切換箭頭)，
可以自己設定多個 og:image 標籤，就能讓左上角出現切換的按鈕。
ex:
|
1 2 3 |
<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的分享偵錯工具，在網頁內容更正之後，輸入網址點選再次抓取，
就可以抓到新設定的圖片了。
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 喔。
就是這麼簡單，下次記得正確的控制臉書上出現的分享資訊，肯定可以吸引更多的讀者點擊前往網站喔～