從 URL 讀取真實 Open Graph 數據
你可以先通過 API Request 獲取頁面 title、description、site name 和 og image，再讓 AI 基於真實頁面上下文生成方向。
工具任務
OG Image Generator
为产品发布、博客文章或链接分享制作预览图。输入页面 URL 或 brief，审阅文案和布局建议后，再预览并下载最终文件。
從 URL 或 brief 製作 OG 圖片
左側輸入 URL、brief、尺寸和模板，右側實時預覽。AI 建議寫回後仍可手動調整，再下載 PNG、JPEG 或 WebP。
AI + PNG / JPEG / WebP
Why Tomako
為什麼用 Tomako 創建 OG images
AI 只負責創意方向，文件導出更穩定
AI 返回標題、摘要、模板和配色建議；最終圖片由瀏覽器 Canvas 精確渲染，避免生成結果不可控或無法下載。
同一 brief 覆蓋多個渠道
Open Graph、Twitter/X Header 和 Blog Featured image 使用同一套文案與品牌系統，減少重複設計工作。
Implementation
生成後的 OG 素材如何引用
下載圖片後，把文件上傳到你的 public 目錄、CMS 或對象存儲，再在頁面 metadata 中引用絕對 URL。社媒平臺經常緩存預覽圖，發佈後需要用對應平臺的調試工具刷新緩存。
HTML
適合普通靜態頁、官網落地頁或任何服務端模板。
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short preview summary." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />Next.js App Router
適合 Next.js 13+ 的 metadata API。圖片 URL 建議使用絕對地址。
export const metadata = {
openGraph: {
title: "Your page title",
description: "A short preview summary.",
images: ["https://example.com/og-image.png"],
},
twitter: {
card: "summary_large_image",
images: ["https://example.com/og-image.png"],
},
};Nuxt
適合 Nuxt 3 頁面或 layout，通過 useSeoMeta 寫入 OG 和 X/Twitter metadata。
useSeoMeta({
ogTitle: "Your page title",
ogDescription: "A short preview summary.",
ogImage: "https://example.com/og-image.png",
twitterCard: "summary_large_image",
twitterImage: "https://example.com/og-image.png",
});Vue
普通 Vue 項目可以配合 head 管理庫，或由服務端模板輸出這些 meta 標籤。
useHead({
meta: [
{ property: "og:title", content: "Your page title" },
{ property: "og:image", content: "https://example.com/og-image.png" },
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:image", content: "https://example.com/og-image.png" },
],
});More Tips
發佈前多檢查這幾件事
把關鍵信息放在中心安全區
X Header 和部分 CMS 縮略圖會裁切邊緣。標題、品牌名和主要圖形不要貼邊。
一個畫面只保留一個重點
社媒預覽圖不是海報詳情頁。標題越短、對比越清楚，鏈接預覽越容易被點擊。
優先用 PNG 做最終質量檢查
PNG 更適合銳利文字和 UI 感圖形；確認效果後，如果發佈系統需要更小文件，再導出 JPEG 或 WebP。
輸出與可編輯項
你可以審閱和下載什麼
Open Graph 圖片
1200 x 630 鏈接預覽圖，可用於官網、產品頁、發佈頁和社媒分享卡片。
Twitter/X Header 圖片
1500 x 500 賬號頭圖或活動頭圖，適合產品發佈、活動階段和個人品牌。
Blog Featured 圖片
1600 x 900 文章封面，適合博客、Newsletter、內容中心和 CMS 縮略圖。
可編輯 AI 建議
AI 返回多個標題、摘要、模板和配色方向，你可以選擇後繼續手動編輯。
可下載文件
生成 PNG、JPEG 或 WebP 文件，便於上傳到 public 目錄、CMS、對象存儲或社媒後臺。
失敗邊界提示
URL 無法訪問、OG 數據缺失或 AI 寫回失敗時，頁面會顯示具體狀態而不是假結果。
常見問題
什麼是 OG 圖片？
OG 圖片是分享網頁連結時，Slack、LinkedIn、Facebook 和 X 等平臺可能展示的預覽圖。你仍需在網站的 Open Graph 或 Twitter Card 標籤中填寫該圖片的公開絕對 URL。
什麼是 X Header 圖片？
X Header 圖片是 X 個人資料頂部的橫幅，與網頁連結分享時的 OG 預覽圖不同。匯出前請確認選擇了正確的畫布尺寸。
什麼是 Blog Featured 圖片？
Blog Featured 圖片是 CMS、文章列表或 newsletter 使用的文章封面。它可以重用 OG 圖片的核心資訊，但裁切和排版要求可能不同。
什麼是 AI 建議？
AI 會提供可編輯的文案、配色、模板和版面方向。請在發佈前檢查最終文案、對比度和品牌使用是否合適。
什麼是可下載文件？
可下載 PNG、JPEG 或 WebP。將檔案上傳到 CMS、public 目錄或圖片託管服務後，再把它的公開絕對 URL 配置到頁面 metadata 中。
什麼是失敗邊界提示？
本工具不提供永久公開圖片 URL，也不會自動把 Open Graph 標籤發佈到你的網站。URL 讀取和 AI 建議也可能失敗，因此請檢查預覽並自行發佈最終檔案。