I'm a professional game developer from Wakefield, England, working as a senior programmer for Rebellion North.
I'm a married father of five and I a also sometimes do Retroburn stuff.
Martin 'Bytrix' Caine
Father. C++ Games Programmer. Cyclist. Guitarist.
2013 3d alphalabs amazon apple archivirtual asynchronous battlefield bad company 2 ben 10 bepu beta blackmagic design blog blue marble bootcamp borderlands bsp calibration charity charvel childsplay comments competition content tracker counter-strike crash csgo css3 cycling dear esther deferred deus ex develop conference direct x discipline documentation doom 3 bfg dpi dr bott eidos elite force email deliverability eurogamer expo facebook focus fresnel game development game horizon game republic gamedev games gaming geoip girls make games global offensive grid guitar half-life 2 hawken hd7 hobbyist htc humble indie bundle imac indie indie trials indietrials intensity pro ip-countryside iron man 3 jamulus rift jquery kids kinect launch conference left 4 dead live lost mac mac osx manchester manhacks mass effect 2 matrox maya minecraft mirrors edge montreal morrowind movies museum of the microstar music mxo2 mini mysql nausea network networking nokia normal mapping obj oculus rift omnitrix ouya pedal for pounds php physics playstation suite port25 portal portal 2 positron posters powermta project aedra project euler promotion properties proton pulse ps vita ps4 psn racer reddit rendering retroburn game studios reviews rift racer riftracer roadkill roller coaster sdl2 shadow racers sharks shoct skyrifters snds space cadet spam trap star trek steam stencyl storage super stock sd1 fr superhot team fortress 2 tesselating tesselation texture editor thunderbird thunderclap ticktock games tiga track builder track bulder trials tv twitter uk ultimatrix usergroup vequencer video vireio visual assist visual studio vorpx voucher vr vr cinema war thunder warren web willow windows 8 windows 8.1 windows phone 7 workbench wp7 wp7dev xbla xblig xblig network xbox xbox live indie games xna xnaukug xperia play zombies on the holodeck
Email Deliverability
Thursday, May 23rd 2013 / Web

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:
Tags:   facebook   reddit   web