在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 像素了,卻還是顯示小圖,
可能是因為這些原因:
這時候可以使用Facebook的分享偵錯工具,在網頁內容更正之後,輸入網址點選再次抓取,
就可以抓到新設定的圖片了。
圖片最大不能超過 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 喔。
就是這麼簡單,下次記得正確的控制臉書上出現的分享資訊,肯定可以吸引更多的讀者點擊前往網站喔~