为社交链接预览打造 Open Graph 图片
为 Facebook、LinkedIn 和 X 创建 1200×630 的 Open Graph 图片。免费模板，下载即用。
选择模板
什么是
Open Graph 图片是当有人在 Facebook、LinkedIn、X、Discord 或任何支持 Open Graph 协议的平台上分享你的 URL 时，链接预览卡片中显示的视觉元素。该协议由 Facebook 于 2010 年推出，让网页能在社交图谱中成为富对象——而 OG 图片是其中最显眼的部分。它通过 HTML head 中的 og:image 元属性来设置，通常与 og:title 和 og:description 搭配使用。Twitter Cards 采用类似机制：twitter:image 标签扮演相同角色，大多数平台在缺少 twitter:image 时会回退到 og:image。一张精心设计的社交预览图能让用户在点击前快速了解内容，是网页社交元数据中最重要的组成部分之一。
不同平台上的 Open Graph 图片
各社交平台渲染 OG 图片的方式略有不同。Facebook 以大型链接预览卡片展示完整的 1200×630 图片，LinkedIn 显示类似卡片但在移动端裁剪更激进。X (Twitter) 的 summary_large_image 卡片采用 16:9 比例，可能会裁掉标准 OG 图片的上下部分。Discord 和 Slack 渲染的是缩略图版本，因此将重要内容居中放置可确保在所有平台上都清晰可读。
使用方法
- 在编辑器中使用模板或自定义布局设计你的 OG 图片，使其与品牌风格一致。选择在原始尺寸和缩略图下都清晰可辨的颜色、字体和布局。
- 以 1200×630 像素导出图片，这是 Facebook、LinkedIn、Discord 及大多数社交平台支持的标准尺寸。
- 将导出的文件托管在公开可访问的 HTTPS URL 上，确保社交爬虫能无障碍地抓取你的图片。
- 在 HTML head 中添加 Open Graph 元标签——包括 og:image、og:title、og:description，可选加上 og:image:width 和 og:image:height，指向你的图片 URL。
- 使用我们的 URL 调试工具预览 OG 图片，确认 Facebook、X 和 LinkedIn 都能正确渲染图片和文字，然后再公开分享链接。
为什么选择
主动控制社交预览图可以避免平台从页面中随机选取图片来代表你的内容。研究表明，配有合适 OG 图片的链接点击率比没有的高出 2-3 倍。缺少此图片时，社交平台可能展示无关照片、被裁剪的截图，甚至不显示图片——让你的链接很容易被划过。一致的 OG 图片还能在内容被分享时不断强化品牌识别度。