Facebook Open Graph No Image First Time - facebook

Question

I'm trying to configure a share/send button with a link. I've properly configured the open graph image tags on a page, but when opening the share/send dialog for the first time, the image doesn't show. Without refreshing the page, opening the share/send dialog for the second time, the image will show. The URL of the page and the images are all in HTTP (instead of HTTPS).
I can't simply use the URL-Linting tool as the page will have a unique URL. The website is about sending virtual flowers to people and so the page to be shared is freshly generated.
Would really appreciate some help :)

Answer 1

Found the problem. Somehow this problem happens if you don't set your open graph tags properly.
Incorrect:
<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
Correct:
<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="442" />

Answer 2

UPDATE
This solution with iframe is not working anymore! Worked since yesterday 06 February 2017.
Facebook just set X-Frame-Options as DENY so you cannot load the sharer url in an iFrame.
I added og:image:width and og:image:height, checked all my property tags and the problem was still there.
I found a workaround for this facebook bug that worked: I added an hidden iFrame with the sharer link in the page footer; in this way the facebook crawler check the page once is loaded.
<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>

Answer 3

This might help someone.
I found that Facebook did not like the square image I used (1000px x 1000px),
so I cropped it to 660px x 315x and Facebook accepted it.
Setting og: width and height did not help and it was literally about the image dimensions.

Answer 4

One more possible answer that worked for me - make sure you have the og:image meta tag set before all the other tags, otherwise it still doesn't work!

Answer 5

You should provide the image link correctly in the og:image property. If you still not get the thumbnail, add image height and width like this:
<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />

Answer 6

Perhaps, it will help someone.
No idea why, but after removing this from my 'head' block
<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />
The problem has been solved.
Here's my meta tags
...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" />
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" />
<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...
I'm using 'https' in both meta tags (og:image & og:image:secure_url), because the website is using ssl.

Answer 7

If you're still having problems, you may also need to add the MIME type property, like this:
<meta property="og:image:type" content="image/jpeg">
NOTE: that's image/jpeg not image/jpg — (you gotta have the e in there)
FB crawler accepts image/gif, image/jpeg, image/png