當你把一個連結粘進訊息、推文、領英帖或 Slack 頻道，平台會拉出一張預覽卡——一張大圖、一個標題、一段摘要。那張圖就是 Open Graph（OG）圖，它乾的活比你的標題還多。在飛快下滑的資訊流裡，停住拇指的是圖片。一張空白或壞掉的預覽，讀起來就像敷衍，會被划走。
下面講怎麼做一張能換來點選的圖——尺寸對、文字真讀得清。
尺寸：1200×630
標準的 OG 圖是 1200×630 畫素，比例 1.91:1。Facebook、領英、Slack、Discord 和大多數連結預覽系統都是圍著它建的。這一個做對，幾乎哪兒都覆蓋到了。
根據連結落在哪兒，還會遇到幾個相關尺寸：
| 平台 / 用途 | 尺寸 | 比例 |
|---|---|---|
| Open Graph（預設） | 1200×630 | 1.91:1 |
| Twitter/X 大卡 | 1200×628 | 約 1.91:1 |
| YouTube 縮圖 | 1280×720 | 16:9 |
| 正方形（資訊流/IG） | 1080×1080 | 1:1 |
| 豎版故事 | 1080×1920 | 9:16 |
給一篇部落格做的話，你不需要這些全部——1200×630 是主力。但如果你還要做影片縮圖或方形社交圖，直接生成對的形狀，比把一張圖硬裁著湊數要好。
文字規則：縮圖尺寸下也讀得清
毀掉 OG 圖的錯誤，是把它當成一張要全屏看的海報。你不會全屏看。多數人看到這張卡時，大概只有真實尺寸的三分之一，在手機上、下滑途中。要為那個場景來設計。
- 字大、字少。 一個短標題——五到八個字——縮小後也讀得清。如果全尺寸下還得眯眼看，到資訊流裡就是看不清。
- 強對比。 深色或高飽和背景上的淺色字，或反過來。壓在雜亂照片上、沒有底襯的文字會消失。
- 重要的東西放中間。 不同平台對邊緣的裁切略有差別。讓文字和 logo 遠離外側邊距，就沒什麼會被切掉。
- 一圖一個意思。 OG 圖是鉤子，不是摘要。標題，也許加個副標題，夠了。
讓文字跳出來的背景
一塊平滑漸層是可靠之選。它給文字一個乾淨的落腳處，看著現代，也不會像雜亂照片那樣跟文字打架。深色到略深的漸層配淺色字，幾乎穩贏。
OG 圖工具正是圍著這個建的：選一個尺寸預設（OG 1200×630、Twitter、YouTube、正方形或故事），選一個漸層背景，加上你的標題和副標題。你得到一張任何尺寸下都讀得清的分享卡，不用開啟一個完整的設計軟體。
讓它顯示出來的 HTML
做出圖片只是一半的活。平台得知道去哪兒找它。把這些標籤加到頁面的 <head> 裡：
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="你的標題">
<meta property="og:description" content="一句清楚的話。">
<meta name="twitter:card" content="summary_large_image">
把 twitter:card 設成 summary_large_image，才能在 X 上得到大卡而不是一張小縮圖。絕對 URL（帶 https://）很重要——抓取器來取你頁面時，相對路徑常常解析不出來。
部署後，測一測。把你的 URL 粘進平台的連結預覽偵錯程式（Facebook 的 Sharing Debugger、領英的 Post Inspector），確認圖片能載入，並清掉任何快取的舊版本。平台對預覽快取很積極，所以如果你更新了圖片卻還看到舊的，偵錯程式的重新抓取按鈕就是解法。
做出來，而不是傳上去
整件事在你的瀏覽器裡執行——圖片用 Canvas 在本地合成，從不上傳到伺服器。它免費、無需註冊、不會在你的分享卡上蓋浮水印，第一次訪問後也能離線用。生成 1200×630、接好 meta 標籤、過一次偵錯程式，你的連結就開始扛起它該扛的分量了。