OGP 图像最佳尺寸与制作指南 - 各平台推荐方案
什么是 OGP 图像 - 驱动社交分享的缩略图
OGP(Open Graph Protocol)图像是在社交媒体上分享链接时显示的预览缩略图。一张吸引人的 OGP 图像可以显著提高链接的点击率,是内容传播的关键视觉元素。
OGP 图像的作用:
- 在 Twitter、Facebook、LINE 等平台分享链接时自动显示
- 作为内容的"门面",决定用户是否点击
- 传达文章主题和品牌形象
- 在搜索结果和消息预览中也可能显示
基本 meta 标签:
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Twitter Card 标签:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/image.png">
常见错误:
- 图像 URL 使用相对路径(必须是绝对 URL)
- 图像尺寸过小(低于平台最低要求)
- 图像被 robots.txt 或认证阻止抓取
- HTTPS 页面引用 HTTP 图像
各平台推荐尺寸 - 平台最优方案
不同社交平台对 OGP 图像的显示方式和推荐尺寸各不相同。以下是各主要平台的最佳规格。
通用推荐(一图适配所有平台):
1200x630px,比例 1.91:1。这是兼容性最好的尺寸,在所有主要平台上都能良好显示。文件大小控制在 1MB 以内,推荐使用 PNG 或高质量 JPEG。
Twitter(X):
- summary_large_image:1200x628px(2:1 比例)
- summary(小图):144x144px 以上的正方形
- 最大文件大小:5MB
- 支持 PNG、JPEG、GIF(静态)
Facebook:
- 推荐:1200x630px(1.91:1)
- 最小:600x315px
- 高分辨率:最小 1080px 宽
- 文件大小上限:8MB
LINE:
- 推荐:1200x630px
- 正方形裁剪显示时:中央 630x630px 区域
- 重要内容应集中在中央区域
Discord:
- 大图:推荐 1200x630px
- 嵌入缩略图:最大 400x300px 显示
实用建议:
制作 1200x630px 的图像,将核心信息(标题、Logo)集中在中央 630x630px 区域内。这样即使被裁剪为正方形也能保留关键内容。
有效 OGP 图像的设计原则
OGP 图像在信息流中与大量其他内容竞争注意力。遵循以下设计原则可提高图像的吸引力和点击率。
文字可读性:
- 标题文字大且醒目,在手机小屏幕上也能清晰辨认
- 字数控制在 15 字以内,避免信息过载
- 使用高对比度配色(深色文字+浅色背景或反之)
- 为文字添加阴影或背景色块确保在任何背景上可读
品牌一致性:
- 使用统一的配色方案和字体
- 在固定位置放置 Logo(通常左上或右下角)
- 建立可识别的视觉模板,让用户一眼认出来源
视觉层次:
- 主标题最大最醒目
- 副标题或分类标签作为辅助信息
- 背景图像不要过于复杂,避免干扰文字
避免的设计:
- 纯文字无图形(缺乏视觉吸引力)
- 过多细节(缩略图尺寸下看不清)
- 与平台 UI 颜色相近(容易被忽略)
- 使用库存照片(缺乏独特性)
OGP 图像自动生成 - 编程方案
对于博客或内容网站,手动为每篇文章制作 OGP 图像不现实。自动生成方案可以根据文章标题和分类动态创建 OGP 图像。
Node.js + Canvas 方案:
使用 @napi-rs/canvas 或 node-canvas 在构建时生成图像。读取文章标题,在预设模板上绘制文字,输出为 PNG。可自定义字体、颜色、布局。
Satori + React 方案:
Vercel 的 Satori 库将 JSX 渲染为 SVG,再转换为 PNG。使用 React 组件定义 OGP 模板,支持 Flexbox 布局,开发体验好。Next.js 的 @vercel/og 基于此技术。
Puppeteer/Playwright 方案:
使用无头浏览器渲染 HTML 页面并截图。最灵活(支持任意 CSS),但速度最慢。适合复杂布局或需要 Web 字体的场景。
自动生成的最佳实践:
- 预先生成并缓存,避免运行时生成
- 文字自动换行和缩放,适应不同长度的标题
- 按分类使用不同的背景色或图标
- 生成后验证图像尺寸和文件大小符合要求
实现与调试 - 修复显示问题
OGP 图像的实现看似简单,但各平台的抓取行为和缓存机制常导致图像不显示或显示错误。以下是调试方法。
调试工具:
- Facebook Sharing Debugger:检查 Facebook 如何解析你的 OGP 标签,可强制刷新缓存
- Twitter Card Validator:预览 Twitter 卡片效果
- LINE URL Checker:检查 LINE 的 OGP 解析结果
- Open Graph Preview:浏览器扩展,实时预览 OGP 效果
缓存问题:
社交平台会缓存 OGP 图像。更新图像后需要手动清除缓存:Facebook 使用 Sharing Debugger 的"Scrape Again"按钮;Twitter 通常在几小时内自动更新;LINE 缓存较长,可能需要等待 24 小时。
图像抓取失败的常见原因:
- 服务器响应慢(平台爬虫超时通常 3-5 秒)
- 图像 URL 返回 301/302 重定向过多
- CDN 尚未部署最新图像
- robots.txt 阻止了爬虫访问图像路径
最佳实践:
- 图像托管在 CDN 上确保快速响应
- 避免图像 URL 中包含查询参数(部分平台不支持)
- 设置正确的 Content-Type 响应头
- 部署后立即使用调试工具验证
常见 OGP 问题与解决方案
汇总 OGP 图像实现中最常遇到的问题及其解决方案。
问题:图像不显示:
- 检查 og:image URL 是否为绝对路径(包含 https://)
- 确认图像 URL 可公开访问(无认证、无 IP 限制)
- 验证图像尺寸满足平台最低要求
- 检查 SSL 证书是否有效(过期证书会导致抓取失败)
问题:显示旧图像:
- 使用各平台的调试工具强制刷新缓存
- 更改图像文件名(而非仅更新内容)可绕过缓存
- 在 URL 中添加版本参数:image.png?v=2
问题:图像被裁剪不当:
- 将重要内容集中在图像中央区域
- 避免在边缘放置文字或 Logo
- 测试不同平台的裁剪效果
问题:不同平台显示不同图像:
- 确保 og:image 和 twitter:image 指向同一图像(除非有意区分)
- 页面中只设置一个 og:image(多个时平台选择不确定)
问题:动态页面 OGP 不被抓取:
- 社交平台爬虫不执行 JavaScript
- OGP meta 标签必须在服务器端渲染的 HTML 中
- SPA 需要 SSR 或预渲染来提供 OGP 标签