The thumbnail of the site is not loading in Facebook when being shared/liked. I have the following within the head section of my HTML:
<meta property="og:image"
content="http://img.loveculture.com/ProductThumbs/1039103_29_1.jpg" />
<link rel="image_src" type="image/jpeg"
href="http://img.loveculture.com/ProductThumbs/1039103_29_1.jpg" />
According to Facebook's test page it passes with flying colors:
The images are in fact there.
The images are small and in JPEG format.
I waited 24 hours (possible Facebook cache issue)
I have had the same issue for a couple of weeks and my only solution was to put the image on a different domain.
It is a bug with Facebook but not enough people seem to be having the issue to justify them spending time on trying to fix it.
I do hope they fix it soon though, it's a pain to try to explain to my boss that a single image has to be hosted somewhere random because of a Facebook bug.
Related
I have a question that was initially asked here: Open graph og:video Meta Tags content in 2010, but the answer no longer works.
I'm trying to show a YouTube video in Facebook (and have it play inside Facebook) when a link is shared. The following og:video tag on the page doesn't work (it never really did):
<meta property="og:video" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
The solution proposed here https://stackoverflow.com/a/17811187/188740 in 2013 worked really well until recently. It was to change the og:video to something like this (notice the way the v query string value is represented):
<meta property="og:video" content="https://www.youtube.com/v/ZH4YSF-i5dY" />
That no longer works and Facebook completely ignores it.
Another option I tried is to put the YouTube URL in og:url:
<meta property="og:url" content="https://www.youtube.com/watch?v=ZH4YSF-i5dY" />
That approach instructs Facebook to scrape YouTube to get the thumbnail image, but clicking on the post sends the user to the original page that was shared. The click behavior is the right one (I want the user to go back to the originally shared page), but there's no way for the user to play the video.
Anyone know the solution to this problem?
Update:
Unfortunately, it's starting to look more and more like this is a change that Facebook made in August 2017 (and rolled out slowly across different regions over several months) and it's by design. In other words, there's no way to make this work. :-( If anyone has a workaround, it would be great for the community to know.
Relevant discussions:
https://developers.facebook.com/bugs/1963535797258090/
https://developers.facebook.com/bugs/364444227315183/
https://productforums.google.com/forum/#!topic/youtube/l69gPBlkXN0
It is the kind of problem when yesterday everything worked fine and today it's not. Nobody changed anything.
I have this website made with Drupal engine. When I am sharing an article on facebook, the title and the short text from it is visible, but there is no photo.
Open Graphs are configured properly, as the developer debugger of FB is getting the meta tag with an image:
<meta property="og:image" content="http://mysite/page/tolia_74548279.jpg" />
When I am sharing a whole articles catalogue, images are there.
Do you have any idea where to start searching for a solution?
Maybe there is some fb servers problem I don't know about?
The problem was with the facebook. It requires pictures at least 200x200px. Mine were smaller.
I've added a FB share button to a page on my site, using this method: https://developers.facebook.com/docs/reference/plugins/share-links/
Source code looks like this:
<a href="https://www.facebook.com/sharer/sharer.php?
u=https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" target="_blank">
<img src="https://[our S3 bucket]/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
I've got the FB Javascript SDK loading asynchronously, and am using OG meta tags:
<meta property="og:url" content="https://[subdomain].mysmilecentral.com/public/show?link_code=[access code for individual's photo]" />
<meta property="og:title" content="Order Pictures of [child's name] at [studio name]'s MySmileCentral!" />
<meta property="og:description" content="View images and/or order pictures of [child's name]." />
<meta property="og:image" content="https://[our S3 bucket]/[path to JPEG image]" />
Facebook's Object Debugger finds everything without a problem.
However, the Share Dialog doesn't show the thumbnail image defined in my og:image tag until I refresh the page. Every subsequent time that image is shared the thumbnail properly displays without needing a page-refresh.
What's the issue here?
For anyone revisiting this issue, as of approximately Nov. 11, 2014, Facebook has provided a better solution than previously mentioned. According to this FB bug report:
If your site provides both og:image, og:image:width and
og:image:height, that image will be used even for the first share
created. Failing to provide these means that you will need to wait for
our crawlers to fetch and analyze the images first.
See http://ogp.me/#structured for an example of how this can be done.
Can you confirm that your image is valid:
og:image – This is an image associated with your media. We suggest that you use an image of at least 200x200 pixels. However, bigger is better, so if you have a 1500x1500 image that you can use, please use it. We'll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the more likely it will be used when sharing stories on Facebook. (Note: image sizes must be no more than 5MB in size.)
From Facebook: Maximizing Distribution for Media Content
EDIT:
Clear the cache of your browser.
I faced similar issue, submitted a bug to Facebook: https://developers.facebook.com/bugs/354887144656001
The first share issue appeared to be known bug to them, and there they suggest a workaround (submitting the new page to FB Debugger programmatically right after page creation).
I have these og meta tags in place:
(I'm replacing the actual values with examples here, it's a client's site and I'd like to be descrete)
<meta property="og:title" content="Article title"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.site.com/articles/article"/>
<meta property="og:site_name" content="Site title"/>
<meta property="og:description" content="Description, cca 200 characters"/>
<meta property="og:image" content="http://www.site.com/images/thumb.jpg"/>
The thumbnail used for og:image is 300x300px.
When I run the URL through facebook's debugger (ex linter) tool, it finds no errors or warnings. It displays one og:image, the one that is defined in the meta tags, as it should.
However, when the URL is actually shared on facebook, facebook offers two thumbnails - one which is the actual og:image, and also one completely random image, which is actually part of the layout.
Sometimes it offers the og:image first, but sometimes the other one is loaded first instead. So it happens that people share the link on facebook with a random piece-of-the-layout image in it.
I can't figure this out. Why is facebook doing it? I believe I've done everything by the book? Why is it loading this one extra image? Every google search I've run on "facebook loads wrong image" and similar strings only provides obvious advice that you need to have one og:image specified - which I do!!
I thought it might be a matter of fb cache, but it loads it on every single article. I have tried changing the image file name, and even loading it from a different domain name - and changing its colour to be sure facebook is loading it from the server and not its own cache. Nothing helped, facebook seems to have taken an extreme liking to it, it just won't let go of it.
Is there any way on earth to prevent this? I'm at my wits end. Has anyone had similar problems? :(
Remove the url meta tag. Looks like the metadata is not on the same page as the content. What FB crawler is doing is fetching the meta tag info from the provided url.
One of possible reason can be size of image that you are setting in
<meta property="og:image" content="domain/images/thumb.jpg"/>
Image size of specified image in above meta data should be greater than 200*200 for facebook sharing else it takes some random image probably the last in that html.Hopefully someone can still find it useful.
I have a odd problem - when I share a link of a page from our website, the image does not show as a thumbnail (sometimes). It has the correct meta data but its almost like it times out.
For example
http://modetro.com/our-favourites/vintage-retro-sankyo-japanese-flip-alarm-clock-mode-no-401-space-age-mid-century
Has the meta tag
<meta property="og:image" content="http://modetro.com/image/cache/data/ebay/vintage-retro-sankyo-japanese-flip-alarm-clock-mode-no-401-space-age-mid-century/652436936_o-340x340.jpg" />
If I share this link on FB it does not show the thumbnail? I have used the debug tool for this and other pages and SOMETIMES it gets the image and sometimes doesn't? any ideas why?
According to Facebook, they have a glitch that they are working on .. see this page here