使用 Open Graph 规范社交分享的外观

Open Graph (OG) 是一个系统，Facebook、LinkedIn、Twitter 等社交平台利用该系统在您分享您网站的网址时从这些平台上提取数据。您可以通过 Open Graph 设置定义您网站的链接预览中显示的信息。 

要记住的关键点： 如果您尚未配置 Open Graph 设置，则在社交媒体上分享您的网站时将显示随机内容（或无内容）。 

本指南将教您： 

1. 设置 Open Graph 标签
2. 排列动态 Open Graph 标签
3. 测试并纠正 Open Graph 设置
4. 解决 Open Graph 图像缺失的问题

如何建立 Open Graph 标签

在 Webflow 中，你可以定义 3 个 Open Graph 标签： 

• 打开图谱标题 — 当页面 URL 被共享时，显示为页面标题的文本
• Open Graph 描述 — 出现在标题下方并提供页面内容大纲的文本表示
• 打开图谱图像 — 在标题和描述上方展示的图片

有用提示： 当 Open Graph 内容针对要共享的特定页面进行量身定制时，效果会最好。例如，您主页的 Open Graph 内容应与定价页面的内容不同。Open Graph 标签不能全局应用，并且仅适用于指定页面 — 因此，建议为每个页面设置 Open Graph 标签。

您可以通过以下方式访问和调整页面的 Open Graph 设置： 页面面板 > 页面设置 > 打开图表设置.

专业提示： 在已激活本地化的网站上，您可以本地化页面级 Open Graph 设置。了解有关本地化 Open Graph 设置的更多信息。 

Open Graph 标题和说明 

您可以手动输入 Open Graph 标题和描述，或者通过勾选每个 Open Graph 字段下方的复选框从 SEO 标题和元描述中检索它们。 

打开图谱图像

要指定 Open Graph 图像，请提供图像的直接链接（即以图像的文件名和扩展名结尾的 URL）。 

要使用 Open Graph 图像字段中资产面板中的图像： 

1. 将鼠标悬停在 资源面板
2. 点击设置“齿轮”图标出现
3. 右键单击“关联”图标，位于资产详细信息菜单中
4. 复制链接 
5. 将链接粘贴到 打开图谱图像 场地

发现更多： 优化图像以增强网站预览

如何配置动态 Open Graph 标签

在“合集”页面上，您可以建立一个模板，合集中的所有页面都将遵循该模板来获取 Open Graph 详细信息。这样，您无需手动设置每个合集项目的 Open Graph 标题，合集中的所有项目都将根据设置的模板自动生成其 Open Graph 标题、说明和图片。例如，对于博客文章合集，您可以使用动态数据从 Open Graph 设置中的文章名称或标题合集字段中提取内容。

与静态页面类似，您可以通过导航到 页面面板 > 页面设置 > 打开图表设置. 

Open Graph 标题和说明 

要使用来自 Collection 字段的动态数据预加载 Open Graph 标题和描述字段，请点击 添加字段. 

您还可以手动输入 Open Graph 标题和说明，或者通过选择每个 Open Graph 字段下方的 checkboxes 从 SEO 标题和元描述中获取 Open Graph 标题和说明。  

打开图谱图像

要在 Collection 页面上分配 Open Graph 图像，请选择 打开图谱图像 下拉列表并选择一个 图像 您的收藏中的图像字段（例如主图像、缩略图等）。如果您的收藏中没有图像字段，您将无法指定 Open Graph 图像。

注意： 集合中的所有 Open Graph 图像必须具有相同的尺寸。 

如何检查和纠正 Open Graph 设置

在分享链接之前预览它们可能会有所帮助，以了解它们将如何显示于社交媒体平台上，或者如果链接预览中出现过时的数据，则更新您的 Open Graph 内容。

一些流行的社交媒体平台提供了自己的工具来预览、调试和刷新 Open Graph 数据： 

• Facebook
• LinkedIn
• 推特

注意： Pinterest 和 Instagram 缺乏专门用于验证 Open Graph 数据的工具。Facebook 的调试器工具可用于检查您的网站在这些平台上的潜在显示效果。访问 Facebook 调试器需要您登录 Facebook。

Facebook 

Facebook 提供了自己的调试工具，允许您抓取（即索引）您的链接并检索最新的 Open Graph 数据。 

要使用 Facebook 调试器，请插入您的链接并点击 调试。如果显示的数据因更改 Open Graph 设置而过时，请选择 再次刮擦 刷新数据。 

注意： 访问 Facebook 调试器需要您登录 Facebook。

LinkedIn

LinkedIn 的 Post Inspector 使您能够请求重新抓取您的链接，查看 LinkedIn 上次更新链接预览的时间，并解决与您的 Open Graph 数据相关的问题。 

要使用 LinkedIn Post Inspector，请插入您的链接并点击 检查。您可以点击某个属性（例如，标题、类型、图像等）来深入了解 LinkedIn 如何选择该值。 

注意： 访问 LinkedIn Post Inspector 需要您登录 LinkedIn。 

推特

Twitter 的卡片验证器提供了包含有关链接的 Open Graph 数据的调试信息的日志。要使用 Twitter 卡片验证器，请插入您的链接并点击 预览卡. 

Twitter 不再在卡片验证器中显示您的链接预览。要查看您的链接在 Twitter 上分享时的外观，请撰写推文并插入您的链接。 

注意： 要访问 Twitter 上的卡片验证器和推文编写器，您需要登录您的 Twitter 帐户。

如何解决 Open Graph 图像缺失的问题

在 Facebook 上分享您网站的链接时，您可能会发现链接预览仅包含标题和描述，而 Open Graph 设置中设置的图像却不存在。 

这通常发生在页面共享并首次生成预览时，但可以通过删除并重新添加帖子中的链接来解决此问题。但是，采用一些最佳做法可以防止出现此问题： 

1. 保持网站上所有 Open Graph 图片的统一尺寸。Facebook 建议使用宽度至少为 1080 像素的图片。查看 Facebook 的图片共享建议。 
2. 通过 Facebook 调试工具运行链接来预缓存您的图片。这也应该在更新 Open Graph 图片后完成。 
3. 利用 Open Graph 标签向网络爬虫指定图片的尺寸。这有助于网络爬虫立即呈现图片，而无需异步下载和处理。将以下代码片段插入 站点设置 > 自定义代码 标签 > 头代码 部分，改变宽度和高度值以匹配您网站上图像的像素值（假设所有 Open Graph 图像的尺寸一致）： 

了解有关在网站的 head 和 body 标签中实现自定义代码的更多信息。 

要记住的有用提示： 如果你在网站上使用不同尺寸的 Open Graph 图像，请将上述代码片段插入 页面面板 > 页面设置 > 里面标签 而不是在您的站点设置中。集合中的每个 Open Graph 图像必须保持相同的尺寸。