如何自定义 Facebook Open Graph 和 Twitter Card Meta 标签

已发表: 2023-03-11

想象一下：您已经准备好了完美的博客文章和引人注目的特色图片。 但是当你在 Facebook 或 Twitter 上分享它时，图像会在错误的地方被裁剪。 更糟糕的是，要么没有图像，要么图像太小以至于很容易滚动过去，从而完全错过了帖子。 在我们博客之旅的某个时刻，我们都去过那里。

尺寸不佳的图像不仅会淡化您试图传递给关注者的信息，还会降低帖子的可分享性。 如果您的内容没有附有针对相关平台优化的相关特色图片，即使是您最狂热的粉丝也会犹豫是否要分享您的内容（无论内容多么丰富）。

毫无疑问，一张图片胜过一千个字，但如果你不积极寻求控制你的社交媒体图片，这些图片可能会被证明是错误的词。 那么，您如何才能避免这个陷阱并优化您的博客图像以进行社交分享呢？

Open Graph 和 Twitter Card 元标签是解决这个问题的方法。

什么是开放图谱和 Twitter 卡片元标签？

Facebook 于 2010 年推出的 Open Graph 标签是一组元标签，用于通过允许您（内容发布者）控制在您分享您的内容时显示的元素，使任何网页成为社交图中的丰富对象Facebook 上的页面。 自推出以来，LinkedIn 和 Pinterest 也采用了 Open Graph 协议。 Twitter 使用一种采用 Twitter Cards 的协议，它在功能上类似于 Facebook 的 Open Graph。

如果您访问启用了 Open Graph 和 Twitter Cards 的站点并查看内容来源，则元标记可能如下例所示（“内容”信息被适当替换）：

facebook-open-graph-twitter-card-source

如果包含，Open Graph 和 Twitter Card 标签不会直接影响页面的 SEO，但它们会影响页面在社交平台上的显示方式，更重要的是，当他们的页面被分享到任何人的社交媒体。

如何在您的 WordPress 网站上实施 Open Graph 和 Twitter Card 标签

到目前为止，一切都很好。 但接下来出现的问题是如何操纵 Open Graph 和 Twitter Card 元标记，以便为您的帖子在社交媒体上获得最佳显示效果。 好消息是有几个插件可供选择来实现这些元标记。 在本文中，我将主要关注 Yoast SEO 插件的高级元标记功能，但随后我将讨论您可以使用它的其他几种方法。

用于 WordPress 的 Yoast SEO

如果您还没有在您的 WordPress 网站上安装高级版 Yoast SEO，这是优化社交博客图片的第一步。 这个插件使得添加 Facebook Open Graph 和 Twitter Card 元标签变得非常容易。 这是有关如何使用 Yoast SEO 插件启用社交元标记的分步指南。

1.设置Yoast SEO

从 WordPress 网站的仪表板导航到 Yoast SEO 插件的“社交”选项卡。 在“帐户”选项卡上填写与您网站的社交媒体平台相关的详细信息。

yost-seo-社交账户设置

在“Facebook”选项卡上启用 Open Graph 元数据，并根据页面要求填写其他相关详细信息。

yoast-seo-facebook-设置

在“推特”选项卡启用推特卡片元数据，并根据页面要求填写相关信息。

注意：最好为 Twitter 使用“带有大图像的摘要”，因为带有大图像的推文比带有小图像或没有图像的推文更吸引人。 那么您的推文将如下所示：

推特摘要图像示例

完成这些步骤后，Facebook Open Graph 和 Twitter Card 元标记将在您的所有帖子上启用。 （这是一次性设置！）

然而，将由这些标签选择用于社交分享的图像仍然不会针对相关平台进行独特定制。 为此，您需要对希望分享的各个帖子执行额外的步骤。 （这是您需要为每篇新博文重复的步骤）。

2. 选择特定图片分享到 Facebook 和 Twitter

当您向下滚动到新创建的帖子（或任何处于编辑模式的帖子）的 Yoast SEO 部分时，Yoast SEO 部分的第二个选项卡允许您选择社交共享详细信息。 您可以使用此选项卡编辑 Facebook 和 Twitter 的图像、标题、描述等。

yoast-seo-blog-edit-settings

就是这样！ 只需记住几件事：

  1. Yoast 建议 Facebook 的特色图片大小为1200px x 630px ，Twitter 的特色图片大小为 1024px x 512px 。 通过反复试验，我发现任何宽高比为 2:1 且宽度大于 450px 的水平图像都适用于 Facebook 和 Twitter。 有关社交媒体规模的更多信息，请查看 Sprout Social 的指南和 Buffer 的这些指南。
  2. 如果您在之前至少分享过一次帖子链接后要追溯更改 Facebook 的特色图片，则必须通过 Facebook Sharing Debugger 运行您的 URL，以便刷新旧的缓存信息并获取新的缓存信息从那时起特色图片。

其他用于优化社交媒体图像的 WordPress 插件

如果您没有使用 Yoast SEO 插件，那么还有其他 WordPress 插件可以帮助您完成工作。 您可以根据自己的喜好和站点兼容性选择以下几个其他插件选项：

  • Facebook
  • 多合一 SEO 包
  • Facebook Open Graph、Google+ 和 Twitter Card 标签
  • 打开图

如何使用 PHP 手动将 Open Graph 和 Twitter Card 元数据添加到您的 WordPress 主题

最后，如果您正在寻找精通技术的解决方案而不是插件，您始终可以选择直接将元标记添加到您的 WordPress 主题，方法是手动将必要的 PHP 代码包含到主题的 function.php 文件中。 以下是有关如何使用分步说明执行此操作的一些链接：

  • 如何在 WordPress 主题中添加 Facebook Open Graph 元数据
  • 如何将 Open Graph 元标记添加到 WordPress
  • functions.php 代码以包含 Open Graph 元标记

请注意：您可能需要自定义上面提供的参考代码以适合您特定网站的主题设计。

一旦您了解了将社交媒体帖子串在一起的元标记，您就可以立即在您的 WordPress 网站上启动并运行它们。 投资回报率呢？ 那么，您的帖子在社交媒体上的表现会更好，而且您可以更好地控制它们的显示方式和传达的内容，从而使它们既有意义又可分享。