How to get the right picture to show up in Facebook when you post a link from your site

URL Linter Logo - Facebook DevelopersWhen posting links to Facebook from your blog or website it can sometimes be frustrating that the wrong pictures get displayed next to your link. This is partially because Facebook has an old version of your site cached in their que and is pulling older pictures.

There’s a great tool called Facebook URL Linter that helps fix this problem.

1. First, post your new content to your website, including any pictures you want included in the Facebook link. If you’re blogging, this may be a picture in your new blog post.

2. Visit Facebook Linter at http://developers.facebook.com/tools/lint and enter your URL. Again, if you’re blogging, be sure to enter the specific URL for that post.

URL Linter - Facebook Developers

3. Facebook URL Linter will spin its wheels for a few seconds and a new version of your site will be indexed in their cache.

URL Linter Complete - Facebook Developers

4. Post an update to your Facebook Wall and the new picture thumbnail should be available to choose from!

New Site Media Group Facebook Update

 

WordPress Plugin for Facebook Link Image Control

If your site is a self hosted version of WordPress like mine, you should also install this plugin: Add Facebook Share Thumbnail + Meta

This plugin allow you to specify some of the meta data and image information from your post that Facebook needs … very handy!

Many themes have the problem that they do not generate an appropriate thumbnail with according meta tag in your page head for use with Facebook’s “Share” function. So if someone pushes the share button on one of your posts or pages the suggested image would be everything but your post thumbnail.

There are some rules to follow for preventing this, and this plugin takes care of them!

via WordPress › Add Facebook Share Thumbnail + Meta « WordPress Plugins.

Manually Control how Facebook Interprets Links

The most direct method of controlling the image Facebook scrapes from your site with posting a link is to use the Open Graphs tags.

Here is a quote from Facebook:

Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.

An Open Graph tag looks like this:

If you use Open Graph tags, the following six are required:

  • og:title - The title of the entity.
  • og:type - The type of entity. You must select a type from the list of Open Graph types.
  • og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
  • og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
  • og:site_name - A human-readable name for your site, e.g., “IMDb”.
  • fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.

Check out Facebook’s Open Graph Protocol for more information.

I’ve implemented the manual approach in several cases with success.

Hope that helps!

Please leave a comment below or on Twitter @steinarknutsen.

Thanks,
Steinar

Related Posts

This is a great time to sign up to my newsletter where you'll receive tons of great content only available to my subscribers.

Thanks,
Steinar