在上线前，先看清你的 og:title、og:image、twitter:card 在 Google、X、Facebook、LinkedIn、Slack、Discord 上分别长什么样。
- 本地处理
- 分类 生成器
- 适合 从空白开始,先拿到一版可修改的结果。
0 字符 (≤60)
0 字符 (≤110)
推荐 1200×630（1.91:1）
<meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image">
一切都在你的浏览器里运行。标题、描述、URL 只会编码进可分享的链接，不会发到任何服务器。og:image 是你的浏览器直接拉取用于预览，这个请求发往图片所在的服务器，不经过我们。
这个工具能做什么
一个完全在浏览器里运行的 Open Graph 社交分享卡片预览器。填入 `og:title`、 `og:description`、`og:image` 图片地址、`og:url`、`og:site_name`，再选一个 `twitter:card` 类型，六张预览卡片就实时更新 —— Google 搜索结果摘要、 X/Twitter 的 `summary_large_image` 大图卡、Facebook 分享、LinkedIn 帖子、 Slack 展开预览、Discord 嵌入。每张卡片都按对应平台真实的截断长度渲染： 一个 92 字符的标题在 Discord 上完整显示，到了 Google 和 Facebook 就会被 省略号截断；图片也按这些网络实际裁剪的 1.91:1 比例呈现。每个输入框下方的 字符计数会在标题或描述超过最严格的那条上限时立刻变红提示。当文案在每个 平台上都顺眼了，一键即可复制一整段 `<meta property="og:...">` 加 `<meta name="twitter:...">` 标签，直接粘进你的 `<head>`。整个工具纯前端 运行：你输入的内容不会被上传，唯一离开本机的只有浏览器为预览而发出的 og:image 图片请求，你的文案只会随你主动复制的分享链接传播。
工具细节
- 输入
- 文本
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 18 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 生成器 · 营销人
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Open Graph 社交卡片预览 适合怎么用
适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。
适合生成任务
- 从空白开始,先拿到一版可修改的结果。
- 生成可重复使用的草稿、名称、模板或占位素材。
- 先探索多个选项,再挑最适合当前任务的。
生成检查项
- 生成内容发给客户、上页面或进文档前,必须人工看过。
- 有品牌语气、格式或受众要求时,不要沿用默认值。
- 只保留真正符合任务的部分。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
别让发布推文把核心卖点截断了
你正要在 X 上发布一款产品，标题就是整段卖点。把标题填进 og:title， 盯着 X 的 summary_large_image 卡片：78 字符时正好在关键词前被截断。 删到 68，计数从粉色变回灰色，卡片就显示出完整一行。复制 meta 代码块 粘到落地页 head，分享出去就是精心设计的样子，而不是在你发布受众最集中 的那个平台上被砍掉一截。
在设计 og:image 之前先把裁剪定下来
设计师问你"OG 图要多大、安全区在哪？"先放一张占位的 1200×630 地址进 og:image，把 Facebook、LinkedIn、Discord 三张卡片并排看 —— 都按 1.91:1 裁剪，所以更高的源图顶部或底部 5% 里的任何文字都会被切掉。 把这三张预览截图放进设计简报。设计师就会把 logo 和标题留在可见带内， 而不是凭感觉做、再返工导出两遍。
让在 Slack 里分享的内部文档真正漂亮地展开
团队 wiki 页面在 Slack 里老是展开成一条光秃秃的蓝色链接，没有任何 上下文。填好 og:title、og:description、og:site_name，看带左侧色条的 Slack 预览卡片，把描述调到 Slack 的 140 字符上限以内，让展开像一段 真正的摘要。把生成的标签粘进页面模板；下次有人在频道里贴这条链接， 就会展开成有标题有描述、大家真会去点的卡片。
内容发布前一遍过完所有社交平台的 QA
发布一篇长文前，把最终的标题、描述、主图一次性填进去，从上到下扫一遍 六张卡片：Google 摘要看搜索点击率，X 和 Facebook 看付费/自然社交， LinkedIn 看 B2B 受众，Slack 和 Discord 看社区分享。一屏就能告诉你 同一套文案是否各平台通吃，还是要给最严的那个平台准备一个更短的标题 版本 —— 不用在五个独立校验器之间来回切。
交给开发的是可直接粘贴的标签，而不是一份说明
市场定好了文案，现在开发需要标签。与其写一张用文字描述 og:title 和 twitter:card 的工单，不如把表单填好，复制完整 meta 代码块，放进交接 文档。开发原样粘进 head —— og:type 和 twitter:card 已经包含在内，卡片 能正常渲染 —— 不会再为用哪个属性名、哪种卡片类型来回确认。
常见踩坑
用相对路径的 og:image，比如 `/og.png`。爬虫是从独立服务器抓取 og:image 的，没有页面上下文，相对地址会解析成空。一定要用绝对的 `https://` 地址 —— 本工具的预览也只加载绝对图片地址，这样能立刻暴露这个问题。
想要大横幅却选了 twitter:card `summary`。`summary` 在文字旁渲染一张小方形缩略图，而不是占满宽度的 1.91:1 大图。如果预览里出现的是一张挤巴巴的方形裁剪，把卡片类型切到 `summary_large_image`。
写了一个很长的标题，因为它在 Discord 上放得下就以为没事。LinkedIn 能容 119 字符但完全不显示描述，Google 约 60 字符就截断。要看的是最严平台的计数，而不是恰好能完整显示你文案的那张卡片。
隐私说明
每一张预览都是浏览器标签页里的纯 JavaScript 渲染的 —— 你输入的标题、 描述、URL、站点名都不会被上传。唯一的网络请求是浏览器去拉取 og:image 地址以便画出卡片，这个请求直接发往图片所在的服务器，不经过 Toolora， 我们也看不到。你的输入还会被编码进分享链接的 query string，所以如果你 复制并发送一个"分享预览"链接，收到的人 —— 以及任何记录这条 URL 的服务器 —— 都能读到这些值。对外营销文案这是预期行为；对禁运期或未公布的文案， 请复制生成的 meta 标签，而不是分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。