Open Graph 元标签：你需要了解的一切
Open Graph 元标签就是解决办法。下面是我们某篇文章在带有 Open Graph 元标签时分享到 Facebook 的样子，和不带这些标签时的样子。本指南将介绍什么是 Open Graph 元标签，和 Open Graph 标签的重要性。
你是否想知道，如何让内容在社交媒体上更易被点击、分享和注意到？
Open Graph 元标签就是答案。
这是我们其中一篇文章在带有 Open Graph 元标签时分享到 Facebook 的样子：
而这是它不带这些标签时的样子：
本指南你将了解到：
- 什么是 Open Graph 元标签
- 为什么 Open Graph 标签很重要
- 该用哪些 Open Graph 标签
- 如何设置 Open Graph 标签
- 如何测试和调试 Open Graph 标签
- 如何审计 Open Graph 标签
什么是 Open Graph 元标签？
Open Graph 元标签是一段段代码，用来控制在社交媒体上分享 URL 时的显示方式。
它们属于 Facebook 的 Open Graph 协议，也被其他社交媒体网站使用，包括 LinkedIn 和 Twitter（在没有 Twitter Cards 的情况下）。
你可以在网页的 [['Text', '<head>']] 部分找到它们。任何在属性名前带有 [['Text', 'og:']] 的标签都是 Open Graph 标签。
下面是我们成为 SEO 专家指南中的一些示例：
这些标签在 Facebook 上显示的效果如下：
为什么 Open Graph 标签很重要？
可以说，人们更有可能看到并点击带有优化过的 OG 标签的分享内容，这意味着你的网站能获得更多社交媒体流量。
原因有三：
- 它们让内容在社交媒体信息流中更抓眼球。
- 它们让人一眼就能知道内容讲的是什么。
- 它们帮助 Facebook 理解内容的主题，进而有助于通过搜索提高你的品牌曝光。
最后一点往往容易被忽视，我们再详细说说。
以下是在 Facebook 搜索“alternative search engines”的结果：
它会列出人们已经在 Facebook 上分享过的热门文章。每个标题和图片都来自 Open Graph 标签。
即便搜索没有返回任何文章，Facebook 仍会展示你所关注的群组、主页或好友分享的相关内容。
你应该使用哪些 Open Graph 标签？
Facebook 在其官方文档中列出了 17 个 OG 标签，外加数十种对象类型。我们不打算把这些全部讲一遍。要让 Facebook 理解你页面的基本情况，只有四个是必需的，另外还有几个偶尔会有帮助。
我们逐个来看。
og:title
你页面的标题。
语法
最佳实践
- 把它添加到所有“可分享”的页面。
- 注重准确性、价值和可点击性。
- 保持简短，以免溢出。官方对此没有明确指引，但移动端 40 个字符、桌面端 60 个字符大致是最佳区间。
- 使用原始标题，不要加入品牌信息（例如你的站点名称）。
og:url
内容的 URL。
语法
最佳实践
- 使用规范 URL。它有助于把已发布的所有重复 URL 上的相关数据（比如点赞）整合到一起。
og:image
社交摘要所用图片的 URL。
注意，这可能是最关键的 Open Graph 标签，因为它占用的社交媒体信息流版面最大。
语法
最佳实践
- 为“可分享”页面（例如首页、文章等）使用自定义图片
- 为其余页面使用你的 logo 或任何其他品牌图片。
- 使用比例为 1.91:1、建议最小尺寸为 1200x630 的图片，以便在所有设备上都获得最佳清晰度。
og:type
你要分享的对象类型。（例如 article、website 等）
语法
最佳实践
og:description
对内容的简要描述。
语法
最佳实践
- 与标题互补，让摘要尽可能有吸引力和点击价值。
- 如果合适，可以把你的元描述复制到这里。
- 保持简短精炼。Facebook 建议 2-4 句，但这样常常会被截断。
og:locale
定义内容的语言。
语法
最佳实践
- 仅用于不是美式英语（en_US）撰写的内容。Facebook 会默认没有此标签的内容就是用这种语言写的。
如何设置 Open Graph 标签
从下面的列表中选择你的网站平台，或者按照这些手动操作说明来做。
在 WordPress 中设置 Open Graph 标签
安装 Yoast 的 SEO 插件。进入某篇文章或页面的编辑器，向下滚动，你会看到一个 Yoast SEO 面板。点击“Social（社交）”选项卡，再点击“Facebook”。
在这里填写内容，即可设置 [['Text', 'og:title']]、[['Text', 'og:description']] 和 [['Text', 'og:image']] 标签。
无需手动设置 [['Text', 'og:url']]，Yoast 会帮你处理。它还会添加其他有用的 OG 标签，比如图片尺寸。
设置一个全站通用的 [['Text', 'og:image']] 标签也是最佳实践。当某个被分享的 URL 没有设置自定义标签时，就会显示这个图片。
你可以在 Yoast 的设置里找到这个选项。
Yoast > Social > Facebook
确保开关设置为“Enabled（启用）”，然后上传一张合适的图片。品牌图片在这里效果最好。
在 Shopify 中设置 Open Graph 标签
大多数 Shopify 主题会从变量中提取 OG 标签，比如用你的标题标签作为 [['Text', 'og:title']]，用特色图片作为 [['Text', 'og:image']]。
你能通过 Shopify 界面自定义的唯一标签，就是全站通用的 [['Text', 'og:image']]。
进入 Online Store（在线商店）> Themes（主题）> Customize（自定义）> Theme settings（主题设置）> Customize（自定义）> Social media（社交媒体）> 选择一张合适的图片。
如果你想看看它是怎么设置的，在滚动条中进入 Online Store（在线商店）> Themes（主题）> Actions（操作）> Edit code（编辑代码）> Snippets（代码片段）> social-meta-tags.liquid。如果需要，你可以直接编辑代码。
在 Wix 中设置 Open Graph 标签
Wix 会从其他变量中提取常见的 OG 标签，比如页面的元标题和元描述。
你可以在“Social share（社交分享）”设置中，为每个页面自定义 OG 标题、描述和图片。
你也可以设置一张全站通用的自定义 OG 图片。在主菜单进入 Settings（设置）> Social Share（社交分享）。
整体上，Wix 让添加 OG 标签变得很简单，因为无需硬编码任何东西。
在 Squarespace 中设置 Open Graph 标签
Squarespace 会用页面标题和元描述分别作为 [['Text', 'og:title']] 和 [['Text', 'og:description']]。
你可以逐页设置自定义的 [['Text', 'og:image']]。
只需进入 Page Settings（页面设置）> Social Image（社交图片）> Upload（上传）。
如果你需要添加其他 OG 标签并自定义默认设置，进入 Page Settings（页面设置）> Advanced（高级）> Page Header Code Injection（页面头部代码注入）。阅读下一节有关手动添加标签的内容，把代码复制粘贴到那里。
手动设置 Open Graph 标签
如果你乐于钻研网站代码，那么添加 OG 标签就简单到只需把它们粘贴到网页的 [['Text', '<head>']] 部分。
可以考虑使用 Mega Tags 或 Web Code Tools 这类标记生成工具，帮助减少语法错误。
如何测试和调试 Open Graph 标签
既然你已经部署好了所有标签，就需要确保它们按预期正常工作，并已准备好被分享。
为此，请使用以下工具：
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
它们的用法都一样：从页面提取标签，并展示分享时的显示效果。
测试还有助于避免 OG 标签无法显示或提取不正确等问题。
下面是 FB 分享调试器实际运行时的样子：
最重要的是摘要的显示效果。如果你漏掉或错误设置了不太重要的标签，问题不大。你可以忽略有关 [['Text', 'fb:app_id']] 这类不重要标签的警告
如果发现哪里不对并更新了标签，就点击“Scrape Again（重新抓取）”按钮来拉取最新数据。如果抓取后仍未看到变化，就用 Batch Invalidator（批量缓存失效工具）清除缓存，然后重试。
对 Twitter Card Validator 和 LinkedIn Post Inspector 重复这一流程，确保你的内容在所有平台上都按预期显示。
如何审计 Open Graph 标签
如果你已有一个包含数百个页面的网站，又不确定哪些页面已经有了 Open Graph 标签，可以使用 Ahrefs 的 Site Audit 这类工具批量检查。
只需运行一次抓取，然后进入 Social tags（社交标签）报告，查看所有与 Open Graph 和 Twitter Card 标签相关的问题。
点击某个被标记的警告，即可查看说明和修复建议。
点击“View affected URLs（查看受影响的 URL）”，你就会看到每个 URL 受到哪些问题影响和相关指标。其中一个指标是自然流量，你可以用它来对表格排序，进而确定修复 URL 的优先级。
记住，流量大的页面最有可能被分享。
写在最后
OG 标签对你的社交媒体表现很重要，但没必要在上面花太多时间。
把基础做好就行：添加标签、检查社交媒体预览，然后调试。
我们有遗漏什么吗？欢迎留言，或在 Twitter 上找我。