从 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 建议也可能失败，因此请检查预览并自行发布最终文件。