什么是开放图谱标签？链接预览和社交分享指南
当你在 Facebook、LinkedIn、Slack 或 Twitter 上分享链接时，通常会出现一个预览卡片——包含标题、描述和图像。这些预览并非魔法。它们由页面 HTML 中的开放图谱 (OG) 标签控制。
设置正确的开放图谱标签意味着你分享的链接看起来专业，并能获得更多点击。设置错误意味着预览效果差、图像丢失或通用的后备文本。
什么是开放图谱协议？
开放图谱是 Facebook 在 2010 年创建的一个协议，它让网页能够定义在社交平台上分享时的显示方式。它在 HTML <head> 部分使用元标签：
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
当社交平台检测到共享的 URL 时，它会获取该页面并读取这些标签来构建预览卡片。
基本的开放图谱标签
og:title
在预览卡片中显示的标题。保持在 60 个字符以下以获得跨平台的最佳显示效果。
<meta property="og:title" content="How to Create Branded Short Links" />
建议：
- 不要只是复制你的
<title>标签——针对社交参与度进行优化 - 将重要词汇放在前面
- 避免标题党（平台可能会惩罚）
og:description
在标题下方显示的简短摘要。目标是 120-160 个字符。
<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />
og:image
在预览中显示的图像。这是最有影响力的标签——带有图像的帖子获得的参与度要高得多。
<meta property="og:image" content="https://example.com/social-preview.jpg" />
按平台的图像要求：
| 平台 | 推荐尺寸 | 宽高比 |
|---|---|---|
| 1200 × 630 px | 1.91:1 | |
| 1200 × 628 px | 1.91:1 | |
| 1200 × 627 px | 1.91:1 | |
| Slack | 500 × 500 px 最小 | 任意 |
使用 1200 × 630 像素覆盖所有平台。
og:url
页面的规范 URL。这告诉平台要显示哪个 URL，并帮助防止重复内容。
<meta property="og:url" content="https://example.com/page" />
og:type
描述内容的类型。常见值：
website— 用于主页和常规页面article— 用于博客文章和文章product— 用于产品页面
Twitter 卡片标签
Twitter 使用自己的元标签（除了开放图谱）来显示预览卡片：
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
如果不存在 Twitter 卡片标签，Twitter 会回退到开放图谱标签。大多数网站同时设置两者以获得最大控制。
社交平台如何获取开放图谱数据
当你分享一个 URL 时：
- 1平台的爬虫访问该 URL
- 2它读取 HTML
<head>中的 OG 标签 - 3它缓存预览卡片数据
- 4同一 URL 的后续分享使用缓存的版本
重要提示： OG 标签的更改不会立即反映。平台会积极缓存，所以你可能需要手动清除缓存（见下面的调试）。
使用 Linkly 自定义链接预览
如果你在分享你不控制的 URL——或者你想为不同的上下文创建不同的预览卡片怎么办？
Linkly 的自定义社交预览功能让你可以覆盖任何缩短链接的开放图谱数据：
- 设置自定义标题、描述和图像
- 为不同的受众提供不同的预览
- 无需编辑目标页面的 HTML
- 适用于任何 URL，甚至是你不拥有的页面
这在以下情况下特别有用：
- 使用你自己的品牌分享第三方内容
- A/B 测试不同的预览卡片，看看哪个获得更多点击
- 目标页面 OG 标签不好或缺失
调试开放图谱标签
Facebook 分享调试工具
Facebook 的工具让你预览和刷新缓存的 OG 数据：
- 1输入你的 URL
- 2点击调试
- 3查看 Facebook 从你的页面读取的内容
- 4点击再次抓取以清除缓存
Twitter 卡片验证工具
Twitter 的验证工具显示你的卡片将如何显示，并突出显示任何问题。
LinkedIn 文章检查工具
LinkedIn 的工具预览你的链接卡片并刷新缓存的数据。
常见建议
- 检查源代码： 查看页面源代码并搜索
og:以验证标签是否存在 - 使用绝对 URL： 图像 URL 必须是绝对的（以
https://开头），而不是相对的 - 更新后测试： 更新 OG 标签后务必清除平台缓存
- 检查 JavaScript 渲染： 某些平台无法执行 JavaScript，所以 OG 标签必须在初始 HTML 响应中
常见错误
- 1缺少 og:image： 没有图像的帖子获得的点击次数少 2-3 倍
- 2图像太小： 至少使用 1200 × 630 像素
- 3宽高比错误： 图像被不正常地裁剪
- 4陈旧的缓存： 更新了你的 OG 标签但忘记清除平台缓存
- 5重复的标签： 同一类型的多个 OG 标签会导致不可预测的行为
- 6HTTP 图像： 对图像 URL 使用 HTTPS——某些平台会阻止 HTTP 图像
- 7相对 URL： 平台爬虫无法解析相对路径
不同内容类型的开放图谱
博客文章
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />
产品
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />
视频
<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />
结论
开放图谱标签是添加到 HTML 的一个小东西，但对你的内容在社交网络上的显示方式有很大影响。设置正确——使用正确的标题、描述和图像——直接增加你的链接被分享时的点击率。
想要自定义链接预览而无需编辑 HTML？ 开始使用 Linkly，为任何缩短的链接自定义社交预览卡片——设置你自己的标题、描述和图像。
