如何用 Open Graph 标签提升社交互动
Open Graph 元标签会影响你的内容在社交媒体平台上的展示方式。本文说明如何设置它们。
什么是 Open Graph？
Open Graph 标签是你添加到网页上的一些代码片段，用来定义你的内容在用户于某些社交媒体网站上分享时如何呈现。
OG 元标签属于 Open Graph 协议，Facebook 创建该协议是为了规范从网页提取元数据并显示在其信息流中的方式。
例如，看看这条分享到 Facebook 上、带有 Open Graph 图片标签的博客文章：
与这条没有 OG 图片标签的帖子对比：
第一条帖子在视觉上更吸引人，并提供了有关所分享内容的额外细节。
OG 标签让你能更好地控制内容在 Facebook、LinkedIn、X（原名 Twitter）和 Pinterest 等网站上被分享时的样子。
它们放在网页的 head 部分。就像这样：
我们会在本文后面介绍如何添加它们。
Open Graph 元标签为什么重要？
Open Graph 元标签能为你的页面创建吸引人且信息丰富的预览，这可以改善互动、展示和反应等社交媒体指标。
一项 2024 年 INMA 研究显示，带图片的 Facebook 帖子比不带图片的帖子互动量高 100%、展示量高 114%。
Open Graph 标签的其他好处可能包括：
- 更高的点击率（CTR）：链接预览更诱人点击，进而可能为你的网站带来更多引荐流量
- 更多分享：人们更有可能分享带链接预览的内容
- 更强的品牌塑造：丰富的预览有助于在各社交平台上保持一致、统一的品牌调性
- 更专业的外观：缺少标签会让你的品牌显得疏于打理
- 间接的 SEO 好处：更多的点击和分享可以带来反向链接和用户互动，进而使 SEO 受益
Open Graph 类型：必需标签与可选标签
Open Graph 标签能丰富社交媒体平台显示你页面预览的方式。有些标签是必需的，其他则是可选的。本节提供标准代码片段、最佳实践和示例。
必需标签
使用 Open Graph 协议的社交媒体网站必须存在以下标签，才能显示丰富的预览。
og:title
og:title 标签为你的内容指定一个标题，向用户展示你的页面是有关什么的。
最佳实践：
- 与网页内容保持一致
- 用描述性文字鼓励点击
- 标题控制在 55-60 个字符之间，以避免被截断
- 使用首字母大写或句首大写，但避免全部大写
示例：
og:image
og:image 为你的预览添加一张图片，它会占据很大的视觉空间，进而可能增加点击。
最佳实践：
- 对大多数社交媒体平台使用 1200 x 630 像素的图片
- 使用 JPEG 或 PNG 格式
- 确保你的 OG 社交图片与页面内容一致
- 使用高分辨率图片
示例：
og:url
og:url 是你页面的统一资源定位符（URL），它告诉社交媒体网站从哪里提取内容。
最佳实践：
- 使用精确的 URL。
- 对任何重复页面，使用规范 URL，这能确保社交媒体网站即使在其他页面版本被分享时，也能访问到正确的元属性
示例：
og:type
og:type 描述内容的类型，应匹配以下对象类型中的某个值：
- Website
- Article
- Book
- Profile
- Video
- Music
最佳实践：
- 选择与页面内容匹配的 OG 类型。如果你有多个内容类型（例如一篇同时有图片和视频的博客文章），就选择主要的那一个
- 使用正确的对应对象类型值
示例：
可选标签
这些标签不是必需的，但它们能改善社交媒体网站显示你内容的方式。
og:description
og:description 标签为你的内容提供一段简短摘要，以促使用户点击。
最佳实践：
- 让你的描述简洁、准确且有吸引力
- 使用少于 120 个字符，以防被截断
- 避免重复 og:title
示例：
og:site_name
og:site_name 标签列出与该内容关联的网站、企业或品牌。
最佳实践：
- 核对拼写并与你的品牌保持一致
- 如果你的品牌名已出现在 og:title 中，避免重复
示例：
og:locale
og:locale 标签指定你内容的语言和国家/地区，以便社交媒体网站对其归类。
最佳实践：
- 使用正确的语言和国家/地区代码
- 确认正确的顺序（即 language_country）
- 对额外的地区或语言使用 og:local:alternate
示例：
如何设置 OG 标签
以下是在几个主流内容管理系统上添加 Open Graph 标签的方法。
在 WordPress 中
在 WordPress 中，你可以通过各种插件添加 Open Graph 标签，但我们推荐 Yoast SEO。
要访问并使用该插件来设置 Open Graph，请按以下步骤操作：
- 登录你的 WordPress 账户
- 前往“Plugins”（插件），搜索“Yoast SEO”（需要高级版）
- 安装并激活该插件
- 前往“Yoast SEO”>“Settings”（设置）
- 滑动 Open Graph 功能下方的开关以启用它
- 使用插件中的“Social”（社交）标签页为各个页面自定义标签
在 Wix 中
Wix 会根据你网站的数据和 Open Graph 最佳实践，默认给你的页面添加 Open Graph 标签。
要自定义它们，请按以下步骤操作：
- 登录你的 Wix 账户
- 前往仪表盘中的“Search Engine Optimization (SEO)”（搜索引擎优化）
- 点击“SEO Settings”（SEO 设置）
- 选择你想编辑的页面类型（即博客文章、产品页面等）
- 点击“SEO basics & social share”（SEO 基础与社交分享）旁边的“Edit”（编辑）
- 向下滚动到“Social share”（社交分享），应用你的自定义标签
在 Squarespace 中
Squarespace 会添加必要的 OG 类型，但你可以逐个页面地自定义。
方法如下：
- 登录你的 Squarespace 账户
- 将鼠标悬停在要编辑的页面上，点击“Menu”（菜单）旁边的齿轮图标
- 点击“Advanced”（高级）
- 把你的 OG 标签复制并粘贴到“Page Header Code Injection”（页面头部代码注入）中
- 点击“Save”（保存）
如何检查你的 OG 元标签
面向 Facebook
使用 Facebook 的 Sharing Debugger 工具来测试你的 OG 标签。
插入页面 URL 并点击“Debug”（调试）。任何问题都会出现在“Warnings That Should Be Fixed”（应修复的警告）下。
向下滚动到“Link Preview”（链接预览）板块，看看你的帖子会是什么样子。
面向 LinkedIn
使用 LinkedIn 的 Post Inspector 来检查你的 OG 标签。
输入你的页面 URL 并点击“Inspect”（检查）。查看链接预览，看看是否有任何缺失或可以改进的地方。
面向 X
X 的卡片验证器不再提供链接预览，所以请使用 Tweet Composer 来检查你的内容会如何呈现。
审计你的 Open Graph 标签
使用 Site Audit 来确认你的 OG 标签是否存在且设置正确。
要检查你网站上有哪些页面带有 OG 标签，请运行一次网站审计。然后，点击“Markup”（标记）报告下的“View details”（查看详情）。
找到“Pages by Markup Type”（按标记类型划分的页面）板块，寻找“Open graph”。蓝色的数字显示有多少页面带有 OG 标签。点击可查看完整列表。
点击“Markup”（标记）列中的“# types”（多少个类型），通过绿色对勾查看你是否正确实现了 Open Graph 元标签。
