🎉 我們上線了 Product Hunt!支持我們並給我們反饋
返回

OG 圖片生成器

創建完美的社交媒體分享圖片。支持批量處理、自定義尺寸和裁剪。

使用指南

輸入格式

在輸入框中輸入您的 JSON 資料。您可以直接貼上、上傳檔案或使用範例資料按鈕開始。

可用設定

  • 標題文字 - 圖片的主要標題
  • 描述文字 - 標題下方的輔助文字
  • 顏色主題 - 選擇明亮、暗色或漸變主題
  • 字體系列 - 選擇無襯線、襯線或等寬字體
  • 佈局樣式 - 標題和描述的不同排列方式

生成的圖片尺寸

生成的圖片尺寸為 1200x630 像素,這是 Open Graph 圖片的推薦尺寸。

生成的圖片

進行更改時實時預覽您的圖片,對結果滿意後即可下載。

社交圖片尺寸

Open Graph 圖片的標準尺寸是 1200 × 630 像素,長寬比 1.91:1。Facebook、LinkedIn 和 Slack 都按這個比例裁切。大部分平台都接受這一張圖,但少數平台使用自己的比例,因此在只準備一張素材之前,值得先了解差異在哪裡。

平台建議尺寸長寬比說明
Open Graph (Facebook, LinkedIn, Slack)1200 × 6301.91:1最穩妥的預設值。一張 1200 × 630 的圖片即可涵蓋 Facebook、LinkedIn 和 Slack 的連結預覽。
X — summary_large_image1200 × 6281.91:1當頁面宣告 twitter:card 為 summary_large_image 時使用。與 Open Graph 幾乎一致,同一個檔案即可通用。
X — summary1200 × 12001:1小尺寸方形卡片。當頁面未宣告大圖卡片時,X 會回退到這種樣式。
Pinterest1000 × 15002:3本身就是直向。1.91:1 的圖片在這裡會出現大量留白,如果重視 Pinterest,請另外製作素材。
WhatsApp400 × 4001: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 像素尺寸
  • 考慮圖片在不同平台上的顯示效果

注意:生成器會創建針對社交媒體分享優化的圖片。請在不同平台上測試您的圖片以確保正確顯示。

Rocks Dev Dock 發布了 🥳

在工具內按 '+' 將您喜歡的工具添加到您的 dock。

使用我們的工具時不會收集數據,只是工具。