直接答案
将链接分享图调整到默认 1200×630 或可选 1200×628 画布。在浏览器内裁剪或补边后,请核对目标平台的实际预览。 采用“裁剪铺满(cover)”无黑边覆盖整个 1.91:1 画布,或切换为“完整适应并补边(contain)”保留完整原图细节。
如何使用此工具
导入社交封面素材或博客头图
选择最多 20 张 JPG、PNG 或 WebP 图片。工具默认采用 1200×630 画布。
1200×630 / 1200×628
将链接分享图调整到默认 1200×630 或可选 1200×628 画布。在浏览器内裁剪或补边后,请核对目标平台的实际预览。
选择“裁剪铺满”或“完整适应并补边”
采用“裁剪铺满(cover)”无黑边覆盖整个 1.91:1 画布,或切换为“完整适应并补边(contain)”保留完整原图细节。
导出并在网页头部配置 og:image 标签
下载优化好的图片文件,在 HTML 头部配置 og:image、og:image:width 和 og:image:height 提升抓取效果。
Open Graph 图片尺寸与构图
本工具提供 1200×630 和 1200×628 两种链接预览图画布,比例均约为 1.91:1。Open Graph 定义的是图片元数据,并未规定所有平台通用的必需图片尺寸。请在分享目标平台检查实际显示效果。
实用示例
将 16:9 横版横幅 (1920×1080) 裁剪为 1200×630 OG 卡片
输入: 1920×1080 JPEG 横版图片(16:9 比例,2.1 MB)
输出: 1200×630 JPEG(1.91:1 比例 高清卡片)
在裁剪铺满模式下缩放宽度并裁去上下微小边距,生成预设的 1200×630 预览图。
将 1000×1000 正方形 Logo 居中补边放入 1200×630 画布
输入: 1000×1000 PNG Logo(1:1 比例)
输出: 1200×630 PNG,居中保留 630×630 Logo,左右填充对称边距
完整适应并补边模式保护正方形 Logo 不被裁切,左右填充纯白或品牌主题色。
导出 1200×628 社交分享链接卡片
输入: 2400×1256 PNG 高清设计稿(1.91:1 比例)
输出: 1200×628 PNG 或 WebP 优化文件
等比缩小高清素材至 1200×628 预设,提升抓取与加载速度。
限制
- 社交平台普遍对 og:image 链接存在长时间缓存;更换图片后通常需要使用各平台的调试工具手动刷新缓存。
- 透明补边需导出为 PNG 或 WebP;JPEG 格式不支持透明度,需选择纯色背景。
- 未允许放大时,补边模式将小图按原像素大小放入目标画布;裁剪铺满模式会在原图或裁剪区域太小时阻止处理。需要放大时请明确开启;放大无法恢复缺失细节。
常见问题
Open Graph 社交分享图片推荐什么尺寸?
将链接分享图调整到默认 1200×630 或可选 1200×628 画布。在浏览器内裁剪或补边后,请核对目标平台的实际预览。
为什么要在网页中声明 og:image:width 和 og:image:height?
og:image:width 和 og:image:height 用像素表示图片的宽度与高度,向读取元数据的平台提供尺寸信息,但不能保证首次分享时就显示预览卡片。
OG 图片在所有社交平台上显示效果都完全一样吗?
不是。1200×630 是本工具提供的预设。各平台自行控制预览布局,可能采用不同的裁剪方式;请检查发布后的实际预览。
我的设计素材会被上传到服务器吗?
不会。所有的裁剪、调整尺寸与补边计算均在浏览器端通过 HTML5 Canvas 本地完成,保障未发布素材的隐私。
权威技术标准与参考文献
- The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.