从 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