I’m having a problem with the Facebook Like Button here. Although the button works, it’s fetching the wrong thumbnail to display on Facebook.
Since the website is a store and each product has its own like button, it’s very important that the correct thumbnail is displayed on Facebook. I used the Facebook Linter to debug a product URL from the site. I hoped Facebook would grab the bigger, obviously main image of a product URL but it’s fetching one of the related products thumbnail.
From what I’ve read in the docs, I should explicitly set og:image in the head of my document. However, I have no access to the back-end and I can only use JavaScript to dynamically generate a meta-tag. I’ve tried to do that but it seems worthless doing so since the URL is scrapped before any script is run.
I don’t understand what rules Facebook is using to infer the value of og:image. On another website that also doesn’t have any meta-tags set, the main image of the product is being correctly scrapped. Why?
When, for whatever reason, one cannot declare any Open Graph properties, what can be done to improve the chances of Facebook’s algorithm grabbing the desired image (or text)?
Ideally, you should set
og:imagemeta tags as part of the open graph protocol. When this fails, it simply defaults to all images via image html tags take into precedence. The very first image defined viaimgtag will be the first image pulled by facebook.If the above sample code was your site, facebook would label img1, img2 and img3 as potential thumbnails and in that order if the user has the option to choose what image to specify.
So, just put your product picture first.