使用Open Graph控制社交分享的外观

Open Graph (OG)是Facebook、Twitter、Pinterest等社交网络使用的一种技术，当你在这些服务上的任何帖子中添加网站的URL时，它可以用来从你的网站提取数据。通过设置打开图设置对于您的页面，您可以指定当有人共享您的页面时，您希望显示页面中的哪些信息。

在这节课中

1. 访问页面的Open Graph设置
2. Open Graph设置
3. 设置动态打开图形设置
4. 测试Open Graph设置
5. 更新Open Graph设置更改
6. 故障排除缺失的图片

访问页面的Open Graph设置

你可以设置打开图设置的任何或所有页面的页面设置你的每一页。

• 页面面板>页面设置>打开图形设置

Open Graph设置

在Webflow中，你可以设置三个OG标签:

• 打开图标题-共享时显示为页面标题的文本。
• 打开图形描述-显示在标题下的文本，为人们提供共享页面内容的描述。
• 开放的图形图像-显示在标题和描述上面的图像。

您还可以将Open Graph标题和描述与您的SEO标题和元描述通过单击每个Open Graph字段下面的复选框。

很高兴知道

• Open Graph内容在特定于被共享的页面时工作得最好。例如，你的主页的Open Graph内容应该与你的定价页面的内容不同。这就是为什么没有全局设置OG设置的选项。
• 因为，打开图形设置适用只有到已设置设置的页面。因此，一定要为每个页面设置Open Graph设置。

当一个页面在社交媒体上被分享时，URL会被转换成一个富卡，从你的Open Graph设置中提取数据。

需要知道
如果你没有设置你的OG设置，当你在社交媒体上分享时，随机的内容(有时没有内容)会从你的网站上删除。

开放的图形图像

控件中任何图像的URL都可以添加开放的图形图像．URL必须是一个直接链接，即它以带有扩展名的文件名结束。

重要的
只使用你有权使用和分享的图片。

最佳实践

• 您可以将想要用作OG映像的映像上传到资产面板．
• 控件中图像的URL资产面板，单击鼠标悬停在图片上时出现的“设置”图标资产面板，然后通过右键单击资产名称旁边的链接图标获取URL资产详细信息菜单并复制链接。

• 了解如何优化图片，以在共享页面时生成更好的预览。

设置动态打开图形设置

为收藏页面，您将定义一个模式，集合中的所有页面将用于它们的Open Graph信息。这样，所有集合项将根据您定义的模式自动生成它们的Open Graph标题、描述和图像。

您可以在集合模板页的设置中编辑这些信息，就像您对静态页面所做的一样。

Collection Template页面如此强大的原因是它能够为每个Collection项拉入唯一的信息。因此，您可以让Webflow从您的文章的名称或标题字段中提取内容，而不是手动为每个博客文章编写Open Graph标题。

测试Open Graph设置

有时，当你在社交媒体上分享你的内容时，你会注意到你的Open Graph信息中有一个拼写错误，或者图像以一种奇怪的方式裁剪，或者你更新了你的设置，但旧的数据仍然被提取。

测试在共享内容时是否显示正确的信息。

1. 将你网站的链接粘贴到Facebook的邮箱中
2. 仔细检查显示的内容

如果有任何问题，请阅读如何操作更新Open Graph设置在下面。

更新Open Graph设置更改

修复Open Graph问题或更新OG数据:

1. 回到Webflow中的页面设置，检查所有信息是否正确
2. 修复任何不正确的地方。保存页面设置并发布站点。
3. 将链接粘贴到Facebook的调试器，调试，然后再次刮取数据。

故障排除缺失的图片

有时，你可能会注意到，当你在Facebook上分享一个链接时，generate rich card中只出现标题和描述。您在OG设置中设置的图像丢失了。这通常发生在第一次共享页面时。甚至在你提交邮件之前。如果您取消该帖子并再次尝试，在第二次尝试共享相同的URL时，图像将出现在富卡中。发生这种情况的原因，Facebook在他们的共享页面的最佳实践．

您可以通过指定图像尺寸来防止这种情况的发生，这样爬虫就可以立即呈现图像，而不必每次都下载和处理它。这样做:

1. 确保你网站上的所有图片使用相同的图片尺寸(阅读关于理想图像大小的最佳实践）
2. 中添加以下代码段网站的头部部分：

• <元属性=“噩:形象:宽度”内容= " 1200 " >
• <元属性=“噩:形象:高度”内容= " 630 " >

将宽度和高度的内容值替换为站点上图像的像素值。

很高兴知道

• 如果您想为不同的页面使用不同的图像大小，您可以在页面自定义代码的头部部分．
• 集合的所有图像必须具有相同的尺寸。