It’s a question we’ve heard many a time and relates to “open graph” images – “When I share a page on my website to social media, an image doesn’t show up” or sometimes the issue is a random image shows up. Why does this happen?
Facebook and Twitter firstly look at the code of your website to see if certain tags/snippets of code are there, to tell the platform what image to show. If that tag isn’t there, the platforms will usually pick out the first image it sees, or sometimes it just won’t even bother doing that, as seen below:
This isn’t ideal for brand continuity. Even worse is when Facebook or Twitter pick an image at random, usually a logo:
Our logo in our header is white, which doesn’t sit very well on white. With our logo being rectangular and the area where Facebook shows the image being square, it usually means there’s some unfortunate cropping.
Ok, you get the problem, and you’re probably here because you’ve seen it for yourself.
The code to tell Facebook what image to use when sharing a web page
<meta property='og:image' content='http://www.digitalpeanut.co.uk/image-relevant-to-the-page.jpg'/>
Simply replace the bit starting http with your own image, then place it in the <head> of the desired page on your website
The code to tell Twitter what image to use when sharing a web page
<meta name='twitter:image' content='http://www.digitalpeanut.co.uk/image-relevant-to-the-page.jpg'/>
Image sizes to use for open graph images
For Facebook, use an image 1200px x 630px.
For Twitter, it’s a ratio of 2:1, with a minimum size of 300px x 157px, maximum of 4096px x 4096px. We’d recommend going for 1000px x 500px.
Having problems adding social media sharing image to your own website?
Never fear, for Digital Peanut is here. We can help you get this added to every page on your website from just £60. Get in touch to tick another niggle off your list. Trust us, sharing on social media is a piece of cake.