Open Graph 圖片：尺寸、技巧與程式碼範例
Open Graph 圖片決定您在 Facebook、Twitter 或 LinkedIn 分享頁面時顯示的內容。錯誤或缺少圖片會大幅降低點擊率，甚至讓訪客無法進入您的網站。
本指南涵蓋最佳尺寸、設計原則、HTML 實作與測試工具，助您在各大平台打造完美社群預覽。
目錄
什麼是 Open Graph 圖片及其重要性
Open Graph 是 Facebook 推出的協議，讓您掌控網頁在社群分享時的呈現。og:image 標籤指定預覽縮圖的圖片。
當有人在 Facebook、Twitter 或 LinkedIn 分享連結時，平台會擷取 Open Graph 資料並生成預覽卡片。該卡片包含圖片、標題與描述，通常是決定點擊的唯一依據。
精心設計的 Open Graph 圖片能有效提升點擊率。缺圖或尺寸錯誤會導致預覽破損、縮圖裁切或出現不專業的預設圖示。
點擊率
擁有適當尺寸且高對比度的 OG 圖片頁面，表現穩定優於無圖或低質量替代圖。
每次分享帶來更多點擊
品牌識別度
每則分享連結保持一致的視覺識別，有助於在訪客進入頁面前建立熟悉感與信任。
跨平台一致性
SEO 信號
吸引人的預覽促進社群互動，產生反向連結與流量信號，長期強化自然搜尋排名。
間接排名效益
各平台圖片規範
各社群平台有不同的建議尺寸、長寬比與檔案大小限制，符合規範可避免裁切、變形與預設圖示。
| 平台 | 建議尺寸 | 長寬比 | 最大檔案大小 | 格式 |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
通用安全尺寸：1200 × 630 像素
1200 × 630 像素、1.91:1 長寬比的圖片適用於 Facebook、LinkedIn、WhatsApp、Slack 及多數平台。Twitter 使用 16:9 裁切，請將重要內容置中避免被裁切。
有效 Open Graph 圖片的設計原則
圖片在社群動態中呈現為小尺寸，設計時優先考慮縮圖效果，而非全尺寸。
將最重要的視覺元素（如標誌、醒目標題或關鍵插圖）置於圖片中央 80% 範圍內，避免邊緣被裁切。
高對比度
文字、前景與背景需有強烈對比，低對比圖片在熱鬧的社群動態中容易被忽略。
任何尺寸皆清晰可讀
字體清晰度
圖片含文字時，請使用大且粗的字體（至少相當於 36px），且避免超過兩行，縮圖時文字才不會模糊難辨。
縮小時仍保持可讀
品牌一致性
每張 OG 圖片都應包含您的標誌或品牌色彩，即使未被點擊，每次分享都是品牌印象。
每次分享都是品牌接觸點
選擇合適的圖片格式
照片類 OG 圖片建議用 JPEG，含文字、標誌或透明背景的圖形則用 PNG。WebP 支援度提升中，但尚未普及所有社群爬蟲。
| 格式 | 適用於 | 社群支援 | 典型檔案大小 | 建議 |
|---|---|---|---|---|
| JPEG | 照片、漸層 | 通用 | 60 – 150 KB | 照片預設格式 |
| PNG | 文字、標誌、透明背景 | 通用 | 100 – 300 KB | 圖形預設格式 |
| WebP | 兩者皆可，檔案較小 | Twitter、Slack（非全部） | 40 – 120 KB | 僅作補充 |
OG 圖片建議大小為 100–200 KB，越小越好，但勿壓縮過度導致社群動態中像素化。WhatsApp 限制 300 KB，若重視 WhatsApp 分享，請控制在此範圍內。
關於圖片格式的更多取捨，請參考 網站圖片優化指南 。關於現有圖片轉換，請參考 JPG 轉 WebP 指南 ，涵蓋日常工作流程。
HTML 實作與 meta 標籤
將 Open Graph meta 標籤置於 HTML 的 <head> 區塊內。og:image 標籤必須使用絕對 URL，社群爬蟲不支援相對路徑。
最低必須包含 og:title、og:description、og:image 與 og:url 標籤。twitter:card 標籤可啟用 Twitter 大圖卡格式。
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">務必指定 og:image:width 與 og:image:height，否則平台需先下載檢查圖片，導致預覽載入變慢且易出現預設圖示。
如果您使用 Blazor， Blazor SEO metadata 元件 可自動處理所有 Open Graph 標籤，並支援文化識別的 URL。
Open Graph 圖片測試與除錯
社群平台會積極快取 Open Graph 資料。更新標籤或圖片後，請使用官方除錯工具強制重新抓取，確認預覽正確再分享。
Facebook 分享除錯工具
前往 developers.facebook.com/tools/debug 輸入網址，抓取最新資料，查看 Facebook 選用的圖片，並排除驗證警告或錯誤。
強制快取更新
Twitter 卡片驗證器
使用 cards-dev.twitter.com/validator 預覽 Twitter 卡片實際呈現。點擊「Preview card」查看縮圖、標題與描述。
發布前預覽
LinkedIn 貼文檢視器
linkedin.com/post-inspector 是 LinkedIn 的貼文檢視器，可刷新快取並顯示當前 metadata 的貼文預覽。
刷新 LinkedIn 快取
常見錯誤與修正方法
大多數 Open Graph 圖片問題源自少數常見錯誤，了解問題點可節省除錯時間。
- 相對 URL。 社群爬蟲無法解析相對路徑。og:image 必須使用包含協議與網域的完整絕對 URL（例如 https://yourdomain.com/path/image.jpg）。
- 缺少寬度與高度標籤。 若無 og:image:width 與 og:image:height，平台需先下載檢查圖片才能產生預覽，請加上這兩個標籤以避免額外抓取。
- 圖片需驗證才能存取。 爬蟲無法存取需登入或被 robots.txt 阻擋的圖片。OG 圖片必須公開且無需驗證。
- 長寬比錯誤。 長寬比與 1.91:1 差異過大，圖片會被裁切或出現黑邊。發布前務必測試正確比例。
- 平台快取過期。 更新圖片檔案卻未更改檔名或加上查詢字串，平台會繼續使用舊快取。請更改檔名或用平台除錯工具強制刷新。
自動化生成 Open Graph 圖片
對於小型網站與部落格，每頁使用單一靜態 OG 圖片是最簡單且可靠的方式。大型出版物或需每頁獨特預覽的應用則適合動態生成。
動態 OG 圖片生成會根據頁面標題、描述或其他內容，在請求時或建置時產生獨特圖片，無需手動製作，確保每頁預覽獨一無二且符合品牌。
何時自動化
當您有大量頁面需各自獨特圖片、內容頻繁更新，或手動製圖無法應付發佈量時，建議自動化。
大量或動態內容
何時使用靜態圖片
大多數頁面（如登陸頁、指南與長青文章）使用精心設計的靜態圖片，在品質與品牌一致性上優於生成圖片。
品質優先策略
常用動態生成工具包括 Cloudinary（透過 URL 參數轉換）、Vercel OG（在邊緣渲染 React/HTML 為圖片），以及基於 Puppeteer 或 Playwright 的截圖流程，適用各種技術棧。