Facebook share shows wrong image - html

my question is about a weird cache issue with facebook open graph. My server provides an html document with the properly meta tags for facebook share utility.
Provided meta tags are: og:url, og:type, og:title, og:image, og:image, og:description, og:site_name, og:updated_time.
Now the facebook url debugger brings the correct data, all fields have the correct data, but when i lanch the popup, with the url containing the html mentioned above, the image is wrong, it shows me an old image or the site logo... i thinks it is a cache trouble, and i don´t know how to solve.
I have tried some solutions but are bad solutions, like adding a timestamp at the end of querystring. This is bad because it reset the shared count.
Thanks a lot!

Related

Sharing on Linkedin does not always pull og:image

When sharing articles on Linkedin, sometimes the image specified in the og:image tag gets displayed, sometimes it doesn't.
Here is an example where it works: https://newsroom.porsche.com/en/history/porsche-history-litera-tour-erfurt-weimar-944-turbo-cabriolet-13865.html
And a not working example: https://newsroom.porsche.com/en/company/porsche-half-year-2017-increase-operating-result-revenue-deliveries-employees-14005.html
All relevant og:tags are present (besides the one at the html tag, but as shown above, it is not needed) as stated here.
What I did find out though: In the working example, the image is stored within Amazon S3 while it is stored directly on the server in the non-working example. Sorry for not posting the links to the images directly but my reputation does allow for only two links per post.
Other than that are both links valid, both images are the same size and the server does not have any geo restrictions. Both pages are using the same template, so I figure it can't be the markup either.
I guess it is Content-type: image/jpeg header that is missing on a response for image stored on a server.

Strange Facebook Debugger errors with Blogger links: redirects to “.pe”, says “article:author” unsupported by “og:type” “article”

Starting yesterday evening I noticed sharing links to my Blogger blog on Facebook wasn’t working right: images failed to load, the meta description was missing, various other errors. (Sharing links from other sites worked fine, so this seemed to be Blogger-exclusive.) Running the permalink through the Facebook Debugger returned 4–5 errors that hadn’t been there for previous links I’d shared, and some of these errors have since disappeared on their own. I figured FB had messed with their scraping system and that it would be rectified soon.
Presently, link-sharing works better, but a couple issues remain that I can’t explain or find any solution to: 1) Facebook tries to redirect my .com blog to .pe, and 2) it claims the meta property article:author is incompatible with the og:type, which is article.
Quick reference links:
Sharing Debugger readout for a random blog post (they all return the same errors):
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F17-Isnt-it-the-thought-that-counts-124.html
Open Graph Object Debugger readout:
https://developers.facebook.com/tools/debug/og/object/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F17-Isnt-it-the-thought-that-counts-124.html
Scraped URL readout:
https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fpreliator2.blogspot.com%2F2017%2F08%2F17-Isnt-it-the-thought-that-counts-124.html
For the record, I did some minor meta tag editing the day before this problem began, yet I validated the page when I finished and received no errors at the time (except for the missing fb:app_id, which I ignore).
1) Facebook Debugger redirects to blogspot.­pe
My blog is at preliator2.blogspot.com. Every URL in the site source uses .com. There’s a simple script in the header that redirects any country-specific URLs (blogspot.ca, blogspot.ru, etc.) to .com for reasons of consistency and compatibility.
This has never caused a problem with Facebook sharing. Yet now, the Sharing Debugger gives me this (note the .pe domain):
Fetched URL https://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
Canonical URL http://preliator2.blogspot.pe/2017/08/17-Isnt-it-the-thought-that-counts-124.html
Redirect Path Input URL → https://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
302 HTTP Redirect → https://preliator2.blogspot.pe/2017/08/17-Isnt-it-the-thought-that-counts-124.html
og:url Meta Tag → http://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
And this is the link preview:
Further, on the Object Debugger page, fetching new scrape information gives me this error:
URL Follow Failed: There was an error in fetching the object at URL 'http://preliator2.blogspot.pe/2017/08/17-Isnt-it-the-thought-that-counts-124.html', or one of the the URLs specified via a redirect or the 'og:url' property including one of http://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html.
To find the object, these are the redirects we had to follow
original https://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
302 https://preliator2.blogspot.pe/2017/08/17-Isnt-it-the-thought-that-counts-124.html
og:url http://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
302 http://preliator2.blogspot.pe/2017/08/17-Isnt-it-the-thought-that-counts-124.html
og:url http://preliator2.blogspot.com/2017/08/17-Isnt-it-the-thought-that-counts-124.html
For some reason, the Facebook scraped URL shows the canonical and other blog links as blogspot.pe, yet in my blog’s actual source, all links are .com. I have no idea why Facebook sees/adds all those .pe domains. The blog isn’t based in Peru.
2) Says article:author isn’t supported by og:type (article)
I also receive the following error from the Sharing Debugger:
The following properties are specified on the webpage but NOT supported for the specified 'og:type': article:author
Yet here are the relevant tags as they appear in the scraped URL:
<meta content="{FB_profile_URL}" property="article:author">
<meta content="article" property="og:type">
Last I checked, article:author is perfectly compatible with og:type article. The meta tags are in the <head> section. I don’t know whether this error is related to the strange .pe redirect issue.
How do I stop that nonsensical redirect and get FB to play nice with author/og:type meta tags?
Update:
Problem’s still occurring. I’ve also done a couple tests, with the following results.
A) I tried sharing a link from another Blogger-hosted site, specifically the Official Blogger Blog (https://blogger.googleblog.com/2017/03/share-your-unique-style-with-new.html). Worked without a hitch. This indicates the problem is specific to my blog.
B) The problem started only a day ago; link sharing worked just fine before then. So I dug up a backup of my blog template from a week ago and applied it to the blog. I then tried sharing a link again and rescraping. No change – even though link sharing worked without any redirects or other issues with this exact template just days ago. (I’ve since reverted back to the newer template, since evidently it doesn’t change anything.)
I still want to think the problem is on Facebook’s end, but this has been going on for almost two days now. If anyone has any ideas, that’d be greatly appreciated.
The problem has since been resolved. Turns it out it was something wonky on Blogger’s end (I was told as much on the Facebook bug forum) and it went away just under a week after it first began. The Debugger errors have disappeared and the blog no longer redirects to .pe.
If anyone else has similar problems (as I’ve seen on the Blogger forums), all I can suggest is to wait and see if they go away after a week or so.

