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
Assigning your own thumbnail
As you can see from the image above, we have
This is what we are going to show you how to do.
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
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
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
If you use WordPress, perhaps you could check for and assign the featured image to the
That’s a whole tutorial for another day perhaps.
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.