为 X 生成 twitter:card meta 标签,带实时卡片预览、Open Graph 兜底和一键复制,全程浏览器本地
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
0 字符 (≤70)
0 字符 (≤200)
summary_large_image:1200×628(2:1)· summary:144×144(1:1)
同时写出 og:title / og:description / og:image,供 Facebook、LinkedIn、Slack、Discord 读取。
<meta name="twitter:card" content="summary_large_image">
标签在你的浏览器里生成。字段值只编码进可分享链接,不发往任何服务器。预览会直接从图片所在服务器拉取图片。
这个工具能做什么
免费的 Twitter 卡片生成器,帮你写出 X 需要的 twitter:card meta 标签, 把一条光秃秃的链接变成带图带标题的分享卡片。选好卡片类型 (summary、summary_large_image、app 或 player),填上标题、描述、图片、 你的 @site 与 @creator 账号以及一行 image:alt,工具就生成可直接粘进 页面 head 的标签。它会产出 twitter:card、twitter:title、 twitter:description、twitter:image、twitter:site、twitter:creator 和 twitter:image:alt,留空的字段自动省略,不会留下空标签。打开 Open Graph 开关即可补上 og: 兜底标签(og:title、og:description、 og:image),Facebook、LinkedIn、Slack、Discord 读的都是它,而 X 在缺少 对应 twitter: 标签时也会回退到 og:。实时卡片预览按 X 时间线的样子 呈现大图版和摘要版,标题超 70、描述超 200 时,字数提示会在爬虫之前 先警告你。所有取值都做 HTML 转义,文案里的引号或尖括号绝不会撑破 标签。全程浏览器本地运算,一键复制,字段还会写进可分享链接。
工具细节
- 输入
- 文本
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 营销人
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
推特卡片生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
让博客文章一发推就变成横幅卡片
你发了篇文章,希望分享出去的链接落地成通栏大图,而不是一条裸链。 把卡片设成 summary_large_image,标题填进 twitter:title,一句钩子填进 twitter:description,1200×628 的封面填进 twitter:image,再把你的 @账号填成 creator。把整段复制进文章模板,从此每次分享都展开成可点 卡片,真的能带来点击。
上线一个到处预览都好看的发布页
产品发布时,你需要链接在 X、Slack、LinkedIn 上同时显示正常。填好 twitter: 字段,打开 Open Graph 开关让 og:title、og:description、 og:image 一起输出,一次粘贴就覆盖 X 卡片和所有靠 og: 的平台。不会 再出现 X 上卡片精美、团队 Slack 里却是一个灰框的尴尬。
只覆盖 X 卡片而不动你已有的 og 标签
你的 CMS 已经给全站输出 og: 标签,但某次活动你只想在 X 上用更带劲的 标题和代理商的 @账号当 creator。Open Graph 开关关着,只填 twitter:title、twitter:creator 和 twitter:card,把它们粘在现有 og: 块下面。X 读 twitter: 覆盖值,其他平台仍用 og: 默认值,互不打架。
给卡片图加 alt 文本,既无障碍又利于收录
用读屏软件刷 X 的人也该听到你卡片图里画的是什么,爬虫也喜欢这个 信号。写一句简洁的 twitter:image:alt 描述图形,生成标签,alt 行会 随图片标签一起输出。配上一段可同时粘进 og: 和 twitter: 图片描述的 文案,哪个平台都不会哑掉。
常见踩坑
漏了 twitter:card 这个标签本身。没有它,标题、描述、图片标签都不起作用,因为 twitter:card 是唯一必填标签,告诉 X 用哪种排版。漏掉它,X 就退回成一条光链接。
图片用了相对路径或非 https 地址。X 爬虫从公开的绝对 https 地址抓图;像 /img/og.png 这样的相对路径或 http 链接会悄悄失败,卡片不显示图。务必填完整 https 地址。
因为有了 twitter 标签就删掉 og 标签。X 把 og 当兜底读,Facebook、LinkedIn、Slack、Discord 只读 og。两套都要发(打开 Open Graph 开关),否则除了 X 哪里都坏。
隐私说明
每个标签都在你的浏览器标签页里用纯 JavaScript 生成。标题、描述、图片 URL 和账号都不会发到任何服务器,生成了什么也不记录。唯一要知道的是: 分享链接会把字段值编码进查询字符串,所以把链接粘到聊天里,对方服务器 的访问日志会留下这些值。涉及未发布的活动,请用复制按钮粘贴标签,而不是 分享网址。卡片预览会直接从图片所在服务器拉取你的图给你看,这个请求发往 图片服务器,不经过我们。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。