在分享前检查您的 Open Graph 图片

粘贴网址即可查看其声明的 og:image 以及该图片在链接预览中的显示效果。在链接发布前,及时发现缺失、裁剪不当、模糊或失效的社交媒体分享图。

已找到图片

请检查该页面是否包含带有 HTTPS 绝对路径 URL 的 og:image 标签。如果没有该标签,各平台可能会随机抓取页面中的图片,或者完全不显示图片。

标题

描述

framer.com

尺寸和比例

建议使用 1200 x 630 像素(比例为 1.91:1)。尺寸较小的图片可能会显示为小缩略图,而其他比例的图片在各个平台上裁剪的方式也会有所不同。

标题

描述

framer.com

文件与格式

请使用小于 5 MB 的 JPG 或 PNG 格式。由于某些应用可能会将图片裁剪为正方形或更窄的卡片样式,请尽量让重要文字和徽标远离边缘。

平台预览

对比同一张图片在 LinkedIn、X、Slack、WhatsApp 和 Google 上的显示效果,确保预览在各个平台都清晰呈现且符合品牌形象。

标题

描述

framer.com

OG 图片实用指南

OG 图像通常是链接预览中最大的部分,因此对人们是否点击有很大影响。以下是如何检查和优化它的方法。

什么是 OG 图像?

OG 图片是指通过 Open Graph 协议中的 og:image 元标签设置的图片。当有人分享您的链接时,社交网络和即时通讯应用会读取该图片来生成预览卡片。

最佳的 OG 图片尺寸是多少?

1200 x 630 像素几乎适用于所有平台。它符合 LinkedIn、Facebook 和 X 上的 1.91:1 大卡片比例。添加 og:image:width 和 og:image:height 标签可以让各平台更快地渲染图片。

如何检查 OG 图片

输入页面网址并运行检查。确认图片能够加载、比例正确,且在小尺寸下也能清晰辨识。然后查看各个平台的预览效果,确认是否有被裁剪或文字过小的情况。

为什么我的 OG 图片不显示?

常见原因包括:使用了相对图片 URL、图片被 robots.txt 或登录拦截、文件过大、内容类型(Content-Type)错误,或是缓存了旧的预览。请修复标签、重新发布,并在相应平台的调试工具中刷新缓存。

OG 图片与 Twitter 卡片图片

X 会优先读取 twitter:image,如果没有则回退使用 og:image。将 twitter:card 设置为 summary_large_image 即可获得大图展示效果。在大多数情况下,一张 1200 x 630 的图片就可以同时满足两者的需求。

打造高点击率 OG 图像的实用技巧

使用清晰的标题或产品实拍图、高对比度色彩以及辨识度高的标志。文字要简短醒目,并为重要页面定制专属图片,避免在整个网站重复使用同一张图片。

寻找 OG 图片灵感

浏览 LinkPreview 图库,查看超过 1,700 个网站是如何设计其 Open Graph 图片的,然后输入您自己的网址进行对比。