og：图像不起作用，除非我尝试使用“打开图形对象调试器”答案

【问题标题】：og:image not working, except when I try with "Open Graph Object Debugger"og：图像不起作用，除非我尝试使用“打开图形对象调试器”
【发布时间】：2015-04-17 09:39:12
【问题描述】：

我有一个正确设置了所有og:image 标签的网站，但它无法正常工作，除非我使用 Open Graph Object Debugger，它显示了预期的预览。

一步一步（每一步都有一张图片）：

如果我采用非缓存 URL，例如... http://club.ad/andorra-la-vella/ca/activitat/activitats-infantils 我尝试在 facebook 上分享它，这就是我得到的：

如您所见，预览中没有显示图像。在这种情况下，我要做的第一件事是检查og:image 是否设置正确。检查该链接的源代码，我们可以阅读：

<meta property="og:image" content="http://club.ad/files/thumbs/activities-illustrative/10557110_m.jpg" />

如果我们检查图像 URL，我们会得到：

activity's illustrative image http://club.ad/files/thumbs/activities-illustrative/10557110_m.jpg

og:image 标签在 head 标签内，所以一切似乎都正常。这是我去 Facebook 的 Open Graph Object Debugger 并尝试之前检查的链接的时候。

第一次说那个 URL 没有被缓存，但是它很好地显示了预览：

现在请求已经从这里完成，如果我回到 facebook，预览就会正确加载：

如果我们再次返回 Open Graph Object Debugger 并单击“获取新的抓取信息”，则不会显示错误或警告：

那么，我的网站出了什么问题？或者脸书有什么问题？

如果您想自己检查，请从网站的活动索引中获取任何 URL（其中一些已检查，因此将返回缓存的内容）：

http://club.ad/andorra-la-vella/ca/activitats（点击任意活动图片）

提前感谢您提供的任何帮助:)

【问题讨论】：

尝试在您的 OG 元标记中指定图像尺寸。 developers.facebook.com/docs/sharing/best-practices#precaching
@CBroe 你也是对的。定义og:image:width 和og:image:height 不需要放置两次链接。如果您将此添加为答案，我会给您一个赞成票；）

标签： facebook image debugging facebook-graph-api

【解决方案1】：

尝试在您的 OG 元标记中指定图像尺寸。

https://developers.facebook.com/docs/sharing/best-practices#precaching:

有两种方法可以避免 [第一次分享时未显示图像] 并在第一次点赞或分享操作时呈现图像：

使用 URL 调试器预缓存图像 […]

使用 og:image:width 和 og:image:height 打开图形标签
使用这些标签会将图像指定给爬虫，以便它可以立即呈现它而无需异步。（原文如此）

【讨论】：

【解决方案2】：

发件人：http://developers.facebook.com/docs/sharing/best-practices#precaching

第一次分享内容时，Facebook 爬虫会从共享的 URL 中抓取并缓存元数据。爬虫必须在渲染之前至少查看一次图像。这意味着第一个分享内容的人不会看到渲染的图片：

我使用此脚本在用户共享页面之前更新 facebook 缓存：

<script>
        var fbShareLink = '<yourLink>';
        var d = new Date();
        $.post(
            'https://graph.facebook.com',
            {
                id: fbShareLink,
                scrape: true
            },
            function(response){
                console.log(response);
            }
        );
</script>

目前我每次加载页面时都会这样做，因为我的图像是实时渲染的并且包含当前时间。

对于静态图像可能有更好的解决方案。（添加新内容时从后端调用 facebook）

【讨论】：