When you attach a link to share on Facebook, you’re typically presented with up to nine thumbnails pulled from img tags on that site. In many cases, one of these thumbnails will work fine, but sometimes the images aren’t ideal or the site owner wants a specific image to show up. Fortunately, there’s a simple tag you can add to solve this problem.
<link rel="image_src" href="http://example.com/logo.png" />
Just put that tag in the head portion of your HTML, and the image specified (in this case “logo.png”) will be the new default (and only) choice for Facebook sharing. There are a few things that you should know though. First, Facebook caches these images, so you may not see the immediate change. I’m not sure exactly how long the cache is, but I saw changes in under 24 hours on a site I was working on. The other really big thing to know about is that Facebook has specific rules for the image:
The thumbnail’s width or height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.
That’s per the developer wiki. Although some other sites also make use of the tag and specified image, your image must meet these requirements for it to work with Facebook sharing. If your image does not meet these requirements, it will not show up at all, and no other options will show up either. People will not be able to select any thumbnail when sharing your site.
It’s also worth noting that Facebook makes use of the traditional meta tags (title and description), so you should be sure to include those on your pages. I know many people have gotten out of the habit of adding them in because they were most commonly used with search indexing, but most search engines use context from your actual content instead of those tags.