OG 分享卡片生成器
生成 1200×630 标准社交分享预览图，标题自动断行排版
免费在线 OG Image 生成器：填写网站名、标题、副标题，可选上传 Logo 与配图， 5 套主题模板（简约白 / 深色系 / 渐变 / 品牌蓝绿 / 暗色科技），按 1200×630 的 Open Graph 标准尺寸 在浏览器 Canvas 中实时合成，导出 PNG 并附推荐 meta 标签代码。全程本地处理，图片不上传。
卡片文案
主题模板
素材（可选 · 仅本地读取）
Logo 建议方形透明 PNG；右侧配图建议 4:5 竖图，未上传时自动绘制装饰图形。
实时预览（本地 Canvas 合成，未上传）
1200 × 630 px推荐 meta 标签
<meta property="og:title" content="发现 1000+ 免费在线实用工具"> <meta property="og:description" content="图片、文本、计算……全部本地处理，不上传"> <meta property="og:image" content="https://your-site.com/og.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image">
导出的 PNG 保存在本地，请先上传到图床或您网站的静态目录，再把 og:image 中的占位地址替换为真实 URL； og:title / og:description 建议与卡片文案保持一致。
# 什么是 OG 图（Open Graph Image）？
OG 图是网页在社交分享时展示的预览大图，来自 Open Graph 协议中的 og:image 元标签。 当链接被分享到微信、微博、X（Twitter）、Telegram、Slack 等平台时，爬虫会读取这些标签生成带图卡片。 官方推荐尺寸正是 1200×630——宽比约 1.91:1，太小会被拉伸模糊，太大则加载缓慢。 一张排版干净的分享卡片能显著提升链接点击率，是站长和内容创作者的必备物料。
# 生成步骤
- 填写网站名称、页面标题与副标题
- 选择一套主题模板，可选上传 Logo 和右侧配图
- 在实时预览中确认断行与字号效果
- 点击导出 PNG，将图片上传到图床或网站目录
- 复制推荐 meta 标签，替换 og:image 的 URL 后放入页面 head
# 标题排版原理：自动断行 + 字号自适应
中文没有空格分词，本工具对中文按字符逐字断行、对英文按单词整体断行（不把单词从中间切断）， 使用 measureText 实测每行宽度；当标题过长导致行数超出时自动逐级缩小字号，直到最小字号下限为止， 保证长短标题都能保持美观的版式重心。
# 常见问题 (FAQ)
上传的 Logo 和配图会被传到服务器吗？
不会。素材只通过浏览器 FileReader 读入内存，在本地 Canvas 内完成裁切与合成，任何像素都不会离开您的设备， 这也是本站所有图片工具的隐私底线。
为什么微信里我的链接没有显示这张卡片？
社交平台需要先抓取到您页面 head 里的 og:image 且图片 URL 公网可访问才会生成卡片。 请确认：① 标签已放入 head；② 图片已上传图床/服务器且地址正确；③ 域名在平台有正常收录。 微信对未备案或新域名可能不展示外链缩略图。
可以用其他尺寸吗？
本工具固定输出 1200×630，因为这是 Open Graph 与各主流平台通用的推荐尺寸； 若需要 Twitter 专用比例或更大 banner，可把导出图当作源文件再行裁剪。
相关工具推荐
CSS阴影生成器
可视化生成CSS阴影效果，支持box-shadow和text-shadow
Logo制作器
使用几何图形组合设计专业Logo
CSS渐变生成器
可视化生成CSS渐变代码，支持线性、径向和锥形渐变
CSS动画生成器
可视化编辑CSS关键帧动画，实时预览和代码生成
CSS边框生成器
生成CSS边框样式，支持圆角、虚线、图片边框等
图案生成器
生成可重复的背景图案，支持多种样式和自定义参数
相关教程
在线设计工具间（二）：配色、SVG、字体与图像素材，25 款备齐
定一套色板、画一条波浪、配一对字体、出一张占位图——设计落地最常用的四类素材，站内 25 款工具全部浏览器本地运行：调色板与无障碍检查、SVG 编辑与图标、字体配对与行高节奏、占位图与 favicon 与 OG 卡片。收藏这一页，开新项目时不再临时到处搜。
2026-10-20
发图之前的最后十步：带壳截图、分享卡片、情侣头像与封面挑图
发图之前的最后十步：应用商店要带壳截图，文章要有分享卡片，合照想拆情侣头像，发布前还想预览封面在信息流里的样子——社交场景的图片加工全是细碎活。八款工具把这些活从 Photoshop 里接出来，浏览器本地合成，原图不出本机不上传。
2026-10-20