OG Image
Open Graph Image
社交分享预览图 · 链接卡片的门面担当
- 定义
- OG Image（Open Graph Image）是IndieHacker领域的专业术语。OG Image 是 Open Graph 协议中用于定义社交分享预览图的 meta 标签。
最后更新：2026-03-31
什么是OG Image？
OG Image 是 Open Graph 协议中用于定义社交分享预览图的 meta 标签。当你把链接发到 Twitter、Discord、微信或 Slack 时，平台会读取 og:image 标签来渲染富媒体卡片。优化后的 OG 图片可将点击率提升 40-60%，是低成本高回报的流量杠杆。
- 推荐尺寸 1200×630px，兼容 Facebook、Twitter、LinkedIn、Discord 等主流平台
- Next.js / Vercel 等框架已内置动态 OG 图片生成能力，可用 JSX 实时渲染
- 缺失或尺寸不对的 OG 图片会导致分享卡片显示为空白或被裁切，直接损失点击
OG Image详解
Open Graph 协议由 Facebook 于 2010 年推出，旨在让网页在社交图谱中成为富对象。og:image 是其中最具视觉冲击力的标签——它决定了链接被分享时用户第一眼看到什么。技术上，og:image 必须是绝对 URL，推荐 1200×630px 的 JPG/PNG 格式，文件不超过 8MB。现代框架如 Next.js 通过 @vercel/og 或 next/og 支持用 JSX + CSS 在服务端动态生成图片，无需设计工具介入。常见陷阱包括：图片 URL 用了相对路径导致平台无法抓取、尺寸不符被裁切、CDN 缓存导致更新后旧图残留。对于内容站和独立开发者，每个页面配置差异化的 OG 图片是性价比最高的分发优化手段之一。
公式提示
最小标签集：og:title + og:image + og:url + og:type；图片推荐 1200×630px、≤8MB、绝对 URL。
OG Image的应用场景
正式定义
Open Graph 协议中通过 og:image meta 标签指定的网页社交分享预览图片。
应用场景
- 为博客文章动态生成带标题和作者的预览图
- 电商产品页自动将商品主图设为 OG 图片提升分享转化
- SaaS 落地页配置品牌化 OG 图片统一社交形象
常见误区
- OG 图片不等于 favicon 或网站 logo，它是专门用于社交分享卡片的大尺寸预览图
- 设置了 og:image 不代表立即生效，各平台有缓存机制，需用调试工具手动刷新
实际案例
📌 Next.js 动态 OG 图片生成
通过 next/og 的 ImageResponse API，用 JSX 定义布局和样式，在 Edge Runtime 实时渲染为 PNG。每个页面可根据标题、分类等参数生成独特的预览图，无需预先制作静态图片。
OG Image的参考来源
关于OG Image的常见问题
- OG 图片尺寸应该是多少
- 推荐 1200×630 像素，这是兼容 Facebook、Twitter、LinkedIn、Discord 等主流平台的通用尺寸，格式用 JPG 或 PNG，文件大小不超过 8MB。
- OG 图片和 Twitter Card 图片有什么区别
- OG 图片通过 og:image 标签定义，Twitter Card 通过 twitter:image 标签定义。Twitter 会优先读取自己的标签，没有时回退到 OG 标签，所以通常设置 OG 图片即可覆盖两者。
- 为什么分享链接后 OG 图片没有显示
- 常见原因：图片 URL 是相对路径而非绝对 URL、图片尺寸不符合平台要求、平台缓存了旧数据。可用 Facebook Sharing Debugger 或 Twitter Card Validator 调试刷新。