og：图像不工作，除非我尝试使用＆＃34;打开图形对象调试器＆＃34;

Question

我有一个网站，其中所有og:image代码都已正确设置，但它不起作用，除非我使用Open Graph Object Debugger，它会显示预期的预览。

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

如果我使用非缓存的网址，例如...... 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" />

如果我们检查图片网址，我们就会知道：

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并点击“获取新的scrape信息”，则不会显示错误或警告：

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

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

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

提前感谢您提供的任何帮助：）

Answer 1

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

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

  

有两种方法可以避免[图像未在第一次共享中显示]并在第一个“赞”或“共享”操作上呈现图像：

     

  

1. 使用URL Debugger [...]

预先缓存图像   

2. 使用og:image:width和og:image:height Open Graph标签
     使用这些标记将指定爬行器的图像，以便它可以立即呈现它而不必异步。 （原文如此）

  

Answer 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）