How to change LinkedIn share image in HTML?

I developed some html pages with social sharing functionalities like Facebook, Twitter and LinkedIn etc.
But now, I have some problem to change LinkedIn image.
To share on LinkedIn I use platform.linkedin.com/in.js plugin:
When I change image from image6.jpg to another JPG file in metatag og:image, changed image couldn't be shared.
Please help me to solve this.
Thank you.
I post this answer for the developers touch Linkedin first.
The other social sites have no problem like this.
But facebook and Linkedin have this problem, because these sites have cache and save the first scraping data in cache (especially images).
Facebook cache can be removed by manually, but Linkedin cache can not be.
Linkedin cache restore scraping data for a week, and Linkedin clean cache after a week.
During this period (one week) the page you want to change image wouldn't be shared.
Because as I write, Linkedin show old data in cache , and save it again, so you have to wait for a week.
Only way to change image immediately is to change page url also.
Thank you.
So, let's think about this. Here is your what I think is the kernel of your problem:
...When I change image from image6.jpg to another JPG file in metatag og:image, changed image couldn't be shared....
At first, when you said When I change image, I thought you meant changing it in the HTML, but now I think what you mean is you are changing it through JavaScript: i.e. $(metaelement).content(newimage);.
If this is what you mean, it will not work. LinkedIn is doing a blind, simple, non-JS activated scrape/parse/cURL of your webpage. If you try to change <title> or <meta> tags with JS, the scrape will not see it. This is true with almost every type of scraped URL, in every single search engine, for instance, like google and bing (changing your <title> via JS will not be reflected in the search result). This is just how the Internet currently works!
Source: Microsoft LinkedIn Share URL Documentation.
For example, this works for me:
https://www.linkedin.com/sharing/share-offsite/?url=http://www.wikipedia.org/
See, it works fine:
If you are interested in a regularly maintained GitHub project that keeps track of this so you don't have to, check it out! Social Share URLs

Images not appearing in Facebook's share link tool

I am having an intermittent issue the Facebook share link function does not pull the the link image from the page. This is happening consistently intermittently, that is, it keeps happening but not for a consistent page, image, style, etc. I can't find any pattern. Pages won't work, and then they will. Most pages work fine at the first attempt, but maybe 5% fail.
Each time it happens I check the URL in the Facebook debug tool, and it finds the article image without problem. Often, after I use the debug tool and then try to share the link again the image is found by Facebook.
The site uses Open Graph tags that check out with the Facebook debug tool.
Here is one example page:
http://zujava.com/must-have-school-supplies
Are there other factors that impact whether an image is pulled along with a URL in Facebook?
Facebook scrapes your page every 24 hours. So on the initial go unless you like the page or send it through the debugger, the image (and other meta data) will not appear.
Read more at
http://developers.facebook.com/docs/reference/plugins/like/#scraperinfo and
How does Facebook Sharer select Images?

Facebook Linter / Open Graph cuts off the URL path

I've been scouring the web and StackOverflow for an answer, but I've found no case that exactly applies to my situation. I'm using Facebook Linter to debug the way FB is scraping my meta tags. If I use it on a simple About page, it picks up everything fine, particularly the og:url meta tag.
See:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Felectionstats.com%2Fabout%2Fprivacy_policy
The trouble starts when I scrape my normal content pages. Although I've triple-checked that my tags are formed well, the FB Linter cuts the URI off the URL, so it reports that the og:url tag only has the domain name, electionstats.com/!
See:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Felectionstats.com%2Fsearch%2Fyear_from%3A2010%2Fyear_to%3A2010%2Foffice_id%3A6
The og:url tag that is actually on the page looks like this:
I am skeptical that it is an issue with FB caching the pages, because on my About pages I have made quick code changes that change the meta tag output, then re-run the same page through the Linter, and the Linter shows these quick changes, without fail, every time. But for some reason, when I try dozens of different URL combinations on the main content pages (the /search/ pages), I always get a cut-off URL and consequently only meta fields from my homepage.
I had even theorized that FB will ignore a URL that looks like a "search" page, so I re-routed the URL and the title tag to use the nomenclature "explore" instead of "search", but this still did nothing -- the URI would still get chopped off.
Oy, this is embarrassing.
I have code at the beginning of each page request that detects if the user's browser accepts cookies; if not, it kicks the user back to the homepage. The Facebook web crawler, like other web crawlers, does not use cookies. Thus, it kept ending up back on the homepage and reading the homepage's og/meta tags. The greater unintended consequence of my code was that it kicks out ALL web crawlers trying to get a sense of my website, including Google's.
The fix: skip the cookie-handling check if the user agent string matches part the UA provided by common web crawlers, e.g http://www.cult-f.net/detect-crawlers-with-php/