og:image 不工作，除非我尝试使用 "Open Graph Object Debugger"

Question

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

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

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

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

<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 并尝试之前检查过的 link.

第一次说URL没有被缓存，但是预览效果很好：

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

如果我们再次返回到 Open Graph 对象调试器并单击 "Fetch new scrape information"，则不会显示错误或警告：

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

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

http://club.ad/andorra-la-vella/ca/activitats（点击任何activity图像）

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

Answer 1

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

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image:

我使用这个脚本在用户分享页面之前更新 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）

Answer 2

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

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

There are two ways to avoid [image not being shown on first share] and have images render on the first Like or Share action:

Pre-cache the image with the URL Debugger […]

Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously. (sic)

og:image 不工作，除非我尝试使用 "Open Graph Object Debugger"

og:image not working, except when I try with "Open Graph Object Debugger"

debugging

facebook

image

facebook-graph-api