快速解答
选择一张 Open Graph 图片，并在分享前测试链接
大多数页面建议使用 1200 x 630 图片，重要文字和标志远离边缘，使用绝对 HTTPS 图片 URL，并在平台调试工具中测试最终 URL。此流程能捕捉大部分预览异常。
预览角色
将 Open Graph 图片视为页面资产
Open Graph 图片不是装饰，而是爬虫为社交动态、聊天应用和办公工具生成链接卡时代表页面的图像，应与标题、描述、页面主题及结构化数据图片一致。
吸引点击
图片、标题和描述构成访客访问页面前的第一印象。
应与内容匹配
优质预览图应与页面标题、可见主题和核心用户承诺相符，而非使用通用品牌图形。
应与 SEO 数据配合使用
Open Graph 图片、Twitter 卡片图、规范 URL 和 JSON-LD 图片应描述同一页面。
需要命名规则
明确的文件命名和更新规则可防止缓存过期和旧活动图片再次出现。
尺寸方案
选择能适应真实预览的尺寸
不同平台对预览图的裁剪和缓存方式略有差异。1200 x 630 是 Open Graph 预览的推荐默认尺寸，但更安全的做法是设计居中安全区，并在关键平台测试最终 URL。
| 平台或用途 | 实用图片方案 | 注意 | 发布检查 |
|---|---|---|---|
| 通用 Open Graph | 将 1200 x 630 作为大尺寸分享图的实用默认。 | 小尺寸图片可能显得模糊或以更小缩略图显示。 | 分享前在平台调试工具中预览最终 URL。 |
| Facebook 和 LinkedIn | 除非页面需要平台专用资源，否则使用相同的 1.91:1 风格图片。 | 不同动态布局和设备可能裁剪图片边缘不同。 | 重要文字和标志应置于中心安全区内。 |
| X 大卡片 | 使用 summary_large_image 并保持视觉居中；X 支持宽幅大卡片图片。 | 卡片裁剪或缩放时，细小文字和边缘细节可能消失。 | 设置 twitter:image 并用 X 卡片工具测试。 |
| 聊天应用和办公工具 | 保持文件体积小，设计简洁，因为预览通常出现在紧凑区域。 | 复杂截图、冗长标题和低对比度会迅速导致难以阅读。 | 将最终链接粘贴到受众实际使用的工具中。 |
主要信息应置于图片中心，边缘区域风险较高，因动态卡片、聊天预览和移动布局可能裁剪不同。
HTML
页面发布前设置爬虫所需标签
Open Graph 标签应放在 HTML 头部，使用绝对图片 URL，声明宽高，添加有用的替代文本，并保持规范 URL 与用户实际分享页面一致。
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| 标签 | 重要原因 | 常见错误 |
|---|---|---|
| og:image | 指向应代表页面的图片，供爬虫识别。 | 使用相对路径或被登录、重定向或 robots 规则阻挡的图片。 |
| og:image:width / og:image:height | 告知平台图片尺寸，便于抓取和检查文件。 | 不声明尺寸，让爬虫自行猜测预览渲染方式。 |
| og:image:alt | 为预览图添加描述，提升无障碍体验并为爬虫提供更多上下文。 | 重复页面标题而非描述图片内容。 |
| og:url | 将预览与应分享的规范页面 URL 关联。 | 将跟踪、预发布或文化错误的 URL 作为页面永久身份。 |
| twitter:card / twitter:image | 为 X 提供明确的大卡指令及可选平台专用图片。 | 假设 X 平台总是与其他平台完全相同地渲染 Open Graph 图片。 |
如果使用 Blazor，Blazor SEO 元数据组件 可统一管理 Open Graph 标签、Twitter 卡片标签、规范 URL 和 JSON-LD 元数据。
设计规则
优先设计小型动态卡片
大多数人看不到完整图片，只会看到动态、消息或预览窗格中的压缩卡片。简洁布局更胜一筹：主题明确、对比清晰，无需设计文件中才可辨认的小字。
工作流程
每个重要页面的简易工作流程
- 1
撰写预览承诺
确定卡片一眼传达的信息：主题、优势、产品或文章角度。
- 2
按计划比例创建图片
默认文件使用 1200 x 630，重要内容保持居中。
- 3
优化文件
社交图片使用 JPG 或 PNG，保持文件适中大小，避免明显压缩损伤。
- 4
设置元数据和结构化数据
同时更新 Open Graph 标签、Twitter 卡片标签、规范 URL 和 JSON-LD 图片引用。
- 5
使用稳定文件名发布
使用有意义的文件名，替换图片时如平台缓存可能保留旧版本，应更改文件名。
- 6
测试最终 URL
通过调试工具检测公开页面 URL，查看真实预览而非仅源码。
工具提示
确定预览尺寸后使用 PixelPress
当图片方案确定最终文件名时，PixelPress 可协助本地转换为 WebP 或 AVIF，保持原件不变，审核输出后更新 Open Graph URL。
调试
信任预览前刷新平台缓存
社交平台会缓存预览数据。替换图片但 URL 不变时，平台可能继续显示旧预览。使用官方工具刷新，必要时更改文件名或添加版本号 URL。
检查清单
发布前的 Open Graph 图片检查清单
文章、产品页、工具页或落地页上线前使用此清单，捕捉链接分享后难以发现的预览问题。
常见问题
Open Graph 图片应多大尺寸？
大多数 Open Graph 预览建议使用 1200 x 630 作为实用默认尺寸，适合高密度屏幕且接近常见 1.91:1 预览比例。仍需测试最终 URL，因为各平台裁剪和缓存方式不同。
我可以为每个页面使用相同的 Open Graph 图片吗？
可以使用，但效果通常较弱。通用品牌图优于无图，但重要文章、产品页和工具应有与具体页面匹配的预览图。
为什么我的旧 Open Graph 图片仍在显示？
最常见原因是平台缓存。使用 Facebook 分享调试器、LinkedIn 帖子检查器或 X 卡片工具刷新 URL。若旧文件持续出现，发布新文件时更换文件名或添加版本号。
og:image 和 twitter:image 有何区别？
og:image 是多数平台使用的标准 Open Graph 图片，twitter:image 专用于 X 卡片。提供 twitter:image 时，X 会优先使用该图，避免回退到 og:image。
JSON-LD 图片应与 Open Graph 图片匹配吗？
不必完全相同，但应传达相同页面信息。搜索元数据、Open Graph 标签、Twitter 卡片和 JSON-LD 不应指向无关或过时图片。
PixelPress 在 Open Graph 图片流程中扮演什么角色？
确定图片尺寸、文件名和用途后使用 PixelPress。它可帮助本地转换最终文件，保持原件不变，页面仍需正确元数据和预览测试。