Try   HackMD

HTML|連結預覽縮圖|Open Graph|如何設置|圖片大小建議|如何清除 LINE 服務器端緩存

什麼事 Open Graph?

官方中文翻譯:開放社交關係圖標記

是由 Facebook 提出的設定,目標是讓網頁在社交媒體呈現時,能有較豐富的內容展示,如縮圖、標題、描述等。

Facebook 官方資料:給網站管理員的分享功能指南

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


如何設置於 HTML 之中?

將程式碼放置於 HTML 的 <head> 標籤之中

這邊我們直接參考 W3school 的網站程式碼作為範例

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

<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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


清除 line 伺服器緩存:

https://poker.line.naver.jp/

  1. 輸入 Input URL: (你要刪除緩存的得連結)
  2. Language「 Chinese-Taiwan 」
    • 勾選Clear Cache
  3. Submit
  4. 完成

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


參考資料: