--- tags: HTML --- # HTML｜連結預覽縮圖｜Open Graph｜如何設置｜圖片大小建議｜如何清除 LINE 服務器端緩存 ## 什麼事 Open Graph？ 官方中文翻譯：開放社交關係圖標記 是由 Facebook 提出的設定，目標是讓網頁在社交媒體呈現時，能有較豐富的內容展示，如縮圖、標題、描述等。 Facebook 官方資料：[給網站管理員的分享功能指南](https://developers.facebook.com/docs/sharing/webmasters#markup) ![](https://i.imgur.com/9iGdoFG.png) --- ## 如何設置於 HTML 之中? 將程式碼放置於 HTML 的 <head> 標籤之中 這邊我們直接參考 W3school 的網站程式碼作為範例 ![](https://i.imgur.com/ko5xFZB.png) ``` <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=""> ``` --- ## 圖片大小 臉書官方資料： * 最小的可允許圖像尺寸為 200 x 200 像素。 * 圖像檔案的大小不可超過 8 MB。 * 請對高解析度裝置使用至少 1200 x 630 像素的圖像以獲得最佳顯示。您應至少使用 600 x 315 像素的圖像來顯示具有較大圖像的連結粉絲專頁貼文。 #### 最佳建議尺寸： > 請儘可能將圖像的長寬比維持在接近 1.91:1，以在動態消息中顯示完整圖像而不需任何裁剪。 製作圖案時需考慮到兩種剪裁： * 長方形 * 正方形 因此盡量將重要具有「特色」或「意涵」的畫面至於中間。 這裡參考 W3school 的官網圖樣範例尺寸 影像尺寸：436px * 228px ![](https://i.imgur.com/wWcKsgF.png) ![](https://i.imgur.com/zrkbXFa.png) --- ### 清除 line 伺服器緩存： https://poker.line.naver.jp/ > 1. 輸入 Input URL: (你要刪除緩存的得連結) > 2. Language「 Chinese-Taiwan 」 > 3. - [x] 勾選Clear Cache > 4. Submit > 5. 完成 ![](https://i.imgur.com/qOZjl7d.png) --- 參考資料： * [Open Graph 介紹：讓網站在社群上被漂亮分享，就靠 OG 標籤！](https://frankchiu.io/seo-open-graph/) * [聊天和時間線上的 URL 預覽是如何生成的｜LINE Developers](https://developers.line.biz/en/faq/tags/media/#how-are-the-url-previews-generated) * [Line的URL分享預覽 依然是OG中繼標籤](https://medium.com/9ing/line的分享url預覽-還是og中繼標籤-31b45a82a891)