OG Image 圖片產生器
在瀏覽器中製作並下載 OG 圖片,以提升社群分享點擊率。
支援 1200x630px、豐富的模板與高質感字體。
📚 模板
💾 輸出與下載
🏷️ OGP Meta 標籤產生器
OG Image 圖片產生器簡介
OG 圖片 (Open Graph Image) 是當網頁被分享到社群媒體 (如 X/Twitter、Facebook、LINE 等) 時顯示的預覽縮圖。一張吸引人的 OG 圖片是大幅提升點擊率 (CTR) 的關鍵要素。
這個工具讓您能夠直接在瀏覽器中,免費且免註冊地製作高質感的專業 OG 圖片。它提供豐富的模板、靈活的漸層背景產生器以及進階的字體設定功能。
所有的圖片生成與輸出處理都在您的瀏覽器本地端完成,確保您能安全無虞地進行設計製作。
如何使用本工具
選擇一個模板
從科技、部落格或行銷等類別中挑選一個基礎設計。您也可以完全從零開始客製化。
客製化設計
調整標題文字、背景漸層、顏色、Logo 圖片與裝飾徽章,並隨時透過 SNS 預覽功能確認效果。
儲存與設定 Meta 標籤
將圖片下載為 PNG 或 WebP 格式。接著可以在工具底部產生 HTML OGP meta 標籤,然後將其加到您的網站上。
OGP 與圖片相關名詞解釋
- OGP (Open Graph Protocol)
- 最初由 Facebook 引入的元資料標準,用於定義網頁在社群媒體上分享時的顯示資訊 (標題、圖片、描述)。正確設定能大幅提升網頁的曝光與點擊率。
- Twitter Card (summary_large_image)
- X (Twitter) 專用的 meta 標籤。透過指定 `summary_large_image`,您的連結在時間軸上會以附帶大型圖片的卡片形式顯示,更容易吸引使用者的目光。
- 長寬比 1.91:1
- OG 圖片的標準長寬比,通常建議使用 1200x630px 的解析度。遵循這個比例能確保您的圖片在各大平台上都不會被奇怪地裁切。
- 設備像素比 (Device Pixel Ratio, DPR)
- 表示設備用多少個物理像素來渲染 1 個 CSS 像素的數值。本工具會進行最佳化的 Canvas 縮放渲染,確保在 Retina 等高 DPR 螢幕上文字依然保持銳利。
常見問題
- Q.OG 圖片的建議尺寸是多少?
- 1200x630px (長寬比 1.91:1) 是業界標準。這是 Facebook、X (Twitter)、LINE 和 LinkedIn 等平台上顯示效果最佳的解析度。
- Q.做好的圖片要如何設定在我的網站上?
- 將下載的圖片上傳到您的伺服器 (例如 WordPress 媒體庫或 AWS S3),然後將其網址指定到您頁面 `<head>` 區塊內的 `<meta property="og:image" content="...">` 標籤中。
- Q.我的資料或圖片會被儲存在伺服器上嗎?
- 不會。包含輸入的文字、上傳的 Logo 以及生成的 OG 圖片在內,所有的處理都完全在您的瀏覽器本地端進行,不會有任何資料外洩到外部伺服器。
- Q.什麼是 X (Twitter) 的 Summary Large Image?
- 這是一種在分享連結時,會顯示大型圖片卡片的格式。您可以透過將 twitter:card 設定為 summary_large_image 來啟用它。
- Q.我應該選擇下載 JPEG、PNG 還是 WebP?
- 如果是照片背景,JPEG 最為合適。如果是插畫或文字較多的圖片,建議使用 PNG 以保持銳利度。而 WebP 則是現代化且檔案較小的格式。
使用場景
部落格文章縮圖
放上您的文章標題和分類徽章,快速製作出能在時間軸上吸引目光的 OG 圖片。
電商產品分享
準備帶有產品名稱和品牌 Logo 的圖片,引導社群流量並促進轉換。
活動與線上研討會公告
一張包含日期、時間和講者資訊的視覺化 OG 圖片,能有力地推動報名。
作品集與實績展示
用包含專案名稱、個人照片及職稱的專業圖片來提升您的可信度。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.