官方中文翻譯:開放社交關係圖標記
是由 Facebook 提出的設定,目標是讓網頁在社交媒體呈現時,能有較豐富的內容展示,如縮圖、標題、描述等。
Facebook 官方資料:給網站管理員的分享功能指南
將程式碼放置於 HTML 的 <head> 標籤之中
這邊我們直接參考 W3school 的網站程式碼作為範例
<meta property="og:image" content="https://www.w3schools.com/images/w3schools_logo_436_2.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="436">
<meta property="og:image:height" content="228">
<meta property="og:title" content="W3Schools Free Online Web Tutorials">
<meta property="og:description" content="W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.">
以下整理出空的標籤(供複製取用
<meta property="og:image" content="圖片可使用「絕對路徑」或「相對路徑」">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
臉書官方資料:
請儘可能將圖像的長寬比維持在接近 1.91:1,以在動態消息中顯示完整圖像而不需任何裁剪。
製作圖案時需考慮到兩種剪裁:
因此盡量將重要具有「特色」或「意涵」的畫面至於中間。
這裡參考 W3school 的官網圖樣範例尺寸
影像尺寸:436px * 228px
- 輸入 Input URL: (你要刪除緩存的得連結)
- Language「 Chinese-Taiwan 」
- 勾選Clear Cache
- Submit
- 完成
參考資料: