Open Graph 图片：尺寸、技巧与代码示例
Open Graph 图片决定了当有人在 Facebook、Twitter 或 LinkedIn 分享你的页面时显示的内容。错误或缺失的图片会导致点击率大幅下降，访客甚至未进入网站就流失。
本指南涵盖最佳尺寸、设计原则、HTML 实现及测试工具，助你在各大平台正确设置社交预览。
目录
什么是 Open Graph 图片及其重要性
Open Graph 是 Facebook 推出的协议，允许你控制网页在社交网络分享时的展示效果。og:image 元标签指定预览缩略图的图片。
当有人在 Facebook、Twitter 或 LinkedIn 分享链接时，平台会抓取 Open Graph 元数据并生成预览卡片。该卡片包含图片、标题和描述，通常是用户决定点击前唯一看到的内容。
精心设计的 Open Graph 图片能显著提升点击率。缺失或尺寸不当的图片会导致预览异常、缩略图被裁剪或显示通用占位图，显得不专业。
点击率
拥有合适尺寸、高对比度 OG 图片的页面，点击率持续优于无图或低质替代图的页面。
每次分享带来更多点击
品牌识别度
统一的视觉形象让每次分享都能在用户访问页面前建立熟悉感和信任感。
跨平台一致
SEO 信号
引人注目的预览促进社交互动，产生反向链接和流量信号，长期提升自然搜索排名。
间接排名优势
平台专属图片要求
各社交平台有不同的推荐尺寸、宽高比和文件大小限制。正确设置可避免裁剪、变形和占位图。
| 平台 | 推荐尺寸 | 宽高比 | 最大文件大小 | 格式 |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
通用安全尺寸：1200 × 630 像素
1200 × 630 像素、1.91:1 宽高比的图片适用于 Facebook、LinkedIn、WhatsApp、Slack 及大多数平台。Twitter 使用 16:9 裁剪，但该尺寸仍能良好显示，重要内容请居中避免被裁。
高效 Open Graph 图片设计原则
图片在社交动态中显示尺寸较小，设计时优先考虑缩略图效果，而非全尺寸。
将最重要的视觉元素（如标志、醒目标题或关键插图）置于图片中央 80% 区域。平台常裁剪边缘，靠近边界的内容可能被截断。
高对比度
文字、前景元素与背景之间应有强烈对比。低对比度图片在繁杂的社交动态中容易被鲜明的竞品内容淹没。
任何尺寸均清晰可读
字体清晰度
图片含文字时，使用大号粗体字体（至少相当于 36px），且不超过两行。较小文字在缩略图尺寸下难以辨认。
缩小后仍清晰
品牌一致性
每张 OG 图片都应包含标志或品牌色彩。每次分享都是品牌印象，即使用户未点击。
每次分享即品牌接触点
选择合适的图片格式
照片类 OG 图片使用 JPEG，含文字、标志或透明背景的图形使用 PNG。WebP 支持逐渐增加，但尚未被所有社交爬虫普遍支持。
| 格式 | 适用场景 | 社交支持 | 典型文件大小 | 推荐 |
|---|---|---|---|---|
| JPEG | 照片、渐变 | 通用 | 60 – 150 KB | 照片默认格式 |
| PNG | 文字、标志、透明背景 | 通用 | 100 – 300 KB | 图形默认格式 |
| WebP | 两者兼顾，文件更小 | Twitter、Slack（非全部） | 40 – 120 KB | 仅作补充 |
OG 图片目标大小为 100–200 KB，越小越好，但压缩过度会导致社交动态中像素化。WhatsApp 严格限制 300 KB，若需支持 WhatsApp 分享，请保持图片大小低于此限。
关于图片格式权衡的更多内容，请参见 网站图片优化指南 。关于现有图片转换，请参考 JPG 转 WebP 指南 ，涵盖日常转换流程。
HTML 实现与元标签
将 Open Graph 元标签放置于 HTML 的 <head> 元素内。og:image 标签必须使用绝对 URL，社交爬虫不支持相对路径。
最低必需标签包括 og:title、og:description、og:image 和 og:url。twitter:card 标签启用 Twitter 大图卡片格式。
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">务必指定 og:image:width 和 og:image:height。缺失时，平台需先下载并检查图片，导致预览加载变慢且更易出现占位图。
如果你使用 Blazor， Blazor SEO 元数据组件 可自动处理所有 Open Graph 标签，并支持文化感知的 URL。
Open Graph 图片测试与调试
社交平台会积极缓存 Open Graph 元数据。更新标签或图片后，使用官方调试工具强制刷新抓取，确保预览正确再分享。
Facebook 分享调试工具
访问 developers.facebook.com/tools/debug 输入网址，获取最新元数据，查看 Facebook 选用的图片，并调试验证警告或错误。
强制刷新缓存
Twitter 卡片验证器
使用 cards-dev.twitter.com/validator 预览 Twitter 卡片的实际显示效果。点击“预览卡片”查看缩略图、标题和描述。
发布前预览
LinkedIn 帖子检查器
LinkedIn 的帖子检查器（linkedin.com/post-inspector）可刷新该网址的缓存，并展示当前元数据下的帖子预览效果。
刷新 LinkedIn 缓存
常见错误及修复方法
大多数 Open Graph 图片问题源于少数常见错误，了解这些可节省调试时间。
- 相对 URL。 社交爬虫无法解析相对路径。og:image 必须是包含协议和域名的完整绝对 URL（如 https://yourdomain.com/path/image.jpg）。
- 缺少宽度和高度标签。 缺少 og:image:width 和 og:image:height 时，平台需下载并检查图片才能生成预览，增加加载时间。添加这两个标签可避免额外请求。
- 图片受认证保护。 爬虫无法访问需要登录或被 robots.txt 阻止的图片。OG 图片必须公开可访问，无需认证。
- 宽高比错误。 宽高比明显偏离 1.91:1 的图片会被裁剪或出现黑边。发布前务必测试正确比例。
- 平台缓存过期。 更新图片文件但未更改文件名或添加查询参数，平台仍会使用旧缓存。请更改文件名或使用平台调试工具强制刷新。
自动生成 Open Graph 图片
对于小型网站和博客，每页使用单一静态 OG 图片是最简单可靠的方案。对于大型出版物或应用，每页需独特预览时，动态生成更为实用。
动态 OG 图片生成会在请求时或构建时，根据页面标题、描述或其他内容创建独特图片，实现无需手动制作的品牌一致预览。
何时自动化
当页面众多且每页需独特图片、内容频繁更新或手动制作难以满足发布量时，应考虑自动化。
大量或动态内容
何时使用静态图片
大多数页面（如首页、指南和常青文章）使用精心设计的静态图片，在质量和品牌一致性上优于生成图片。
质量优先策略
常用动态生成工具包括 Cloudinary（通过 URL 参数变换）、Vercel OG（边缘渲染 React/HTML 为图片）以及基于 Puppeteer 或 Playwright 的截图流水线，适用于任意技术栈。