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
Related
I have a LAMP website which allows users to share a graph on Facebook. It was woking fine until May 1st but now whenever I try to share, I just get a grey box.
My site was using sharer.php to do the sharing and giving as the url a document which would generate a single graph, and in it's og:image and og:image:url tags I put a url which points to some code which generates an 800 x 400 png of the same graph. If I copy either url into a browser, they render exactly what I would expect, but if I post the same url to the Sharing Debugger tool, it gives me a blank image.
I have noticed that although clicking the Scrape Again button usually calls the url which renders the image as a png, every now and then it does not, but there is no indication as to why and the Scraped URL page shows exactly the page I would expect with the correct og:image tags.
I have tried changing from using sharer.php to the FB.ui 'share' method, but this has not fixed the issue.
I have also tried asking in the Facebook Developer Community but have had no response. I even tried to raise a bug with Facebook, but it won't let me.
This is driving me nuts. I just don't understand why it has suddenly stopped working. Have I missed something or has Facebook changed anything in the Sharer functionality? Is there any other way to debug this ?
Update: After a lot of tinkering I have found out that this only affects my account, and it affects anything I share on Facebook, not just things from my own site. Furthermore, it's only the preview of the shared page which is not working. What actually gets posted to Facebook is the correct image. I have tried multiple PC's and multiple browsers and it always fails even if I switch off all anti-virus/anti-malware/firewalls etc. Bizarrely, if I share from my phone, it works!
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).
I'm having issues when a user tries to share the URL to a Facebook tab app that I have setup.
When they paste the URL to the tab in their share window and then post their status update, the tab image is shown when viewed on their profile, however there is no image shown on the newsfeed version of the same post.
I've tried adding open graph meta tags to the app, but I believe that it is being ignored since it is located inside of the iframe, and the facebook open graph meta overrides it.
Does anyone know how to ensure an image is maintained when the tab URL is shared directly?
I've burnt a lot of time trying to solve this issue as well. The best I've come up with is that Facebook is going to chose to display the 111x74 app icon. Sharing this on a page's news feed makes it very pixelated and oddly offset, as it should be using a 1200x630 minimum image size, as dictated by the OG tag best practices, but Facebook has not allowed us to have that option in the app configs. It may be that your app icon is being offset enough to not appear like it's visible in the news feed.
So, from my research, we're out of luck until Facebook decides to fix this issue. Until that time, I don't think it's even worth trying to get the any image to work.
Someone feel free to prove me wrong.
Over the past few weeks we have been finding that facebook posts (not shares from the in-page FB button) have been failing to show the images tagged with og:image on our site. Our home page http://www.greatbritishchefs.com is an example. This seems to be a change in behaviour at Facebook's end because pages which were working a few weeks ago now do not. Also where a page is working currently, running it through the FB debugger causes it to immediately fail. Removing the og:image tag does not work. The images seem to be the right size, and the debugger results are free of errors regarding the image.
Would be grateful for help from anyone who is also experiencing this.
OK I found the resolution to this. What appears to have happened is that Facebook has become much more demanding about what kind of image urls it will work with in posts. The images on our site are sourced through a handler which preprocesses the image, putting a watermark on, resizing etc. and therefore the url might look like:
http://www.greatbritishchefs.com/getmedia/0ecdeb1f-c194-42a9-b465-012004a6cd99/AYW001-Website-Edited-Featured-Bacon-Breadsticks-Closeup/?width=420&height=270&ext=.jpg
This will now not work. For some reason, the url has to be completely vanilla without any query strings and with a standard image extension. When I rewrite the url for og:image to follow those rules, the images reappear in posts.
Hope this helps someone
James
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.