OG Image Sizes:2026 完整指南

发布: (2026年5月11日 GMT+8 09:00)
5 分钟阅读
原文: Dev.to

Source: Dev.to

快速答案: 1200 × 630 像素
记住这个尺寸——它在所有主要平台上都能正常显示,不会被裁剪或失真。

平台图片规格

平台推荐尺寸最小尺寸长宽比最大文件大小
Facebook1200 × 630600 × 3151.91:18 MB
Twitter/X (large card)1200 × 628300 × 1572:15 MB
Twitter/X (summary)240 × 240144 × 1441.15 MB
LinkedIn1200 × 627200 × 2001.91:15 MB
Slack1200 × 630任意1.91:1无硬性限制
Discord1200 × 630任意1.91:18 MB
WhatsApp1200 × 630300 × 2001.91:15 MB
iMessage1200 × 630任意1.91:1无硬性限制
Pinterest1200 × 630200 × 2001.91:110 MB

将此表加入书签以便快速参考。

为什么 1200 × 630 在所有平台都适用

  • 2010 年,Facebook 引入了 Open Graph 协议,并确定了约 1.91:1 的长宽比用于链接预览图片。
  • 随后的平台(Twitter、LinkedIn、Slack、Discord 等)采用了相同或非常接近的比例,因此单张 1200 × 630 的图片在它们之间都能正确显示。
  • 1200 px 的宽度确保在高 DPI(Retina)显示屏上渲染清晰。信息流卡片通常显示宽度约为 600 px,提供 2 倍像素密度,使文字和渐变保持锐利。

图片格式建议

格式何时使用
PNG带文字、纯色或锐利边缘的图像。
JPEG照片类图像;对复杂颜色的压缩更佳。
WebP支持不一致——为获得最大兼容性,建议使用 PNG 或 JPEG。
SVG不支持 OG 图片;大多数平台会忽略。

安全区和排版指南

  • 安全区: 将所有重要视觉元素距离每个边缘至少 60 px。有效内容区域约为 1080 × 510 px。
  • 典型显示尺寸: OG 图片在信息流中显示宽度为 400–600 px。
  • 标题文字: 最小 48 px(在 1200 px 宽度时)。
  • 描述文字: 最小 28 px(在 1200 px 宽度时)。
  • 文字限制: 标题 2–3 行;高对比度(例如白字配深色背景或相反)。

常见陷阱

  1. 使用方形图片 (1:1)。 会被强行裁剪——始终使用 1200 × 630。
  2. 文件大小过大。 目标为 ≤ 1 MB;可使用 TinyPNG 或 ImageOptim 等工具在不损失质量的情况下压缩。
  3. 元标签中的相对 URL。 请提供以 https:// 开头的绝对 URL。
  4. 缓存问题。 各平台会积极缓存 OG 图片;使用相应平台的调试工具强制刷新。
  5. 缺少 og:image:widthog:image:height 提供这些尺寸可加快渲染。

调试工具

  • Facebook Sharing Debugger
  • Twitter Card Validator
  • LinkedIn Post Inspector
  • opengraph.xyz – (preview across multiple platforms)

可扩展的 OG 图片生成选项

工具描述
@vercel/og在边缘进行 JSX 转 PNG;免费且可自行托管。
Cloudinary动态转换并支持文字叠加。
ogimg.xyz专用 API;免费层每月包含 50 张图片。
Puppeteer / Playwright基于截图的方法;灵活但较慢。

总结检查清单

  • 尺寸: 1200 × 630 px
  • 格式: PNG(照片可使用 JPEG)
  • 文件大小: ≤ 1 MB
  • 安全区: 四边留 60 px 边距
  • 元标签: 包含 og:imageog:image:widthog:image:height,并使用绝对 URL
  • 测试: 在发布前使用平台特定的调试工具进行验证

遵循这些指南可确保您分享的链接在所有主要社交平台上都呈现出精致的外观。

0 浏览
Back to Blog

相关文章

阅读更多 »