37

Facebook sometimes does this really neat thing where they show a thumbnail preview of a website you link to in a status update. It is usually the website's logo.

fb status

I'm wondering what the trick is to get this to work for my site, so if I were to share http://www.example.com, I would see my site's logo/favicon in that preview box. How would I do this?

Belisarius
  • 21
  • 1
  • 1
  • 7
Hristo
  • 45,559
  • 65
  • 163
  • 230
  • possible duplicate of [How does Facebook Sharer select Images?](http://stackoverflow.com/questions/1138460/how-does-facebook-sharer-select-images) – Axel Guilmin May 09 '15 at 20:43

2 Answers2

76

Try your site in this facebook debugger tool.

http://developers.facebook.com/tools/debug

It will tell you what is missing.Eg. below in page head

<meta property="og:image" content="[url to image]" />
<meta property="og:title" content="[page name]" />
<meta property="og:description" content="[content description]" />

There are different ways depending on how your site is built. Eg. This Wordpress plugin creates a link for each image on the page so you can chose between your logo and any other post image on the page.

Update 2017: It is now recommended to register a Facebook App ID for your site otherwise the debugger will give you an error. More tags and info

chris
  • 2,913
  • 4
  • 43
  • 48
  • You saved the day with this debug! In my case my og:type wasn't the first one, then facebook aren't recognizing it. – Wellington Zanelli Oct 16 '14 at 18:09
  • I have done this and I still get this error message: "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.oceanview335.com/Pictures/2015%20DDGMs.png' will be used instead." – CigarDoug Dec 03 '14 at 00:47
4

You can put this in your page's source:

<link rel="image_src" href="http://somesite.org/img/title.jpg" />

Steve
  • 2,936
  • 5
  • 27
  • 38