Open Graph 标签：社交媒体预览完整指南
· 12分钟阅读
目录
当您在 Facebook、LinkedIn、Twitter 或消息应用上分享链接时，出现的预览卡片是从页面 HTML 中的 Open Graph (OG) 标签生成的。正确设置这些标签意味着在引人入胜、值得点击的预览和损坏或通用外观的链接之间的区别。
本综合指南涵盖了您需要了解的关于 Open Graph 标签、Twitter Cards 和社交媒体预览优化的所有内容。无论您是首次实施 OG 标签的开发人员还是希望提高社交参与度的营销人员，您都会在整个过程中找到可操作的见解和实用示例。
什么是 Open Graph？
Open Graph 是 Facebook 于 2010 年创建的协议，允许网页成为社交图谱中的丰富对象。通过在 HTML 中添加 OG 元标签，您可以精确控制内容在社交媒体平台上共享时的显示方式。
如果没有 Open Graph 标签，平台会尝试自动抓取页面内容，通常会产生较差或不正确的预览。结果？图片损坏、标题缺失或无法在拥挤的社交信息流中吸引注意力的通用描述。
该协议在 HTML 的 <head> 部分使用带有 property 属性的元标签，前缀为 og:。这些标签提供社交平台可以可靠解析和显示的结构化数据。
支持 Open Graph 的平台
Open Graph 已成为社交媒体预览的事实标准。支持该协议的主要平台包括：
- Facebook – 原始创建者和主要实施者
- LinkedIn – 使用 OG 标签进行专业内容共享
- Pinterest – 依赖 OG 图片进行图钉预览
- WhatsApp – 在聊天对话中显示丰富预览
- Telegram – 使用 OG 数据显示预览卡片
- Slack – 使用 Open Graph 信息展开链接
- Discord – 从 OG 标签创建嵌入卡片
- iMessage – 在 iOS 设备上生成链接预览
专业提示：使用我们的 Open Graph 检查器在发布前即时验证您的标签在不同平台上的显示效果。
Open Graph 标签如何工作
当有人在社交平台上分享您的 URL 时，平台的爬虫（通常称为"机器人"或"抓取器"）会访问您的页面并在 HTML <head> 部分查找 Open Graph 元标签。这些标签提供有关您内容的结构化信息。
爬虫提取这些数据并使用它来生成预览卡片，也称为"丰富片段"或"链接预览"。此卡片通常包括标题、描述、图片和 URL。
爬取过程
以下是分享链接时幕后发生的事情：
- URL 提交 – 用户在社交平台上粘贴或分享您的 URL
- 爬虫调度 – 平台发送机器人获取您的页面
- HTML 解析 – 机器人读取页面的 HTML 并提取 OG 标签
- 缓存存储 – 平台缓存提取的数据（通常为 24-48 小时）
- 预览生成 – 使用缓存数据呈现预览卡片
- 显示 – 预览出现在用户的信息流或消息中
理解这个过程至关重要，因为它解释了为什么对 OG 标签的更改不会立即出现。大多数平台会积极缓存预览数据以减少服务器负载。
快速提示：更新 OG 标签后，使用平台特定的调试工具强制刷新缓存。我们将在调试部分介绍这些工具。
必需的 Open Graph 标签
四个 OG 标签被认为是正确定义 Open Graph 对象所必需的。虽然没有这些标签的页面仍可能生成预览，但结果是不可预测的，通常质量较差。
以下是您需要的最小实现：
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">og:title
您的内容标题，应在社交媒体预览中显示。这可以说是最重要的标签，因为它是用户首先看到的内容。
最佳实践：
- 保持在 60 个字符以下，以避免在大多数平台上被截断
- 使其引人注目且具有描述性 – 这是您的标题
- 不要包含您的网站名称（使用
og:site_name） - 将重要关键词放在前面以提高可见性
- 测试在 40 个字符处截断时的外观（移动视图）
示例：
<meta property="og:title" content="10 Proven Strategies to Double Your Email Open Rates">og:type
您的页面所代表的内容类型。这有助于平台了解您内容的性质，并可能影响其显示或分类方式。
常见值：
website– 通用网站和着陆页article– 博客文章、新闻文章和编辑内容video.movie– 电影页面和电影内容video.episode– 电视剧集music.song– 单曲music.album– 音乐专辑profile– 个人或企业简介book– 图书页面和文学作品
对于大多数网站和博客文章，您将使用 website 或 article。article 类型启用其他标签，如 article:published_time 和 article:author。
示例：
<meta property="og:type" content="article">og:image
应在预览卡片中显示的图片 URL。这对于参与度至关重要 – 带有图片的帖子比纯文本预览获得更多点击和分享。
要求：
- 必须是绝对 URL（不是相对路径）
- 应通过 HTTPS 提供
- 必须可公开访问（无需身份验证）
- 推荐最小尺寸：1200×630 像素
- 宽高比：1.91:1（横向）在各平台上效果最佳
示例：
<meta property="og:image" content="https://example.com/images/social-preview.jpg">我们将在下面的专门部分深入探讨图片规格和优化。
og:url
页面的规范 URL。这应该是您希望与此内容关联的永久、首选 URL。
最佳实践：
- 使用规范 URL（不带跟踪参数）
- 包含协议（https://）
- 如果有规范链接标签，请与其匹配
- 使用小写以保持一致性
- 不要包含会话 ID 或临时参数
示例：
<meta property="og:url" content="https://example.com/zh/blog/email-marketing-guide">专业提示：og:url 值应与您的规范 URL 匹配。这有助于整合社交信号并防止重复内容问题。使用我们的 元标签生成器确保所有元标签的一致性。
可选的 Open Graph 标签
除了四个必需标签外，Open Graph 还支持许多可选标签，这些标签提供额外的上下文并改善您的内容在社交平台上的显示方式。
og:description
内容的简要描述。这在大多数预览卡片中显示在标题下方。
最佳实践：
- 保持在 150-160 个字符之间以获得最佳显示
- 使其引人注目且可操作
- 自然地包含相关关键词
- 不要重复标题
- 适当时以行动号召结束
示例：
<meta property="og:description" content="Learn proven email marketing strategies that top marketers use to achieve 40%+ open rates. Includes templates and real examples.">og:site_name
您的网站或品牌名称。这与页面标题分开显示，有助于品牌识别。
示例：
<meta property="og:site_name" content="SEO-IO">og:locale
内容的语言和区域格式。如果未指定，默认为 en_US。
示例：
<meta property="og:locale" content="en_GB">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">文章特定标签
当使用 og:type 值为 article 时，您可以包含其他元数据：
<meta property="article:published_time" content="2026-03-31T09:00:00Z">
<meta property="article:modified_time" content="2026-03-31T14:30:00Z">
<meta property="article:author" content="https://example.com/author/john-doe">
<meta property="article:section" content="Email Marketing">
<meta property="article:tag" content="email">
<meta property="article:tag" content="marketing">
<meta property="article:tag" content="conversion">这些标签帮助平台了解您内容的上下文，并可能影响其分类或显示方式。
图片增强标签
提供有关 OG 图片的其他信息：
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Infographic showing email open rate statistics">
<meta property="og:image:type" content="image/jpeg">包含宽度和高度有助于平台在不先下载图片的情况下更快地呈现预览。替代文本提高了可访问性并提供后备上下文。
Twitter Cards 和 X 平台
Twitter（现为 X）在 Open Graph 广泛使用之前开发了自己的元标签系统，称为 Twitter Cards。虽然 Twitter Cards 使用不同的标签名称，但它们的用途与 Open Graph 标签相同。
好消息：如果不存在 Twitter Card 标签，Twitter 会回退到 Open Graph 标签。但是，使用 Twitter 特定标签可以让您更好地控制内容在平台上的显示方式。
Twitter Card 类型
Twitter 支持多种卡片类型，但您主要会使用以下两种：
| 卡片类型 | 用例 | 图片尺寸 |
|---|---|---|
summary |
带有小方形图片的默认卡片 | 1:1 宽高比（例如 400×400） |
summary_large_image |
大图片卡片（推荐用于大多数内容） | 2:1 宽高比（例如 1200×600） |
app |
移动应用推广 | 不定 |
player |
视频或音频内容 | 不定 |
对于大多数网站和博客文章，使用 summary_large_