How to set Social Sharing Images

James Mills > Code & Development > How to set Social Sharing Images

You may have noticed that when you share my blog posts on Social Media and services like Slack, Telegram and WhatsApp etc. you get to see a nice image accompanying the link to the post.

Improved CTR

These images really help with Click Through Rate (CTR) and I have found that engagement on the shares and posts are so much higher with more likes, retweets and comments when there is a featured image included.

Manually code all the tags

There are a number of ways to achieve this. You can code the Open Graph tags, Twitter Card tags etc into the head part of your page. There is an amazing list of these tags maintained by Josh Buchea on GitHub.

The main ones you want to consider:

Make sure you include the Open Graph ones. You can read more about the Open Graph protocol here. I have found that most of the services like WhatsApp, LinkedIn, Facebook and Twitter will all fall back to use the Open Graph tags if you don’t use anything else.

I would still advise using the Twitter Card and trying to mark up your data with markup if you can.

Creating the image

There is so much conflicting information on the web about what sizes the image should be for the various different tools and services.

One company who I have been following since they started is Buffer. They are an incredibly amazing company for so many reasons (I might touch on them in a future post). They have covered the image size topic here on their blog where they talk about ideal image sizes social media posts.

Buffer built an amazing service called Pablo. Pablo allows you to either pick an image from their gallery or upload your own. You can quickly and easily add titles and text on top of the image. You pick the font and the layout. Then, with one click, you can download the optimised version of the image.

Screen shot of the Pablo service by Buffer.

Using WordPress

The easiest way (and what I use for this blog) is to use the Yoast SEO Plugin. This plugin is a must-have if you are running a blog on WordPress in general. The added bonus is that for every article you are able to select and set an image to use for social sharing. You will see this option at the bottom of the blog editor.

Yoast SEO settings for customised social image sharing

Testing tools

Still work to be done…

I think there is still a fair amount of work you could do to make sure that the image is optimal for each and every sharing possibility. For a recent project called Flight Searches, we have hardcoded the meta tags and tried to use optimised images for each service. However, you will still see that some services cut off the text on images if you are not careful!

Link share on WhatsApp iOS.

I would love to know your thoughts and how you fit the social sharing images into your blogging routine.

Update January 2020

I have just noticed that GitHub offer a nice template for adding social share images to a project. They say images should be at least 640×320px (1280×640px for best display) and offer the below template to use

Leave a Reply

Your email address will not be published. Required fields are marked *