Facebook Open Graph No Image First Time

问题:

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 :)

回答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" />

回答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>

回答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.

回答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!

回答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" />

回答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.