什么是Open Graph 预览？

Open Graph 预览工具可以精确展示您的链接在 Facebook、Twitter、LinkedIn 等社交平台上的分享效果。输入 OG meta 标签值，即可在发布前查看社交分享卡片的实时效果图。

工具会读取你的 og:title、og:description、og:image、og:site_name 和 og:url,按各平台的真实样式还原分享卡片。Facebook 标题大约 88 个字符就被截断;Twitter 的大图卡需要 2:1 比例;LinkedIn 描述超过 200 个字符会出现省略号。

使用方法

1. 输入您的 Open Graph 标签：标题、描述、图片 URL、站点名称和链接地址。
2. 实时并排查看 Google 搜索、Facebook、Twitter、LinkedIn、WhatsApp、Slack、Discord 和 Pinterest 八种卡片格式的预览效果。
3. 调整标题长度、描述文字和图片尺寸，直到预览在所有平台上都呈现完美效果。

何时使用

• 博客或营销页面发布前,先确认在社交平台上的分享效果。
• 检查老站点,分享出去的图片空白或标题错位时排查。
• 设计新的 OG 模板时,验证标题不会盖住视觉重点。

结果

在 LinkedIn 上分享新博客文章之前，检查 OG 图片是否被裁剪得不自然，以及描述文字在 Twitter 200 字符卡片限制内是否通顺。

常见问题

OG 图片用什么尺寸最稳妥?

1200x630 像素是通用安全值。Facebook 和 LinkedIn 都按 1.91:1 渲染,Twitter 的 summary_large_image 卡片比例一致。文件控制在 5 MB 以内,使用 JPEG 或 PNG。

改完标签为什么 Facebook 还是显示旧预览?

Facebook 会把 OG 数据缓存大约 24 小时。把链接贴到 Meta 的 Sharing Debugger,点「Scrape Again」即可强制重抓。LinkedIn 也提供同样的 Post Inspector。

已经有 og:* 标签,还需要单独写 twitter:* 标签吗?

Twitter 默认会回退读取 og:title、og:description 和 og:image,基本页面不写 twitter 标签也能正常显示。除非想为 Twitter 单独换标题或换图,才补充 twitter:card 和 twitter:image。

Twitter 的 summary 和 summary_large_image 有什么区别?

summary 显示小方图配文字,适合新闻和文章链接;summary_large_image 把宽图放在文字上方,展示效果更突出,适合落地页、视频这类视觉内容。

可以用动图 GIF 当 og:image 吗?

平台只会取 GIF 的第一帧,后面的动效不显示。建议改用静态 PNG 或 JPEG,把关键信息画在那一帧里;或者把动效转成短 MP4,通过 og:video 引用。

相关工具