免费工具 分享图生成：给链接做一张像样的分享卡片图
链接发到钉钉、飞书、微博或海外社交平台时，没有分享图只会显示一个灰框。选一个模板、填上标题、换上 Logo 和品牌色，就能导出各平台要求尺寸的 PNG：1200×630 的通用 OG 图、X 的 2:1、小程序转发卡片的 5:4。工具同时写好 og:image 标签或小程序分享代码，还能一键带到 OG 预览里看效果。
- 导出 PNG / JPG
- 尺寸按平台文档
- Logo 不离开浏览器
做一张分享图
文字会自动换行、放不下时自动缩小；颜色支持 HEX、RGB 和颜色名。预览就是你下载到的那张图。
模板
200–4096
200–4096
一般就是文章或页面标题。最多三行，放不下先缩小字号再截断。
可选，最多两行。
标题上方的小标签，如「运营指南」「新品」「更新」。
域名、作者或日期。
和首字徽标一起显示。
PNG、JPG、WebP 或 SVG，5 MB 以内。只在浏览器里读取，不上传。
配色方案
自动：在白色和深色里选和背景对比更高的那个。
0 向上，90 向右，135 斜向。
用于徽标、标签、底部色条和分栏色块。
分享图放在你网站上的地址，用来生成标签和预览链接。
描述图片内容，默认用标题。
预览
1200 × 630
检查结果
- 通过1200 × 630，文字清楚，可以导出。
- 提示图片上传后把网址填进来，标签就完整了；现在先用占位地址。
<meta property="og:image" content="https://www.example.com/og/share.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="5 分钟看懂网站流量来源">
<meta name="twitter:card" content="summary_large_image">把图片上传到网站，把地址填进「图片上传后的网址」，再把这些标签放进页面 <head>，和 og:title、og:description 放在一起。选小程序尺寸时这里给的是 onShareAppMessage 的写法。
版本 v1.0更新于 更新记录
预览和检查结果说明了什么
预览和下载的文件逐像素一致；检查结果提醒的是只有分享出去后才会暴露的问题。
尺寸和比例
1200 × 630（1.91:1）同时适合 Facebook、LinkedIn，和 X 的 2:1 大图卡片也只差一点点。只给某个平台用时，再选对应的预设。
文字对比度
分享图常被缩成很小的缩略图。工具把文字颜色和渐变两端分别比较，低于 4.5:1（WCAG 普通文字的门槛）就提醒。
方形裁切
钉钉、飞书等聊天工具的链接卡片常用小方图。打开裁切区看看哪些内容会被切掉，把 Logo 和关键字放在中间。
标签和文件大小
标签里写明宽、高和格式，平台不等图片加载完就能排好卡片。导出后会显示文件大小：X、LinkedIn 上限 5 MB，Facebook 8 MB。
平台会缓存图片。同一个网址换了图，需要在 Facebook 分享调试器、LinkedIn Post Inspector 里重新抓取，或者干脆换个文件名。
四步
几分钟从空白到上线一张分享卡片。
-
1
选模板和尺寸
「经典」「居中」适合文章，「左右分栏」突出大 Logo，「卡片」适合鲜艳的渐变背景。没有特定平台就用 1200 × 630。
-
2
填文字、选颜色
填标题和副标题，选一个配色方案或填品牌色，加上 Logo。
-
3
导出并上传
下载 PNG（文字更锐利）或 JPG（体积更小），上传到网站，把地址填进「图片上传后的网址」。
-
4
放标签、看效果
把 og:image 标签复制进页面 head，再点「带到 OG 预览」看各平台的卡片。小程序把代码放进页面的 onShareAppMessage。
各平台文档里的分享图尺寸
数字来自各平台自己的文档；平台只规定比例时，像素尺寸是我们选的，表里注明。
- 英文按单词换行，中文按字换行；逗号、句号等标点不放在行首，跟着上一行走
- 标题从 72 像素起（随画布缩放），放不下先缩到 40 像素，再不行才截断
- 「自动」文字颜色：在白色和近黑色里选，和渐变两端对比度都更高的那个
- PNG 文字边缘锐利；JPG 按 92% 质量导出，渐变和照片通常小好几倍
| 平台 | 预设 | 文档写法 | 出处 |
|---|---|---|---|
| 1200 × 630 | 至少 1200 × 630，尽量接近 1.91:1；最小 200 × 200；8 MB 以内 | Meta 开发者文档 | |
| 1200 × 627 | 1200 × 627，1.91:1，5 MB 以内 | LinkedIn 帮助 | |
| X | 1200 × 600 | 大图卡片 2:1，至少 300 × 157，5 MB 以内；summary 卡片 1:1 | X 开发者文档 |
| 微信小程序转发 | 1000 × 800 | 图片按 5:4 显示（未规定像素） | 微信小程序文档 |
| 方图 | 1200 × 1200 | 小程序分享到朋友圈、收藏 1:1；X summary 卡片 1:1 | 微信文档、X 文档 |
默认这张图是怎么排的
本页示例用「经典」模板，在 1200 × 630 画布上排版。
| 部分 | 数值 | 原因 |
|---|---|---|
| 页边距 | 四周各 64 像素 | 避开圆角和裁切 |
| 标题 | 72 像素粗体，1 行 | 中文标题短，满字号就放得下 |
| 副标题 | 30 像素，稍微调淡 | 只淡到仍有 4.5:1 为止 |
| 文字颜色 | 白色：对 #2050F0 为 6.05:1，对 #0B0F19 为 19.1:1 | 「自动」取两端里较低的 6.05:1 来判断 |
| 底部色条 | 10 像素，#5B82FF | 把图和品牌色联系起来 |
方形裁切只保留中间 630 × 630，左对齐的文字开头都会被切掉。要照顾钉钉、飞书的小方图，换成「居中」模板，再打开裁切区检查。
分享图显示不对的几个原因
大多是图是按一个地方做的，却在另一个地方显示。
字太小
手机信息流里分享图只有 500 像素左右宽，24 像素的字会变成 10 像素。标题要大、要短。
Logo 贴边
方形缩略图会切掉 1.91:1 图片的左右两侧，重要内容放中间。
图片地址写相对路径
/og.png 在自己网站上能打开，分享爬虫却找不到。og:image 必须是完整的 https:// 地址。
换了图却没换地址
平台会缓存图片好几天。更新的图换个文件名，或者到调试工具里重新抓取。
看看分享带回来多少访客
好的分享图换来点击，统计告诉你点击从哪来、之后发生了什么。
分享图（OG 图）尺寸多大合适？
通用的做法是 1200 × 630 像素：Facebook 建议至少 1200 × 630，LinkedIn 是 1200 × 627，X 大图卡片 2:1，裁切很少。文件控制在 5 MB 以内。微信小程序转发卡片按 5:4 显示，用小程序预设。
分享图怎么加到网页上？
把 PNG 上传到网站，在页面 head 里加 <meta property="og:image" content="https://…/image.png">，再加宽、高和替代文字。工具已经写好，和 og:title、og:description 放在一起即可。
微信里分享网页会显示这张图吗？
不一定。微信打开的网页分享时基本不读 og:image，要自定义缩略图得用公众号 JS-SDK 的 updateAppMessageShareData（需要认证公众号和安全域名）。小程序则在 onShareAppMessage 里设置 imageUrl，按 5:4 显示。
钉钉、飞书的链接卡片读什么？
两家都没有公开文档，实测会读 og:title、og:description 和 og:image，并显示成小方图。打开「方形缩略图裁切区」检查中间部分，用 OG 预览 看卡片样子。
PNG 还是 JPG？
PNG 文字和纯色更锐利，文字多的分享图默认用它；JPG 在照片和渐变上体积小得多。Facebook、X、LinkedIn、微信都支持这两种格式。
我的 Logo 会被上传吗？
不会。Logo 在你的浏览器里读取，图片在本机的 canvas 上绘制，不会发到 TapCub。