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

Question

I have a website with all the og:image tags properly set and it does not work, except when I use the Open Graph Object Debugger, which shows me the expected preview.

Step by step (with an image for every step):

If I take a non-cached URL like... http://club.ad/andorra-la-vella/ca/activitat/activitats-infantils and I try to share it on facebook, this is what I get:

As you can see there's no image shown on the preview. In this case the first thing I do is check that the og:image is properly set. Checking the sourcecode of that link, we can read:

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

And if we check the image URL, we get this:

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

The og:image tag is inside the head tag, so everything seems to be ok. Here's when I go to Facebook's Open Graph Object Debugger and I try the previously checked link.

The first time it says that that URL has not been cached, but it shows the preview pretty well:

Now that the request has been done from here, if I go back to facebook the preview is properly loaded:

And if we go back again to the Open Graph Object Debugger and we click on "Fetch new scrape information" there aren't errors nor warnings shown:

So, what's wrong with my website? Or what's wrong with facebook?

If you want to check it by yourself, take any URL from the websites' activities index (there are some of them that have been checked and thus will return the cached content):

http://club.ad/andorra-la-vella/ca/activitats (click on any activity image)

Thanks in advance for any help given :)

Answer 1

Try specifying image dimensions in your OG meta tags as well.

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:

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

2. 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)