OG 分享图生成器：把 1200×630 封面图一次做好 - 改几个字，导出一张能用的封面

把文章链接丢进 3 个群，两张显示成灰底白字的系统占位图，一张连标题都没截全。我盯着 1200×630 这个尺寸查了一下午，发现问题不在图，而在 og:image 那行标签压根没配。

• 1200×630 是微信、X、Slack 抓 og:image 时最稳的尺寸，导出就是原图像素，不用再裁。
• 5 套版式不是换颜色：文字落点、对齐方式、几何形状全都不一样，换一套等于重排一张图。
• 中英文混排按字符实测宽度折行，超长会截断并提示「文字过长」，不会画出画布。
• 下载的 PNG 和复制的 4 行 meta 直接能用，参数只存在本机。

一、灰方块是怎么来的

社交平台抓链接时，会读网页 <head> 里的 Open Graph 标签。og:image 指向哪张图，卡片就显示哪张；没写，或者图太小、格式不对，平台就自己糊一张灰底方块顶上。

我踩过这个坑：图明明做了，尺寸却是 800×418，在 X 上被裁掉半行标题。1200×630 是各家都认的公约数，页面直接按这个尺寸画，省得来回试。

二、5 套版式差在哪

左文右色块、居中大字配顶部标签、底部斜切色条、网格加引号、左右分屏双色。版式 决定标题站哪、装饰在哪、字往哪边对齐，切换时这些位置是真的重算，不是给同一张图换层皮。

我不建议每篇都用居中大字。顶部标签 适合给系列文章做统一标记；写长标题时，左对齐那两套留白更从容，读起来不挤。

三、折行和截断怎么处理

折行不是按字数砍，是拿 Canvas 的 measureText 一个字符一个字符量过去。英文单词尽量整段不拆，中文、emoji、中文标点各自成单位，混排也不会在半个字符处断掉。

真塞不下就截断，预览上方给一句「文字过长」。字号滑杆 从 40 到 120，调小两档通常就够；硬把 80 个字塞进封面，谁来看都费劲。

四、导出之后还差一步

点「下载 PNG」拿到的是原始 1200×630 图，上传到自己站点，再把 og:image 的地址填成那个链接。旁边的 4 行 meta 一并复制，og:title、og:description、twitter:card 都在里面。

平台会缓存旧图，这点最容易被忽略。换文件名 再传一次，比反复编辑同一张图见效快；这一步在站点后台做，页面管不到，也不该管。

常见疑问

为什么分享出去还是旧的图？

平台会缓存 og:image。微信、X、Slack 抓到一次图之后，很长一段时间不再来取；换个文件名再上传，或者用平台自带的调试工具强制刷新，比反复改这张图管用。页面只负责生成 PNG 和那几行 meta，上传和刷新要在你自己的站点做。

中文标题会画出画布吗？

不会。按字符实测宽度折行，中英文混排、emoji 和中文标点都留在框内；实在太长会截断并在预览上方提示「文字过长」，把字号调小或精简文案就好。

能不能只改文字，不动版式？

能。5 套版式各自独立，文字、字号、字重、颜色、装饰开关都分开控制。点示例预设会整套填入，之后只动其中一项也不会把别的带跑。

我填的标题会上传吗？

不会。全部在这台设备的浏览器里算，参数存在本机 localStorage，服务器上没有副本。想彻底删掉，点页脚「清空我的数据」，会二次确认。

English version: https://www.9314.cn/tools/og-image-studio/en/