OG 图不需要设计师每次现做：定一套 1200×630 的模板（安全区、字号、色板、水印位），以后换标题就能出图。
下面是可直接落到 Figma 的规范 + 动态生成思路。
核心结论
- ✓尺寸 1200×630，核心信息放中间 1000×500
- ✓标题 48–56px 加粗，不超过 2 行
- ✓底部水印：域名 + 品牌，回流全靠它
- ✓背景用品牌渐变，文字纯白，对比拉满
Figma 规范
- ·画板 1200×630，建 1000×500 居中参考线
- ·标题 52px ExtraBold，行高 1.15，最多两行
- ·副标题 28px，透明度 85%
- ·底部 40px 留白放水印：域名 + logo
配色公式
- ·背景：品牌主色到深色的对角渐变
- ·文字：纯白，描边 0，加暗色遮罩保对比
- ·点缀：取站点主色做小圆点或色条
动态生成
标题入库后用 satori/ImageResponse 按模板渲染，URL 带参即可出图，opg?title=xxx 这种，分享、SEO 两用。
检查
- ·缩略图 200px 下标题是否可读
- ·深色/浅色聊天背景是否都突出
- ·水印在裁剪后是否还在
上线前检查清单
- 01是否 1200×630
- 02核心信息是否在安全区
- 03标题是否 ≤2 行
- 04水印是否在底部
- 05缩略图是否可读
常见问题
每篇文章都要单独做图吗？
用动态模板，一次开发，篇篇自动有图。
文字太多放不下？
只留标题 + 品牌，其他全删，OG 图不是海报。
WebTagr 海报能直接当 OG 图吗？
尺寸正好 1200×630，拿去用完全没问题。