An Open Graph image is created by a website owner – the image fits perfectly onto a Facebook post when a page is shared. A good one will have context and allure, to encourage Facebook users to click it.
A brand looks more professional – and interesting – when a well put together Open Graph image is featured.
When shared, a page with no OG image will display a grey box or might show a random banner.
You can see below that a grey box is unattractive and doesn’t help the brand to connect with an audience at all. It is easy to scroll passed it. No one likes a grey box.
By contrast, below is a Facebook share of an article that DOES use an Open Graph image. It is so much more vibrant and is much more likely to receive engagement.
In this article I show you OG image sizes and where they appear across the internet. I’ll also tell you how to add one to a WordPress page or post, as well as a HTML page.
Open Graph image size
For Facebook, resize the image to 1200 pixels by 630 pixels.
The landscape rectangle looks fantastic on Facebook shares, justifiably because the Open Graph system is developed by Facebook.
LinkedIn, Pinterest and Twitter will also recognise an OG image when a page is shared. Be aware of size complications on Twitter.
Does Twitter use the Open Graph image?
Twitter robots will default to Open Graph if they can’t find Twitter meta-tags called Twitter Cards.
One thing to be aware of is that the OG image does not fit perfectly into a tweet – content can be cut off.
Create separate images for Open Graph image and the Twitter Card image, for a perfect fit. It doesn’t take long to resize an OG image to a Twitter Card image.
Twitter Card image size should be 1024 pixels by 512 pixels.
I wonder if the two platforms will align one day? It seems ludicrous to make us include two, seeing as the sizes are so similar. Anyhow …
What to include on an OG image
The image must be relevant to article content. A fan can easily be lost if an image is misleading.
An overlay of bright, snappy title text helps to encourage clicks – show the user what the article is about. It could even include a call to action, such as ‘FIND OUT MORE’.
Include a logo on all images – this is known as branding and it helps people to recognise the content. I use my truncated, responsive logo as it’s more modest.
To create an Open Graph image use Photoshop, a free image editor like GIMP or an online image editor such as Canva. Canva is free for the most part, but you’ll need to pay to produce images in the required size.
The Open Graph image on WordPress using Yoast
Yoast SEO is a WordPress plugin that enables WordPress website owners to add meta-tags such as a title and description.
These help search engines to understand the content of page and gives some control as to what appears on a Google search.
Easily add Open Graph images to a WordPress article with Yoast.
Check out WP Beginner’s article on installing Yoast, if you haven’t done so already.
In the WordPress admin area scroll to the bottom of any page or post to find the Yoast edit area.
Click on the Social tab, as shown below.
Once there, click the Facebook title to drop down more options. This can be difficult to see at first.
Use this area to change the way articles appear when shared.
Notice the Facebook Title and Facebook Description fields. By default, standard meta-tags are used on social media. However, the Facebook Description can be a lot longer than the meta-description, used on search engines. So it could be worth completing this area.
To add the OG image, scroll to the bottom to find the Upload button. Click it to add an image at a recommended size of 1200 pixels by 630 pixels.
You’ll need to save (Update) the post or page for the changes to take effect.
Using Yoast PRO you can preview your work. If you haven’t got PRO, share the article on Facebook to take a look at the outcome. Posts can be quickly deleted if the image isn’t correct.
You’ll need to directly share the page – to do this go to the front end of the website, navigate to the article. Now highlight the full URL in the address bar, it will look something like this:
Go back to Facebook, start a new post and then paste the URL. You should see the correctly sized image appear above the Facebook Description meta-tag.
Add Open Graph image using HTML
If you have coded your website in HTML, use the Open Graph tags before the final </head> tag in the files.
<meta property="og:title" content="Your Title"/> <meta property="og:description" content="A full description of the page."/> <meta property="og:image" content="https://mywebsite.net/assets/opengraph/theogimage.jpg"/>
Let me know how you get on adding an Open Graph image to your website.