每当你在 Facebook 帖子中分享网页链接、将文章粘贴到 Telegram 群组中，或者在 Twitter 上私信朋友产品页面时，你都希望看到一个精美的可视化预览卡片。该卡片——包含清晰的横幅图片、吸引人的标题和简明的摘要——并非偶然出现。它是通过一种名为开放图谱协议（Open Graph protocol）的标准化网页规范构建的。但如果你的网站代码缺少这些 meta 标签，社交平台将显示一个难看的、破碎的灰色框，或者从你的页面中随机选择一个缩略图。学习开放图谱标签（open graph tags）的机制对于网页开发者和技术营销人员来说至关重要。

最初由 Facebook 在 2010 年推出的 Open Graph 协议旨在将外部网页整合到社交图谱网络中。在 Open Graph 出现之前，社交网络必须通过抓取原始段落文本和扫描 HTML 图片标签来猜测文章的内容，这常常导致尴尬的视觉预览。如今，Open Graph 已成为由 LinkedIn、Pinterest、Twitter、Telegram、Discord、Slack 和 WhatsApp 支持的通用互联网标准。在本技术深入探讨中，你将学习核心 OG 标签的确切语法，了解图片尺寸要求，并发现如何调试和优化预览卡，以实现最大的社交互动。

通过掌握 Open Graph 元数据，您可以确保从您的域共享的每个链接都看起来吸引人、专业，并针对社交分享进行了优化。

除了公共社交媒体动态之外，Open Graph 标签还决定了链接在私有协作软件和团队消息工具（如 Slack、Microsoft Teams 和 Discord）中的呈现方式。当团队成员将你的 URL 粘贴到公司 Slack 频道或开发者 Discord 服务器时，应用程序的内部机器人会实时解析你的 Open Graph 元数据，在聊天流中直接显示你的标题、缩略图和摘要片段。高质量的元数据可确保内部利益相关者和社区成员立即与你的链接进行互动。

什么是开放图协议？

开放图谱协议是一组结构化的元标签，网页开发者将其放置在 HTML 文档的 <head> 部分。当自动爬虫（例如 facebookexternalhit 或 TelegramBot）访问您的页面时，它会解析这些标签以构建一个互动丰富的预览对象。

没有 Open Graph 标签，共享的链接只是普通文本。使用 Open Graph 标签后，您的链接会转变为高可见度的互动视觉卡片，从而在社交媒体上显著提高点击率。

您必须包含的核心 Open Graph 标签

每个公共网页都应该包括四个基础的 Open Graph 标签，以确保在所有主要平台上的一致呈现：

元属性标签 语法示例 技术目的与指南
og:title <meta property="og:title" content="Page Title" /> 你的内容标题；在手机上保持少于60个字符
og:description <meta property="og:description" content="Summary" /> 两行摘要片段；目标140–160个字符
og:image <meta property="og:image" content="https://..." /> 指向您的特色预览缩略图的绝对 HTTPS URL
og:url <meta property="og:url" content="https://..." /> 用于整合社交信号的资源规范 URL
og:type <meta property="og:type" content="article" /> 分类内容类型（例如，网站、文章、视频、个人资料）

始终确保 og:url 与您的规范链接标签匹配，以防止社交互动计数和反向链接信号在 URL 变体之间分散。

为现代显示屏优化开放图像

图像无疑是任何预览卡中最关键的元素。为了确保您的图形在现代高分辨率智能手机屏幕上呈现出清晰的锐利效果，请遵循以下技术规格：

  • 标准分辨率 (1.91:1)： 使用 1200x630 像素。这是 Facebook、LinkedIn 和 Twitter 摘要卡的通用标准。
  • 宽屏替代方案 (16:9)： 1200x675 像素 广泛用于视频内容、YouTube 分享和现代响应式博客。
  • 明确声明尺寸：始终包括 <meta property="og:image:width" content="1200" /> 和 <meta property="og:image:height" content="630" />。这允许社交爬虫在第一次抓取时立即呈现卡片布局，而无需异步下载和计算图像尺寸。
  • 文件大小限制：保持文件大小在 5MB 以下。大多数社交媒体抓取工具会中止下载超过 5MB 的图片，以节省网络带宽。
  • 中心关键文本：社交平台在移动端信息流与桌面侧栏上裁剪预览图的方式不同。请将所有关键标志、文本标题和面部保持在图像中间的“安全区”。

Twitter 卡片与开放图谱：它们如何交互

Twitter（X）维护其自己的专有元数据标记，称为Twitter Cards，但它也本地支持 Open Graph 回退。

为了确保您的链接在 Twitter 上显示为大型、吸引人的视觉卡片，而不是小方形缩略图，请在 Open Graph 标签旁边添加这些专用的 Twitter 标签：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

如果您想要全宽视觉预览，必须将 twitter:card 设置为 summary_large_image。如果省略，Twitter 默认显示紧凑的纯文本预览，点击量会低得多。

高级出版商还应实施补充的 Open Graph 属性，例如 og:locale 和 article:published_time。声明 og:locale 可以告知爬虫内容的主要语言和地区格式，而出版时间戳则有助于内容发现引擎（如 Google Discover）识别新的编辑报道。

维护一个结构化的图片回退层次也是明智的。如果作者忘记为特定博客文章上传专门的特色图片，你的内容管理模板应自动插入干净的、高分辨率的默认品牌图形，而不是让爬虫渲染空白的预览卡。

您还可以在我们的品牌子域名指南中探索 Open Graph 标签如何与品牌子域名互动。

使用 DSLink 创建无缝智能链接

绕过应用内浏览器障碍，将移动用户直接引导到原生应用，并通过智能深度链接优化您的转化率。

免费开始 — 无需信用卡

测试、验证和排查预览标签

在启动营销活动或公开分享链接之前，请始终使用官方平台调试工具验证您的 Open Graph 标签：

  • Meta 分享调试工具：粘贴您的 URL 以预览 Facebook 卡片，检查标签警告，并根据我们关于修复错误预览图片的指南，强制刷新爬虫缓存。
  • Telegram @WebpageBot： 将您的链接发送给此已验证的 Telegram 机器人，以验证移动端预览渲染并清除旧的缓存图像。
  • LinkedIn 帖子检查器： 清除 LinkedIn 七天的链接预览缓存并报告缺失的元数据字段。
  • 自动链接检查： 使用我们的免费 链接检查工具 验证重定向链、SSL 证书和状态码。

通过实现完整的开放图谱元数据并验证在各大主要平台上的预览渲染，您可以确保您的网页链接在拥挤的信息流中脱颖而出，并推动最大限度的参与度。

常见问题

Open Graph 是做什么的？

开放图谱元标签告诉社交媒体平台（如 Facebook、LinkedIn、Twitter 和 Telegram）当有人分享您的网址时显示什么标题、描述和图片。

Open Graph 标签在 HTML 中放在哪里？

Open Graph 标签应放在页面的 HTML 头部部分，使用带有 name 和 content 属性的 meta 属性标签进行格式化。

Open Graph 最佳的图片尺寸是多少？

最佳分辨率为 1200x630 像素，纵横比为 1.91:1。对于 16:9 宽屏格式，1200x675 像素在现代显示器上也得到广泛支持。

为什么我的 Open Graph 图片没有在社交媒体上显示？

常见原因包括使用相对 URL 而不是绝对的 HTTPS 链接、图像文件大小超过 5MB、爬虫缓存持续存在，或防火墙阻止社交抓取器。