Preview tool loading incorrect image on initial fetch - facebook-opengraph

When posting an item to one's news feed that passes muster with the debugger tool, the preview retrieves an incorrect preview on the first share and correct previews on subsequent shares.
Expected: That the shared link would fetch the og:image-specified image for the shared link on the first pass.
Actual: The first share retrieves a different image from the page. (Oddly, an image that is only 105x100, not even large enough to meet Facebook's image guidelines), and subsequent shares retrieve the correct image specified in og:image. See a screenshot of this in action:
Repro Steps:: Upload an image with a free Droplr account, share the link via a status update and via a comment. Here is a URL I have not shared yet at all, but once it is shared, it will begin to render correctly. So there is 1 free repro :)
Debugging so far: This seems to fail in similar but different ways with status updates versus comments.
Status Updates: If you post an image for the first time as a status update, Facebook hits the following URL: https://www.facebook.com/ajax/composerx/attachment/link/scraper/?scrape_url=http%253A%252F%252Fd.pr%252Fi%252Fj2k7&composerurihash=2. The response object keyed as jsmods.markup[0][1].__html contains markup with an incorrect image of FB-wrapped safe image url of: https\u00253A\u00252F\u00252Fd25ss6wjc6pfq2.cloudfront.net\u00252Fassets\u00252Fdrops\u00252Fstandard\u00252Fpromo-logo-15dd4a0f7b7831e42dd5f976a17d4757.png. Here's a visual representation.
Comments: If you post an image for the first time as a comment, the response's payload.comments[0].attachment.markup.__html key comes back with the same FB-wrapped safe image URL mentioned above. Again, visually.
I'd love to hear if anyone has thoughts on how to get around this or anything we might be doing wrong on our end.
Thanks!

Related

Facebook does not display my post image and can't fix it via facebook debugger

Every times I post any web page from my website on facebook, I expect its main image to be displayed for better communication rank and this is ok in the preview page, when I'm pasting the post url immediatly as you can realize it from the attached image. but when it's saved, the images goes off as you can see from another attached image.
After searching a while on google in order to know what is wrong with my web page, I realize that the page can be debugged via this tool provided by facebook, but even when I followed all the recommended step, I still face the same issue. (anyone can try it and see the result).
When continuing my research I find that there would be some issues with og:image as facebook debugger shows in the following message:
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. but the truth is that I really don't know what to do exactly to fix this.
Any help will be appreciated.

Message preview is different depending on LinkedIn profile

My company uses LinkedIn Share API to publish messages on LinkedIn profiles sharing content from WordPress posts.
One thing that is driving me crazy right now is that when I share the same URL and content to two different profiles, the preview cards that result from that are different. On one profile I got a full image preview like the following:
But the same content (same API params to share) produce this different preview:
I'm trying everything I can to get a consistent behavior. I'd like to have all previews being full size previews like the one shown in the first screenshot. API documentation doesn't help much here.
Any help or clue would be appreciated.
It's a random behaviour from LinkedIn. From time to time a significant percentage of accounts reached via the post API return a small thumbnail as well as a different content link (if you use redirected links like bit.ly). It happened for a week in February and since last Friday, including a number of Internal Server Errors. It looks like LinkedIn runs different code on different parts of its infrastructure.
So there is nothing you can do programmatically on your end I'm afraid.

Meta tags appear correct but Facebook sharing is empty (no title, description, or image)

This problem exists for all pages on this site. The meta tags appear correct but whether you use the share link on the site, or try to share direct on FB, the image, title and description are not used.
There must be a legitimate issue as the Sharing Debugger also shows an empty/plain sharing dialog. But the Facebook share debugger isn’t given me any helpful info. It sometimes shows a 302, which I don’t understand as there is no redirect on the site. Refreshing the scrape sometimes shows an error Unknown Image Error, which also doesn’t seem to be a legitimate issue.
Almost always the Facebook share debugger shows a 302 the first time and then follows with other unhelpful errors.
Maybe a DNS issue, weird that it would be site wide.
Example Links:
[http://pikespeakharleyownersgroup.com/group-riding-pphog-405/][1]
[http://pikespeakharleyownersgroup.com/tell-tires-toast/][2]
[http://pikespeakharleyownersgroup.com/30th-annual-high-country-toy-run/][1]
Any and all help is very appreciated.
Try debugging your page URL on below link:
https://developers.facebook.com/tools/debug/
Once you scan your URL, on the link I provided, you will see "Warnings That Should Be Fixed" section. Try resolving warnings mentioned in that section.
Hope this will help you!

Facebook share og:image incorrect. Debugger is picking up the correct image

The past week, Facebook has been getting every article feature image wrong on my site. The og:image is clearly defined, worked fine for the past few months and even the debugger shows the correct image, yet it chooses to use the same incorrect image across all new articles now.
Article
http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
Facebook Debugger:
https://developers.facebook.com/tools/debug/og/object/
URL: http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
The meta tag, which clearly provides/defines the correct image Facebook should be using:
<meta property="og:image" content="http://www.highwaysindustry.com/wp-content/uploads/2015/05/Causeway-image-1.jpg" />
When on the debugger, if you Fetch New Scrape Information it will fix the issue. However I am currently having to do this on every single article that is posted. Why it's getting the wrong image in the first place I don't know.
In case someone runs the 'fetch new scrape information', here it is at the moment for that URL provided:
https://www.dropbox.com/s/8t4o9h3o1p9uxhv/debugger-fb.png?dl=0
I am using WordPress and Yoast SEO.
There's a warning. And it's going to take some time to update the latest information but for now you might have to fetch new scrape information yourself.
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. Image 'http://www.highwaysindustry.com/wp-content/uploads/2015/02/Dorman00001-e1423681471392.jpg' will be used instead.

Cannot change og_type

I just replaced a tumblr website for a client with a brand new Wordpress site. And when running it through the Facebook debugger, I get this error:
The object at 'http://example.com/' previously had type 'tumblr-feed:tumblelog' and cannot be changed to an object of type 'website' to avoid data corruption of existing actions.
I Googled "Cannot change og_type" (in quotes) and got literally zero results (well now it seems there are results stemming from this question). Am I really doomed to Facebook data mismatch?
Per the error message
... cannot be changed to an object of type 'website' to avoid data corruption of existing actions.
If the og:type were changed for a URL, any existing user posts linking to it or sharing it, any Open Graph actions referencing it, as well as any likes of the URL would become broken and the user's profiles would be missing content they'd posted before.
I don't believe there's any way around this, as it's an intentional restriction to avoid breaking existing posts, likes, actions, etc referencing a URL. If the posts were broken, content would be removed from or mangled on the user's timeline.
A possible workaround if you want to have a 'new' object at that URL is to use my instructions in this answer about moving URLs to put a Like button on the URL you're trying to change (let's call it A), but pointing to a slightly different, new URL (let's call it B) , and then use the redirect mechanism in my answer to bounce users landing at URL B back to A, but serve the metdata describing 'A' on URL B if the Facebook crawler accesses it
Does the client's site have more than 10,000 likes? If so, Facebook doesn't allow og:type to be changed.
You can update the attributes of your page by updating your page's tags. Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type.
Here's the link to the Open Graph documentation. :)
I would reccomend using the Open Graph Debugger to check what facebook really sees and if facebook eventually has a cached version of your site. (you find hte debugger here: https://developers.facebook.com/tools/debug)
NOte that it doesnt say og:type - it says og_type
This is hitting me too since my og:type is set to "shamrockirishbar:shamrockirishbar" BUT the linter is saying og_type (of which there is none in my meta data) is set to "website".
enter link description here

Resources