OG Preview 完全在你的浏览器中运行。你可以手动输入标签值,或让工具从在线 URL 读取标签值,随即就能看到页面在 Facebook、X (Twitter) 和 LinkedIn 上的显示效果。
第一步:打开工具
打开首页。它默认以手动输入模式启动,适用于任何页面 —— 包括尚未发布的草稿或需要登录才能访问的页面。
第二步:输入标签值(手动输入)
填写以下字段:
- URL / 域名 —— 显示为预览中的来源行。
- 标题 (og:title) —— 你的标题;尽量控制在 60 个字符以内。
- 描述 (og:description) —— 简短的摘要,约 150–160 个字符。
- 图片 URL (og:image) —— 指向预览图片的绝对
https://链接(理想尺寸为 1200×630px)。
Facebook、X (Twitter) 和 LinkedIn 预览会随着你的输入实时更新。无需上传 —— 图片通过其 URL 引用。
第三步(可选):从 URL 抓取标签(Beta)
切换到抓取 URL(Beta),粘贴一个公开的页面 URL 并点击预览。工具会通过公共 CORS 代理获取页面,读取它已有的 OG/Twitter 标签,并显示预览以及一份列出已找到和缺失标签的表格。此模式为尽力而为:部分网站会屏蔽代理,这种情况下手动输入是可靠的备选方案。
第四步:反复调整直到满意
调整标题、描述和图片,直到预览达到你想要的效果。注意检查是否有图片缺失或标题被截断的情况。
第五步:将标签添加到你的页面
OG Preview 不会导出代码文件 —— 你需要将标签添加到自己网站的 <head> 中。使用你最终确定的值,标记大致如下:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short, compelling summary.">
<meta property="og:image" content="https://yoursite.com/preview.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta name="twitter:card" content="summary_large_image">
如果你使用 CMS,大多数 SEO 插件(例如 WordPress 上的 Yoast SEO 或 Rank Math)都提供了正好对应这些值的字段。
第六步:在真实平台上测试
标签上线后,使用官方调试工具进行确认,这些工具还能清除平台缓存: