OG 社交卡片图生成器

📖 OG 社交卡片图生成器使用说明

把链接发到微信、微博、X 或者 LinkedIn 的时候，展开的那张大图就是 OG 图。它由页面里的 og:image 标签指定，很多站点根本没设，分享出去只有一行光秃秃的标题，点击率差一截。这款工具用来快速造这张图：填标题、选版式、下载，整个过程在浏览器里完成，不上传任何内容。

站里已经有一个 OG 预览器负责看效果，这一款负责把图做出来，两个配着用刚好补上闭环。

一、尺寸该选哪个？

1200×630 是通用答案。Facebook 官方推荐的最小尺寸是 1200×630，宽高比 1.91:1，X 的 summary_large_image 卡片、LinkedIn、微信的分享卡片都能正常裁切这个比例。绝大多数场景只需要这一个尺寸。

1600×900 是 16:9，适合同时要用作文章封面图的场景，在高分屏上更清晰。要注意它的比例与 1.91:1 略有差异，部分平台会做轻微裁切。

1080×1080 是正方形，主要用在小红书、Instagram 这类以方图为主的平台，以及微信朋友圈的部分展示位。

不管选哪个，有一条通用原则：重要内容不要贴边。各平台的裁切规则不一样，边缘留出至少 5% 的安全区，标题才不会被切掉。这款工具的版式已经预留了安全边距。

二、文字该写多少？

OG 图上的文字不是越多越好。它在信息流里的实际显示尺寸往往只有几百像素宽，手机上更小，一眼扫过去能读到的就那么几个字。

实践下来的经验：主标题控制在 20 个汉字以内，副标题 30 个字以内。超过这个量，字号被迫缩小，在缩略图状态下就糊成一片了。工具会随着字数自动调小字号并换行，但那是保底措施，不是让你多写的许可。

另外，OG 图上的文字不参与 SEO。搜索引擎不会 OCR 这张图里的字，它读的是 og:title 和 og:description 标签。图上的文字只影响人的点击决定，所以写法应该按"吸引人点"来，而不是按"塞关键词"来。

三、生成之后怎么用？

把导出的 PNG 上传到你的站点，然后在页面 head 里加上标签：

<meta property="og:image" content="https://example.com/og/article.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

三件事容易被忽略：图片地址必须是绝对路径，写相对路径抓取工具取不到；不能放在需要登录才能访问的位置，各平台的抓取程序是匿名访问的；宽高标签建议一起写，能让平台在图片下载完成前就预留出正确的位置。

改完之后，各平台的缓存需要手动刷新才会更新——Facebook 有分享调试器，X 有卡片验证工具，微信则需要换一个新的链接参数才能绕过缓存。这也是为什么建议在文章发布前就把 OG 图配好，而不是发布后再补。

四、这款工具做不到什么？

• 不支持自定义字体。canvas 用的是系统字体，所以在不同设备上导出的字形会有细微差别。要精确控制字形，得用设计软件。
• 不支持插入图片和 logo。当前版本只做文字与色块的组合，需要放产品图或品牌 logo 的话，导出后在图片编辑器里叠加。
• emoji 的渲染依赖系统。同一个 emoji 在 Windows、Mac、Android 上长得不一样，导出的结果取决于你当前设备。
• 不做批量生成。一次一张。要给几百篇文章批量出图，得用服务端的图片生成方案。
• 它不替代设计。这是给"没有设计资源但需要一张能看的分享图"准备的工具，品牌级的视觉素材还是该走设计流程。