How to make Facebook use a custom thumbnail image for your website

Are you frustrated by the choice of thumbnail images Facebook offers when linking to your website pages?

You are not alone.  But there is a way to fix the problem.

When sharing a link to your website on your Facebook news feed, you will be given a choice of thumbnails to accompany the post and they can sometimes feel pretty darn random.

Even more frustrating is when the image you want to use as the thumbnail is on the website page being shared but not in the list of thumbnails Facebook has chosen for you.

Facebook seems to have its own bizarre method of deciding which images on a page are the most relevant to the link you are sharing.

This may include images from any adverts or unrelated sidebar widgets that are also being displayed on the linked website page.

Facebook has a developer tool called URL Linter that checks a URL, showing which image it finds as being most relevant to the link.  Very handy for testing your changes.

Assigning your own thumbnail

As you can see from the image above, we have setup a standard image for Facebook to use with our website blogs and articles.

This is what we are going to show you how to do.

First create and upload a thumbnail image to your website.  We decided on an optimised 250 x 250 pixel PNG image.

Secondly, include a line similar to the one below, into the HEAD section of your website HTML.

[xml]<link rel="image_src" href="/images/blog-thumbnail.png" />[/xml]

The “image_src” link rel is one of the key tags that Facebook will look for when associating images with shared links.  Of course you need to change the “href” to the URL for your own uploaded thumbnail image.

We use a custom WordPress theme for our website and our thumbnail resides in the images folder of our theme and the code we use in our header.php file to produce the line above is this:

[php]<link rel="image_src" href="<?php bloginfo(‘stylesheet_directory’); ?>/images/gravitational-fx-web-design-dublin-blog-articles.png" />[/php]

It outputs the same result but PHP dynamically works out the URL path to our current theme and will work for your WordPress theme too.

Tip: Facebook usually picks up your thumbnail changes within a day or so, but you can force a change for a particular page link using the URL Lint tool.

Just one thumbnail?

This example is great for assigning a standard thumbnail to your website but what is you want to choose a different thumbnail image per page on your website.

For this you will need to implement Facebook’s open graph meta tags on each page you need a different thumbnail image to be used.  The open graph meta tags will override the “image_rel” link tag.

The key tag to implement is the “og:image” meta property tag but you should add the others too to give Facebook as much information as it needs to properly classify your web pages.

If you use WordPress, perhaps you could check for and assign the featured image to the “og:image” property.

That’s a whole tutorial for another day perhaps.

In Summary

Don’t be shackled to the bizarre thumbnail choices Facebook provides for your shared links.

Take the time to implement a standard thumbnail image for your website or go further and dynamically assign an open graph image for each page.

Let us know how you got on.