從 URL 讀取真實 Open Graph 數據
你可以先通過 API Request 獲取頁面 title、description、site name 和 og image，再讓 AI 基於真實頁面上下文生成方向。
工具任務
OG Image Generator
为产品发布、博客文章和社媒分享快速制作可发布的视觉素材。输入页面 URL 或 brief，让 AI 给出标题、摘要、配色和模板方向，再在右侧预览并导出图片。
AI 生成、編輯並導出社媒圖片
左側輸入 URL、brief、尺寸和模板，右側實時預覽。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。
What You Get
你可以得到什麼
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 寫回失敗時，頁面會顯示具體狀態而不是假結果。
Community
哪些用戶正在使用 Tomako.ai
這裡預留給外鏈、案例和客戶 Logo。等有真實客戶或公開案例後，可以放產品團隊、內容創作者、獨立開發者和營銷團隊的使用入口。
Product teams
Indie builders
Content teams
Launch pages
Marketing sites
Creator blogs