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 背景补充:
OGP 由 Facebook 于 2010 年制定，如今 Twitter/X、LINE、Slack、Discord、LinkedIn 等平台均已支持。合适的 OGP 图像能大幅提升 SNS 上的点击率 (CTR)。BuzzSumo 于 2015 年 5 月公布的分析 (对象为 Facebook 上超过 1 亿条投稿) 显示，带图投稿的互动量是无图投稿的 2.3 倍。这是十多年前的数字，各平台的展示逻辑此后一直在变，因此 2.3 倍不能直接当作当前的预期值；但截至 2026 年 8 月，各主要平台仍以大幅卡片形式展示链接预览，“有无预览图会左右反应量”这一前提并未动摇。示例标签：<meta property="og:image" content="https://example.com/ogp.png"> 以及 og:image:type 为 image/png、og:image:alt 提供替代文本。
各平台推荐尺寸 - 平台最优方案
不同社交平台对 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 区域内。这样即使被裁剪为正方形也能保留关键内容。
各平台尺寸补充:
各 SNS 平台显示方式不同，最优尺寸也不同。Twitter/X 的 Summary Large Image 卡片用 1200x630px,summary 方形卡片用 800x800px，最小 300x157px 以下不显示。Slack 在 unfurl (链接展开) 时自动缩放。Discord 最大支持 4096x4096px，按 embed 宽度自动缩放。LinkedIn 官方推荐 1200x627px。WebP 在部分平台 (尤其 LINE) 可能不受支持。
有效 OGP 图像的设计原则
OGP 图像在信息流中与大量其他内容竞争注意力。遵循以下设计原则可提高图像的吸引力和点击率。
文字可读性:
- 标题文字大且醒目，在手机小屏幕上也能清晰辨认
- 字数控制在 15 字以内，避免信息过载
- 使用高对比度配色(深色文字+浅色背景或反之)
- 为文字添加阴影或背景色块确保在任何背景上可读
品牌一致性:
- 使用统一的配色方案和字体
- 在固定位置放置 Logo(通常左上或右下角)
- 建立可识别的视觉模板，让用户一眼认出来源
视觉层次:
- 主标题最大最醒目
- 副标题或分类标签作为辅助信息
- 背景图像不要过于复杂，避免干扰文字
避免的设计:
- 纯文字无图形(缺乏视觉吸引力)
- 过多细节(缩略图尺寸下看不清)
- 与平台 UI 颜色相近(容易被忽略)
- 使用库存照片(缺乏独特性)
设计原则补充:
OGP 图像在 SNS 时间线上与其他内容竞争，需一眼看懂。标题控制在 15-20 字，字号 40px 以上。图像边缘 10-15% 区域可能被裁剪，重要元素置于中央 70% 范围。背景与文字对比度取 WCAG AA 标准的 4.5:1 以上，照片上叠加半透明遮罩 (黑色 50-70% 透明)。具体数字如"5 种方法""30% 削减"更吸引眼球。
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 字体的场景。
自动生成的最佳实践:
- 预先生成并缓存，避免运行时生成
- 文字自动换行和缩放，适应不同长度的标题
- 按分类使用不同的背景色或图标
- 生成后验证图像尺寸和文件大小符合要求
自动生成补充:
Node.js + Canvas 用 Canvas API 在服务器端生成图像，日文绘制需预加载 Noto Sans JP 等字体。Puppeteer / Playwright 用无头浏览器渲染 HTML + CSS 模板并截图，可活用 Flexbox、Grid 布局，Vercel 曾公开的 og-image 也采用此方式，但该仓库停留在仅支持 Node.js 14 的状态，官方已引导迁移至 @vercel/og (截至 2026 年 8 月)，若选择无头浏览器方案需自行维护模板与渲染环境。Satori + Resvg (Vercel OG) 将 React 组件转为 SVG 再栅格化为 PNG，可在 Edge Runtime 动态生成。
实现与调试 - 修复显示问题
OGP 图像的实现看似简单，但各平台的抓取行为和缓存机制常导致图像不显示或显示错误。以下是调试方法。
调试工具:
- Facebook Sharing Debugger：检查 Facebook 如何解析你的 OGP 标签，可强制刷新缓存
- X (原 Twitter) 的卡片确认：官方 Card Validator 已于 2022 年停止预览功能，截至 2026 年 8 月没有替代的官方预览工具。由于缺少
twitter:标签时会读取og:标签，可先用其他工具确认标签能被抓取，最后用测试账号实际发帖确认 - LINE URL Checker：检查 LINE 的 OGP 解析结果
- Open Graph Preview：浏览器扩展，实时预览 OGP 效果
缓存问题:
社交平台会缓存 OGP 图像。更新图像后需要手动清除缓存：Facebook 使用 Sharing Debugger 的"Scrape Again"按钮；其他平台大多没有公开缓存有效期，不要按固定时长安排更新，可给 URL 附加查询参数 (如 ?v=2) 强制刷新，并以实际预览确认反映情况。
图像抓取失败的常见原因:
- 服务器响应慢(平台爬虫超时通常 3-5 秒)
- 图像 URL 返回 301/302 重定向过多
- CDN 尚未部署最新图像
- robots.txt 阻止了爬虫访问图像路径
最佳实践:
- 图像托管在 CDN 上确保快速响应
- 避免图像 URL 中包含查询参数(部分平台不支持)
- 设置正确的 Content-Type 响应头
- 部署后立即使用调试工具验证
实现与调试补充:
在 HTML 的 <head> 内放置元标签。og:image:type 为 MIME 类型 (image/png 或 image/jpeg),og:image:alt 提供替代文本以支持屏幕阅读器。调试工具：Facebook Sharing Debugger (developers.facebook.com/tools/debug/) 可清缓存并预览，LinkedIn Post Inspector (linkedin.com/post-inspector/) 预览并清缓存；X 的官方 Card Validator (cards-dev.twitter.com/validator) 自 2022 年起已无预览功能。公开缓存有效期的平台很少，不要按固定天数安排更新，应通过重新抓取或查询参数强制失效并在实际预览中确认。
常见 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 标签
常见问题补充:
确认图像文件未返回 404 且可经 HTTPS 访问。更新后可加版本参数 (如 v=20260501) 作为新 URL 识别。重要元素置于安全区 (中央 70%) 内。Twitter 需 300x157px 以上；未设置 <meta name="twitter:card" content="summary_large_image"> 或图像不足时会变成小的 Summary 卡片，显示 Large Image 卡片需同时满足此标签与足够尺寸。动态页面若依赖 JavaScript 渲染，爬虫无法获取 OGP 标签，需用 SSR (Server-Side Rendering) 或 SSG (Static Site Generation)，即 Single Page Application 之外的服务端渲染。