How to show preview images with posted links

If you're anything like me you find interesting stuff all over the internet that you like to share with people. I share things on Facebook, Twitter, LinkedIn, and Reddit quite frequently.

I also like to share my blog posts and press releases through each of these social networks and news portals too. Annoyingly however I'll go to post a link and notice that no image has accompanied the link, something like this:



The reason for this is that the page does not seem to clearly indicate (through it's code) which image is the primary image on the page. Thus, Facebook can not decide which image to post along-side the link and just leaves the space empty.

What we want though is for Facebook links to associate an image which just looks a whole lot better when we post our links like this:



So how did I do this? It's pretty simple actually, you can specifically instruct Facebook to use a particular image as your little preview by adding a meta tag to the header block of your website. You will most likely want to do this dynamically based on the content contained within the page or post:

<meta property="og:image" content="http://yoursite.tld/yourimage.ext" />

There's also a more generalized tag that does the same thing and it's advised that you put both in to your header:

<link rel="image_src" href="http://yoursite.tld/yourimage.ext" />

What prompted me to finally look in to this was my recent posts on Reddit. I had noticed that all links to my website were posted with the Reddit default 'no image found' icon. This means they don't stand out as much amongst all the other links and now I'm using the two new tags in my header I'm seeing a correctly associated link next to my post on Reddit:



Now some of you may be thinking this is great if it's your own site but what about linking to external sites where you don't have access to change the code? Unfortunately there's nothing you can do in that case, except maybe contact the site owner and make them aware of this little piece of code they can add to their site. You may have noticed in the screenshot of my Reddit posts above how YouTube is already doing it correctly and shows the default image of the video I linked to as it's preview. Many websites do, but some don't and I think if the website owners knew it was just a quick fix they'd probably put it in place.

If you found this post helpful please leave a comment below: