文章目录
- 快速导航
Twitter/X OG 分享图与 Open Graph 卡片：独立开发者本地生成指南
链接被转发时，用户先看到的是图，不是你的 README
在 Twitter/X、Slack、Notion、博客、文档站里贴一个链接，展开预览里的大图往往决定点不点。这张图通常来自 Open Graph（og:image）或 Twitter Card 元数据。独立开发者常见痛点是：功能写完了，分享图还是默认截浏览器窗口，或用过期 Logo 糊一张 1200×630——预览一出来就像半成品。
OG / Twitter 分享图要解决的是三秒内说清「这是什么、为谁、有何结果」，不是塞满功能列表。浏览器本地生成，可以把「改标题 → 导出 PNG → 换 meta」变成固定工序，且未公开的产品界面不必上传到在线设计站。
尺寸、比例与平台差异（先对齐再设计）
业界常用 1200×630（约 1.91:1）作为 OG 与大型 Twitter summary card 的安全默认。注意：
| 场景 | 建议 | 备注 |
|---|---|---|
| 博客 / 文档 / 产品页 OG | 1200×630 | 多数爬虫与 IM 预览友好 |
| Twitter/X 大图卡片 | 同比例优先 | 过矮或过高会被裁切 |
| 小图 summary | 另备方图 | 与大图文案层级不同，勿混用同一导出 |
标题与关键图标应落在中部安全区：四周预留边距，避免被圆角、平台 UI 遮挡。深色背景下用高对比浅色字，浅色背景则相反；细线装饰在压缩后容易消失，优先色块与粗字重。
一张合格分享图的信息结构
推荐固定四层，少一层就少一层噪音：
- 结果型主标题（一句话利益，而非公司使命）
- 场景或受众副标题（谁该点）
- 可选产品 UI 或前后对比（证明真实）
- 弱品牌标识（角落一次即可，勿抢主标题）
独立开发者容易犯的错是把商店五张截图的卖点全塞进 OG 图。分享图只服务「点进页面」；进页后再用正文与商店截图承接。主标题尽量与页面 H1 / 推文主句一致，减少「点进来发现不是一回事」的跳出。
本地浏览器怎么生成并接到站点
打开 Twitter / OG 分享图工具，在浏览器里排版、预览、导出：
- 选定 1200×630（或工具提供的等价比例）
- 写入本周唯一主卖点；副文案补「时长 / 平台 / 免费或试用」等可验证信息
- 需要时拖入本地截图作锚点，不上传原图到远端
- 导出 PNG，放到站点
public或 CDN，更新og:image与twitter:image - 用 Twitter Card Validator / 各 IM 贴链接自测缓存（注意平台会缓存旧图，换文件名或加版本查询参数更稳）
强调图片本地处理、隐私友好：适合还在灰度、NDA 或未上架阶段的界面素材。独立开发者把商店素材与社媒推广放在同一套卖点表上时，OG 图应复用商店第一屏的说法，只改比例与语气。
和上架截图、推文节奏怎么配合
- 发版日：推文正文讲故事，OG 图讲同一结果句，落地页第一屏再展开
- 日常内容：每篇长文一张专用 OG，比全站共用一张 Logo 墙转化更好
- A/B：只改主标题词，不改色板与布局骨架，方便判断文案而非审美
- 多语言站点：中英各一张，避免英文推文展开中文图或相反
若你同时做国内小红书竖版卡片，卖点顺序仍应同一套；平台不同，事实来源不要分叉。
技术与运营上的坑
- 缓存：换了图但 URL 不变，预览仍显示旧图——改文件名或
?v=。 - 体积：过大 PNG 拖慢爬虫抓取；导出后可用无损/有损压缩，但勿糊到字不可读。
- 绝对化用语：分享图同样可能被平台或广告政策审视。
- 只靠自动截网页：布局错乱、登录墙、深色模式差异都会让预览翻车；关键页应用手控卡片。
- 忘记移动端：很多人在手机上看推文预览，真机点开检查一次。
小结：把 OG 图当成产品的「外包装条码」
链接预览是你产品在社交图谱里的包装。用本地 og-share 工具 固定尺寸与层级，把隐私敏感的截图留在浏览器，再接到 og:image，独立开发者就能以很低成本维持「每次发版都有像样的分享图」。先对齐卖点与安全区，再谈是否需要动效或摄影级背景——对大多数工具类 App，清晰的结果句 + 真实 UI 就已经足够让人点进去。