Open Graph 标签:让你的页面在社交分享中好看

Open Graph 标签决定了你的网页在社交媒体上被分享时的样子。了解哪些标签重要,怎么用,以及常见的坑。

在微信、Slack 里分享链接,预览卡片丑得不行?

你有没有过这种经历:把自己网站的链接发到群里,结果预览卡片上没有图片,标题也不对,甚至直接显示一堆乱七八糟的东西。

这就是 Open Graph(OG)标签没设好的结果。

OG 标签是一组 meta 标签,专门告诉社交平台——Facebook、LinkedIn、Twitter/X、Slack、WhatsApp——你的页面预览应该长什么样。

<meta property="og:title" content="免费 SEO 审计工具" />
<meta property="og:description" content="几分钟内分析你网站的 SEO 健康状况。" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />

没有这些标签,平台只能自己猜——猜错了,你的链接就像一封没有信封的信。

这事跟 SEO 有什么关系?

直接关系不大。Google 不会因为你设了 OG 标签就给你加排名分。

但间接影响很大。一个好看的分享卡片意味着更多点击、更多流量、更多人链接你的内容。这些最终都会反馈到 SEO 上。

换个角度想:你花了那么大力气写的内容,被分享出去的时候却因为预览丑而没人点击,这不是亏了吗?

必须设的几个标签

标签干什么用怎么写
og:title预览卡片的标题60 字符以内,写得吸引人
og:description标题下面的摘要150-200 字符,说清楚价值
og:image预览图片1200×630 像素,高清,带品牌元素
og:url页面的规范 URL用完整的绝对路径
og:type内容类型普通页面用 "website",文章用 "article"

其中 og:image 是最关键的。没有图片的预览卡片,点击率会断崖式下降。

常见的坑

完全没有 OG 标签 — 平台随便抓,效果惨不忍睹。

图片太小 — 很多平台要求至少 600×315,理想是 1200×630。图片太小会被裁切或者直接不显示。

缓存问题 — 这是最坑的。Facebook、LinkedIn 会缓存你的 OG 数据。改了标签之后,预览可能好几天都是旧的。得手动去各平台的调试工具里刷新。

所有页面用同一个 og:image — 虽然比没有强,但如果你的博客文章全部显示同一张公司 logo 图,看起来就很敷衍。

怎么测试

改完 OG 标签后,发布之前最好先测试一下:

  • Facebook 分享调试器
  • LinkedIn Post Inspector
  • Twitter/X Card Validator

这些工具会告诉你预览长什么样,有没有缺失的标签。

全站检查

手动检查几个页面还行,几十上百个页面就不现实了。自动化审计应该能:

  1. 找出完全没有 OG 标签的页面
  2. 检测缺少 og:image 的页面 — 影响最大的问题
  3. 验证图片尺寸 — 是否达到最低要求
  4. 检查空值 — 标签写了但内容是空的

Kaitico 在审计时会检查每个页面的 OG 标签完整性,标记缺失和有问题的地方,让你知道哪些页面的社交分享预览需要修复。

想检查你的网站是否存在此问题?

Kaitico 可以一键扫描全站,找出所有 SEO 问题。

免费开始审计