How does Facebook choose a preview image when the og:image tag is invalid? A friend and I were curious why a Facebook preview image didn't show up in the article — when we ran the URL through the Facebook debugger, it provided the following information.
Provided og:image could not be downloaded or is not big enough. Please use an image that's at least 200x200px and is accessible from Facebook. Image 'http://lostoregon.files.wordpress.com/2014/06/foodcarts.jpeg' will be used instead
Tangent: Running the debugger once appears to clear Facebook's cache, and on the next run Facebook grabbed the correct (since fixed?) image.
The one part of this I don't understand is: How did Facebook chose the http://lostoregon.files.wordpress.com/2014/06/foodcarts.jpeg image to use instead? When I look at the original page, foodcarts.jpeg isn't shown anywhere, which means either
Facebook has some secret sause for chosing from images it's seen before
Facebook picked an image that was on the page at the time, but is no longer there
Something else I'm not considering
Is this default image picking defined, deterministic behavior? If so, how does it work?
the error you describe is common enough, and the image may be all right, but Facebook probably has issues downloading it (it's too big). What happens when the image isn't good is that the get a cached representation of you page, and use the image you provided back then. If Facebook crawls many urls, and there's no image on your site, or there's no cached image, the system will pick the one you use more frequently (on all pages). At least, that's what I have seen.
Related
I just recently launched a game on steam, and when I share a link in facebook the preview image doesn't appear.
I ran the object debugger.
From the results, in the og:image field, I can see the image correctly, however in the preview itself the image is broken.
Any ideas?
Edit: Since this is a steam page, my ability to influence it is limited. I can only change some images, but I cannot add meta tags.
I did find, however, in this post, that a <link rel="image_src" href="/myimage.jpg"/> tag should also be identifiable by facebook as a preview image. For some reason in my page facebook either ignores this or treats the image as invalid (although it is larger than 200x200)
og:image could not be downloaded or is too small
og:image was not defined, could not be downloaded or was not big enough.
Please define a chosen image using the og:image metatag, and use an image
that's at least 200x200px and is accessible from Facebook.
'http://store.akamai.steamstatic.com/public/images/game/game_highlight_image_spacer.gif' will be used instead.
Consult http://developers.facebook.com/docs/sharing/webmasters/crawler for more troubleshooting tips.
So we do have the reason why it is blank (spacer.gif is blank)
This is the same for other pages as well...
http://cdn.akamai.steamstatic.com/steam/apps/455980/header.jpg?t=1459222551 <-- Can be found in the header...
So lets have a closer look at the image itself...
The images are creatd ondemand (so it seems) and you (a.jpg) is the same as Cities Skylines (b.jpg)
So no idea at all... Maybe a problem with Steam's CDN (FB is unable to find the image. Did you update the image recently?)
Sorry not to be able to help. The image itself cannot be faulty IMHO as stream is processing the image every time...
Cannot say more :/
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:
Pre-cache the image with the URL Debugger
Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.
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.
Source: https://developers.facebook.com/docs/sharing/best-practices#images
I've seen this is a common issue here on stack but it seems that the answer is always dependent on the specific scenario. I'm looking for a fellow coder to give me that "AHA" moment.
Problem: Ads posted to my website do not show the og:image content when shared to facebook until the ad is shared at least 4 times
I have thought about/ tried the following things
Checking the image size to make sure it's not large (128kb) is the norm. I compress all uploads.
Giving the ad some time to marinate before sharing (perhaps the fb crawler takes a while to cache the page)
I tried using the debug crawler tool on fb to see if I could reproduce the problem and I indeed could.
I tried sharing the ad to my own page regardless of the missing image to see if the image showed up on my wall. It did not.
The image will not show up on ANY shares until someone has clicked on the share icon on an ad at least 4 times. It seems to me like it might be some latency issue on facebook's part.
What could cause og:image to only show on subsequent share clicks?
Edit
Here's a test ad.
https://www.jdmxchange.com/Classifieds/Details/6ae72690-14d8-4bab-b039-3a2d79923794
Reading https://developers.facebook.com/docs/sharing/best-practices I found this, which might be just what you're looking for:
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.
This means, if you set the width and height of your og:image with tags, the image will show straight away.
UPDATE
Actually debugging your URL shows like this URL is redirecting to another page, and then another. Which makes me suspect the Facebook crawler is not able to access the actual OG meta tags you're using.
As a random test, I would add OG metatags to that last URL and see if Facebook uses them. But the actual solution would be to use URLs which are actually reachable to FB (no credentials necessary).
Upon sharing a link on Facebook with og:image and og:video tags it will, under the right conditions, consistently display the wrong thumbnail image. Our clients are having this problem but unfortunately I cannot consistently replicate the conditions under which this issue occurs.
Go to the QVC UK Facebook page and look for video shares (example post). You'll see that the thumbnail for the video is the QVC logo when it should be the image given in the og:image tag. When putting the link through Facebook's debug tool the correct image is displayed with no content warnings or errors. This only seems to be happening when the URL is shared for the first time as subsequent shares will display the correct image. The image is present on our CDN before the URL is shared on Facebook. When I did manage to luckily replicate this issue; running the debugger before sharing on Facebook did not seem to solve the problem.
Am I missing something obvious, is there something wrong with my meta tags or could this be a potential facebook bug?
I've seen that multiple people are recording the same sort of problem on Facebook however only this bug has been left open (as of June 21st). In a related bug report Facebook mention that their crawlers don't only look at the image in the og tag but also look for other relevant images within the page.
Is it possible that it is seeing the QVC logo used so many times on the page that it decides to randomly overwrite the one specified?
Thanks
-- UPDATE
This only seems to be a problem when sharing to Facebook pages as opposed to a user's timeline. Changing the image URL seems to have temporarily fixed the problem. This looks like a Facebook bug
I'm stuck with this problem for several weeks now and will try to give a short and detailed explanation below:
Situation
Users visiting the websites and has the option to generate an image with the GD-library. So every users generated a personal image. Simple... until now. After generating the image, the user gets the option to share this image to Facebook. This is done via the OpenGraph protocol.
What's working (Yeah!)
Generating the image is working perfectly fine. Sharing something to Facebook is working also.
Problem
Although the following code is used on sharing the image (fbrefresh=CAN_BE_ANYTHING). FB stills pulls an old image. Sometimes this is a really old image, sometimes it's a more current generated image. But never the just generated image.
And now?
As said I've already tried the fbrefresh=CAN_BE_ANYTHING. Also in de debug tool the right image isn't showing up, but this is probably because the generated image has an unique ID generated from the users cookie. So this id is only usable when the users clicks on generate and after that shares the generated image.
Is there any example on the internet that uses the same sort of strategy and is working? I've searched half the internet and didn't found it yet it's becoming more and more frustrating.
After generating the image, the user gets the option to share this image to Facebook. This is done via the OpenGraph protocol.
What exactly do you mean by the latter? Are you just uploading that image to the user’s wall/one of their albums, or are you publishing an Open Graph object with a user-generated photo attached? (Btw., user-generated photo is meant literally for OG actions – you should only do it with photos that the user has taken using f.e. their mobile phone camera while they where undertaking the action. I doubt if a GDlib-generated image fits into that description.)
Although the following code is used on sharing the image (fbrefresh=CAN_BE_ANYTHING). FB stills pulls an old image.
And by “pull” you mean what exactly, again? Do you upload the photo as an HTTP POST upload, do you upload it by URL, did you specify it as og:image for an OG object, or do you pass it as user-generated photo while publishing an action?
Now, usually the easiest way for resources referenced by a URL to get properly refreshed by the requesting client, is to attach a different value to the query string/as a GET parameter – f.e. the current unix timestamp: …/image.php?1984372634 or …/image.php?foo=bar&forcerefresh=1984372634
Since this value changes every second, it makes each of those URLs a different URL, and the requesting client absolutely has no choice but to request that resource, because he can not have it in its cache already.
Despite the meta tags (the first one I never used before, but it came up in the addthis forums);
And the debug tool getting the data in a correct manner:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mondiales.nl%2F
The facebook sharer code does not use the image specified. No images show up at all, there is no thumbnail chooser.
Looking at the HTML of the facebook sharer page, the image is actually there! The thumbnail chooser has a display:none. And when posting the damn thing, no image shows up on the wall.
Stop using addthis and implement a like function using the just the Facebook API? But from what I read, Facebook does a request for the page to get it's data so the JS part should not be the issue, should it?
Did I overlook something?
There's a restriction on the width/height ratio of images shared, the ratio must be less than 3.0
Your image is too wide (211/66 = 3.19) - add some vertical whitespace and it'll share OK i think
For future reference this is mentioned on both the old Share Button docs and the Open Graph protocol docs (under 'og:image')
I've found that once I've posted something to my wall from the sharer or the app, if I try to repost it, it will remember the original image (or no image in your case).
It might be worth clearing the whole cache/cookies from your browser and see if that does the trick.
If not, you'll find that if you log in as another user of Facebook and they try to post it, it will pick up on the new image on their account and not yours.
I'm not exactly sure how Facebook caches the images.
I know this thread is old but this may help someone else with the same issue. FB caches shared urls along with the thumb images and descriptions. To update the cache, add a bogus parameter to your shared query string, like, "?v=1". This gets the latest og tags.