Open Graph Tags, Images, and Social Media
[Originally published 11th September 2016 – Updated for 2022]
When people share content on social media, you’ll notice that sometimes the image doesn’t go with the post. Or each post has the same generic one. Open graph tags are the way to ensure the right images get shared on social media.
Images and social media
Images are important on social media. Research shows they are key to high levels of engagement: using images in your posts leads to more likes, comments, shares, retweets, and so on. Plus, you know what they say… an image is worth a thousand words!
But it can’t just be any old image. If you’re sharing a blog or content from your website, the image needs to reflect the subject matter of the blog itself, giving your audience some idea of what it’s all about. You need to tickle their fancy with an eye-catching image.
The thing is, social media sometimes has trouble locating images on a website which is why the same one, or same few, get used over and over again. It usually does OK finding the title of a webpage, the URL, and the description. But when it comes to images, if it isn’t told which one to use and it isn’t obvious, it will take a guess. This is precisely where open graph tags come in.
Open graph tags
Open graph tags help the process of extracting information from a website. They were introduced by Facebook in 2010 to help people effectively share their content online. They are basically a piece of code that sits in the header section of a webpage. These tags point social media websites in the right direction when they’re looking for information. This means all of your posts show the right description, titles, URL, and images.
Nowadays, each social media platform uses open graph tags to ensure the right images are shown on posts. Facebook, LinkedIn, Twitter, Pinterest – they all use them. Some use their own specific variation (Twitter) but also support general open graph tags, so you only need to use one kind.
It is relatively simple to insert open graph tags into the code of your website, and there are some good blogs around on the internet that explain just how to do it. If you’re using a content management system such as WordPress, the process is a lot easier. All you need to do is download a plugin (Yoast or Facebook open graph protocol) and you’re good to go. Of course, your web developer will be more than capable of putting these tags in and generally they should do it without having to be told.
Optimising images for social media
Generally, images that are around 610 pixels wide look the best on social media. It can get a bit tricky though because each platform recommends different sizes. For example, the recommended size for a large Twitter image used to be 280×150 pixels but for Facebook, the recommended size used to be 200×200 pixels right up to 1200×630 pixels.
While it’s perfectly fine to use one image for all platforms, it is also possible to use open graph tags to specify an image size for each platform. This means each platform will look exactly as it should! This is also quite easy to do with instructions from blogs around the internet but your web developer should also be able to do this when they set up your website.
An added bonus of optimising your image sizes for social media is that correct sizes can help content spread. If a picture looks good and fits the page, people will view it in a better way and will be more likely to share your content.
Tips for success:-
- Place open graph tags in the header area of a website
- Make sure your images are at least 610 pixels wide in general
- 1024×1024 works well for Instagram
- Twitter has recently changed thier app, so images are no longer cropped, so you could use the same 1024×1024 images on Twitter now too!
- For Facebook, the best sizes used to be between 200×200 pixels and 1200×630 pixels, but again recent changes mean that 1024×1024 works well for Facebook as well.
Image resizing Tools
Biteable – An ad-free online image resizing tool with the most extensive guide on different sizes for online use including social media posts!
GIMP – (GNU Image Manipulation Program) – An open-source application that relies on a community of volunteer developers who maintain and improve the product.
Photoshop – Adobe Photoshop is a professional software used for editing photographs, compositing digital art, animating, and graphic design.
Promo – Promo is an online video maker that gives you everything you need to make high-quality professional video clips, royalty-free music, customisable video templates, and more – but also includes an image resizer!
Colorcinch – AI-powered specialty effects that turn your photos into sketches, paintings and cartoons – all with just a click. No sign up required. Instantly create, edit and turn your photos into personalised artwork.
