当你把一个链接粘进消息、推文、领英帖或 Slack 频道，平台会拉出一张预览卡——一张大图、一个标题、一段摘要。那张图就是 Open Graph（OG）图，它干的活比你的标题还多。在飞快下滑的信息流里，停住拇指的是图片。一张空白或坏掉的预览，读起来就像敷衍，会被划走。
下面讲怎么做一张能换来点击的图——尺寸对、文字真读得清。
尺寸：1200×630
标准的 OG 图是 1200×630 像素，比例 1.91:1。Facebook、领英、Slack、Discord 和大多数链接预览系统都是围着它建的。这一个做对，几乎哪儿都覆盖到了。
根据链接落在哪儿，还会遇到几个相关尺寸：
| 平台 / 用途 | 尺寸 | 比例 |
|---|---|---|
| Open Graph（默认） | 1200×630 | 1.91:1 |
| Twitter/X 大卡 | 1200×628 | 约 1.91:1 |
| YouTube 缩略图 | 1280×720 | 16:9 |
| 正方形（信息流/IG） | 1080×1080 | 1:1 |
| 竖版故事 | 1080×1920 | 9:16 |
给一篇博客做的话，你不需要这些全部——1200×630 是主力。但如果你还要做视频缩略图或方形社交图，直接生成对的形状，比把一张图硬裁着凑数要好。
文字规则：缩略图尺寸下也读得清
毁掉 OG 图的错误，是把它当成一张要全屏看的海报。你不会全屏看。多数人看到这张卡时，大概只有真实尺寸的三分之一，在手机上、下滑途中。要为那个场景来设计。
- 字大、字少。 一个短标题——五到八个字——缩小后也读得清。如果全尺寸下还得眯眼看，到信息流里就是看不清。
- 强对比。 深色或高饱和背景上的浅色字，或反过来。压在杂乱照片上、没有底衬的文字会消失。
- 重要的东西放中间。 不同平台对边缘的裁切略有差别。让文字和 logo 远离外侧边距，就没什么会被切掉。
- 一图一个意思。 OG 图是钩子，不是摘要。标题，也许加个副标题，够了。
让文字跳出来的背景
一块平滑渐变是可靠之选。它给文字一个干净的落脚处，看着现代，也不会像杂乱照片那样跟文字打架。深色到略深的渐变配浅色字，几乎稳赢。
OG 图工具正是围着这个建的：选一个尺寸预设（OG 1200×630、Twitter、YouTube、正方形或故事），选一个渐变背景，加上你的标题和副标题。你得到一张任何尺寸下都读得清的分享卡，不用打开一个完整的设计软件。
让它显示出来的 HTML
做出图片只是一半的活。平台得知道去哪儿找它。把这些标签加到页面的 <head> 里：
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="你的标题">
<meta property="og:description" content="一句清楚的话。">
<meta name="twitter:card" content="summary_large_image">
把 twitter:card 设成 summary_large_image，才能在 X 上得到大卡而不是一张小缩略图。绝对 URL（带 https://）很重要——抓取器来取你页面时，相对路径常常解析不出来。
部署后，测一测。把你的 URL 粘进平台的链接预览调试器（Facebook 的 Sharing Debugger、领英的 Post Inspector），确认图片能加载，并清掉任何缓存的旧版本。平台对预览缓存很积极，所以如果你更新了图片却还看到旧的，调试器的重新抓取按钮就是解法。
做出来，而不是传上去
整件事在你的浏览器里运行——图片用 Canvas 在本地合成，从不上传到服务器。它免费、无需注册、不会在你的分享卡上盖水印，第一次访问后也能离线用。生成 1200×630、接好 meta 标签、过一次调试器，你的链接就开始扛起它该扛的分量了。