當您的內容在社交媒體上分享時,Open Graph 圖片會被顯示。推薦尺寸為 1200×630 像素(1.91:1 寬高比)。
拖放圖片到此處,或點擊選擇文件
支持 PNG、JPG、JPEG 和 WebP 格式
使用指南
輸入格式
在輸入框中輸入您的 JSON 資料。您可以直接貼上、上傳檔案或使用範例資料按鈕開始。
可用設定
- 標題文字 - 圖片的主要標題
- 描述文字 - 標題下方的輔助文字
- 顏色主題 - 選擇明亮、暗色或漸變主題
- 字體系列 - 選擇無襯線、襯線或等寬字體
- 佈局樣式 - 標題和描述的不同排列方式
生成的圖片尺寸
生成的圖片尺寸為 1200x630 像素,這是 Open Graph 圖片的推薦尺寸。
生成的圖片
進行更改時實時預覽您的圖片,對結果滿意後即可下載。
社交圖片尺寸
Open Graph 圖片的標準尺寸是 1200 × 630 像素,長寬比 1.91:1。Facebook、LinkedIn 和 Slack 都按這個比例裁切。大部分平台都接受這一張圖,但少數平台使用自己的比例,因此在只準備一張素材之前,值得先了解差異在哪裡。
| 平台 | 建議尺寸 | 長寬比 | 說明 |
|---|---|---|---|
| Open Graph (Facebook, LinkedIn, Slack) | 1200 × 630 | 1.91:1 | 最穩妥的預設值。一張 1200 × 630 的圖片即可涵蓋 Facebook、LinkedIn 和 Slack 的連結預覽。 |
| X — summary_large_image | 1200 × 628 | 1.91:1 | 當頁面宣告 twitter:card 為 summary_large_image 時使用。與 Open Graph 幾乎一致,同一個檔案即可通用。 |
| X — summary | 1200 × 1200 | 1:1 | 小尺寸方形卡片。當頁面未宣告大圖卡片時,X 會回退到這種樣式。 |
| 1000 × 1500 | 2:3 | 本身就是直向。1.91:1 的圖片在這裡會出現大量留白,如果重視 Pinterest,請另外製作素材。 | |
| 400 × 400 | 1:1 | 縮圖會被裁成正方形。請把重要內容放在中間,否則會被裁走。 |
限制與注意事項
- 檔案請控制在 5 MB 以內。Facebook 最大支援 8 MB,但 X 會拒絕超過 5 MB 的圖片。
- 請使用 PNG 或 JPG。所有主流爬蟲都不支援 SVG,WebP 的支援情況亦不一致。
- 文字請保持在畫面中央 80% 的範圍內。不同平台對邊緣的裁切幅度並不相同。
- 不要放大至超過 1200 × 630。平台顯示時會縮小圖片,檔案過大只會拖慢首次預覽的載入。
功能特點
可用功能
- 完整文字自定義
- 多種顏色主題
- 多種字體選項
- 不同佈局樣式
- 實時預覽
- 高品質圖片下載
疑難排解
大部分 Open Graph 問題源於快取或連結,而不是圖片本身。
預覽仍然顯示舊圖片
各平台的快取都很積極。可以用 Facebook 分享偵錯工具、X Card Validator 或 LinkedIn Post Inspector 強制重新抓取。更換圖片 URL 同樣有效。
完全不顯示圖片
og:image 必須是包含通訊協定和網域的絕對 URL。像 /og.png 這樣的相對路徑會被所有爬蟲忽略。
瀏覽器能開啟,但分享時不顯示
請檢查圖片是否位於登入驗證、付費牆或 robots.txt 規則之後。爬蟲是以匿名身分擷取圖片的。
卡片顯示偏小,或稍後才重新排版
請宣告 og:image:width 和 og:image:height。缺少這兩項時,平台必須先下載圖片才能決定卡片尺寸。
只在某一個平台上顯示空白或損毀
請重新匯出為 PNG 或 JPG。WebP 和 AVIF 的支援仍然參差,動態格式則從不用於預覽。
技巧和最佳實踐
使用技巧
- 保持標題簡潔、描述簡短以提高可讀性
- 確保文字和背景之間有良好的對比度
- 在社交媒體預覽工具中測試您的圖片
- 保持推薦的 1200x630 像素尺寸
- 考慮圖片在不同平台上的顯示效果
注意:生成器會創建針對社交媒體分享優化的圖片。請在不同平台上測試您的圖片以確保正確顯示。