使用Facebook调试器修复WordPress图片显示问题

当您是博主、社交媒体营销人员或小企业主时，您可能会遇到Facebook无法正确显示WordPress网站图像的困扰。有时Facebook会拉取旧图像，甚至更糟糕的情况是根本没有图像。幸运的是，Facebook Debugger（Facebook调试器）这个强大工具可以帮助您轻松解决这些问题。下面将介绍您可能遇到的一些常见情况以及相应的解决方法。

Facebook如何获取信息
每当您在WordPress上分享内容时，Facebook会将图像缓存在其服务器和CDN上。这与您在站点上缓存图像的原理类似，有时需要清除缓存才能让事情恢复正常。Facebook有时也会出现这种情况。如果您在网站上进行了更新，但Facebook仍然显示旧图像，那是因为它不会获取新信息，而是提供已经缓存的信息。关于链接和内容本身的信息也是如此。Facebook通过获取所谓的开放图谱元标签来了解您分享的内容。根据Facebook的说法，Open Graph协议使任何网页都能够成为社交图中的丰富对象。这些标签（代码）用于告诉Facebook有关您分享内容的信息。

不确定您是否在网站上使用Open Graph元标签？如果您使用的是流行的插件，如Yoast SEO或Social Warfare，它们实际上会在幕后自动为您添加这些标签。这些插件通常适用于面向海外用户的WordPress网站。让我们以其中一个页面为例。如果我们查看该文章的源代码，可以看到以下有关Open Graph的数据。Open Graph使用不同的属性，例如og:title，但我们真正关心的属性是og:image。这是Facebook查看的代码，用于确定要显示的特色图片、标题和描述。

使用Facebook调试器
Facebook Debugger工具旨在帮助您解决Open Graph元标签的问题以及缓存问题。您可以在Facebook开发人员网站的工具和支持部分找到Facebook调试器。如果您经常在Facebook上分享大量内容，这是一个值得收藏的书签链接。

Facebook调试器工具
要抓取文章，只需输入URL并单击“调试”。我们以一个实时案例为例，最近我们更新了网站速度优化文章中的图片。当我们将其输入Facebook Debugger时，它会首先拉出他们的缓存信息。这是人们在分享我们的文章时实际看到的。在这种情况下，它从我们更新文章之前提取旧图像。我们还可以看到og:image是旧文件名。

所以，我们能做些什么？有两件事需要做。请按照以下步骤操作。

第1步 – 清除该URL的WordPress缓存
为了确保Facebook获取最新信息，我们需要做的第一件事就是清除我们WordPress网站本身的缓存。没错，这里可能涉及两层缓存。如果旧图像仍然缓存在您的网站上，Facebook调试器将无法帮助解决您的问题，因为它只会重新获取缓存的信息。使用不同的缓存解决方案或第三方插件，您需要查看他们的文档以确保您知道如何清除URL的缓存。以下是一些流行的缓存解决方案的链接：

使用WP Rocket清除特定页面/文章上的缓存
使用Cache Enabler清除特定页面/文章上的缓存
使用WP Fastest Cache清除特定页面/文章上的缓存

如果所有其他方法都失败了，您可以随时清除整个WordPress网站上的缓存。但是，出于性能原因，通常不建议这样做，因为您的站点必须重建缓存，同时降低加载时间。如果您仍然遇到问题，您的图像也可以缓存在您的CDN上。在这种情况下，您可能需要清除CDN缓存。

第2步 – 在Facebook调试器中再次抓取
现在已清除相关帖子或页面的缓存，我们需要在Facebook调试器工具中再次抓取它。所以我们输入URL并点击“重新获取”按钮。您可能会遇到警告。根据我们的经验，这些并不总是最准确的。例如，我们看到一条警告，指出我们的图像超过了8 MB的最大大小或服务器响应速度太慢。首先，我们的图像远不及那个大小，实际上只有160.63 KB。其次，我们的服务器闪电般快速，整个页面本身在1秒内加载。

所以这就是我们第二次点击“重新抓取”按钮的地方。是的，这听起来可能很奇怪。但很多时候你可能需要点击两次。只需要几秒钟。现在你可以看到它现在正在提取我们的新特色图像，如果我们查看og:image属性，它确实是新文件名。请务必注意，这不会更新已分享的Facebook帖子的图像。这只会影响您或其他人事后分享的帖子。

其他Facebook调试器提示
您可以使用Facebook Debugger工具不仅更新旧图像，还可以更新您在Facebook帖子中看到的内容（文本）。标题和描述都是开放图谱元标签。因此，如果您需要改写某些内容，请在WordPress中进行更新，然后按照上述完全相同的步骤进行操作。

提供的“og:image”属性尚不可用
此外，仅仅因为我们忽略了上面的警告并不意味着它们并不总是有用。事实上，当涉及到您应该使用的图像时，有推荐的尺寸。否则，可能会发生不好的事情。例如根本没有显示的图像（如下面的警告所示）。

提供的 ‘og:image’ 属性尚不可用，因为新图像是异步处理的。为确保新URL的分享包含图像，请使用“og:image:width”和“og:image:height”标签指定尺寸。

Facebook调试器 – 图片太小
发生上述情况是因为我们的图像太小了。Facebook要求的最小图像尺寸为200 x 200像素。对于Facebook图片，通常越大越好。1,200 x 630像素似乎最适合大多数人。放大也可以，实际上我们在第一个示例中的帖子中的图像是1460 x 730。请记住，Facebook会裁剪更大的任何内容，因此保持纵横比是最重要的部分之一。

如果您使用的是Yoast SEO之类的插件，也可以建议手动设置图像。也许您的WordPress主题上的特色图片具有不同的纵横比或大小。或者你甚至不使用特色图片！在这种情况下，Yoast SEO插件允许您为Facebook手动上传不同大小的图像，这些图像将填充那些Open Graph Meta标签。如果需要，您还可以手动设置标题和描述。

Yoast SEO Facebook社交框
缺少以下必需的属性：fb:app_id
您可能还会看到以下有关缺少Facebook应用ID的警告。请务必注意，这不会以任何方式干扰在Facebook上分享帖子的能力。很多时候这可以简单地忽略。但是，它确实限制了您使用Facebook Insights数据的能力。

如果您需要额外的洞察数据，则需要将您的Facebook应用ID添加到您的网站。以下是有关如何使用Yoast SEO插件将其添加到WordPress的说明。

创建您的Facebook应用程序：https://developers.facebook.com/docs/apps/register（这是完全免费的）
从应用仪表板复制您的Facebook应用ID。
在您的WordPress仪表盘中，单击左侧的“SEO”。
在“Facebook”选项卡下，您可以输入您的Facebook应用ID。

添加Facebook应用ID
在Facebook调试器工具中重新测试之前，请务必清除您网站的缓存。

小结
希望您对Facebook Debugger工具以及如何使用它对WordPress网站上的图像进行故障排除和修复有更多的了解。记得清除所有缓存层，然后刮掉。您的新图片应该会正确显示，以便所有人在Facebook上分享。

文章网址：https://www.wpbull.com/jiqiao/10075.html