A website admin creates an Open Graph image – the image fits perfectly onto Facebook, LinkedIn, X, and WhatsApp posts when a web page or blog post is shared. A good one will have context and allure to encourage Facebook users to click it.
A brand looks more professional – and attractive – when a well-put-together Open Graph image is featured.
When shared, a page with no OG image will display a grey box or a random banner.
As shown below, a grey box is unattractive and doesn’t help the brand connect with its audience. It is easy to scroll past 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 more vibrant and is much more likely to receive engagement.
In this article, we will discuss the sizes of OG images and their various appearances across the internet. Additionally, we will explain how to add an OG image to a WordPress post or page, as well as to an HTML page.
Open Graph Image Size
The suggested size for a Facebook Open Graph image is 1200 by 630 pixels, and it should not exceed 8 MB. So, remember to optimise the image before uploading it to your site.
The recommended, most up-to-date size is on the Facebook Developers page: Images in Link Shares.
The minimum requirement is 200×200 pixels.
The landscape rectangle (1200 × 630 pixels) looks fantastic in Facebook shares, which is fitting, since Facebook developed the Open Graph system.
LinkedIn, X and WhatsApp will also recognise an OG image when a page is shared. Be aware of size complications on Twitter X.
When the image is less than 600 pixels wide, Facebook posts display differently.
Instead of being displayed full-width and stacked under the text, the image will float to the left in a column.
In our opinion, the small image doesn’t stand out as well. Go for the large size every time.
Does X Register the Open Graph Image?
X 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 get cut off.
For a perfect fit, create separate images for the Open Graph and Twitter Card. 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.
Wouldn’t it be nice if the two platforms would align one day? It seems ludicrous to require us to include two when the resolutions are so similar.
What to Include on an OG Image
The image must be relevant to the article content – you can quickly lose a fan if an image is misleading.
An overlay of bright, snappy title text helps to encourage clicks – show the reader what’s in the article. It could even include a call to action, such as ‘FIND OUT MORE’.
Less is more when it comes to text on Facebook images, though.
Include a logo on all images – this is known as branding, and it helps people recognise the content. We use the truncated, responsive logo as it’s modest.
To create an Open Graph image, use Photoshop, a free image editor like GIMP or an online image editor like Canva. Canva is free for the most part, but you’ll need to pay to produce images in the required size.
The Yoast Open Graph Image
Yoast SEO is a WordPress plugin that enables WordPress website owners to add meta tags such as a title and a description.
These help search engines understand the page’s content and control what appears in Google search results.
Website owners can add metadata, and Yoast also enables us to add Open Graph images to any WordPress article.
WP Beginner has a helpful article on installing Yoast SEO on WordPress.
Add a Yoast Open Graph Image
Once Yoast is installed and activated, you’ll find the Yoast edit area at the bottom of any page or post. Sometimes you need to open it up to see the options.
To add a Yoast Open Graph image, click on the Social tab, as shown here.
Use this area to gain more control over the way articles appear when shared on social media.
Notice the Social Title and Social Description fields.
By default, standard meta-tags are used on social media. However, the Social Description can have a higher character count than a standard meta-description used on search engines.
Using the Social Description, you could also write directly to social media fans, so it’s worth completing this area.
To add the OG image, scroll to the bottom to find the Social Image button. Click 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.
Yoast Premium Versus Yoast
In Yoast Premium, you can preview the Open Graph image before sharing the all-important post on Facebook.
We love these social appearance templates, released in the latest Yoast Premium version. It gives an excellent overview of how things will appear on social platforms.
Yoast has created a decent explanation video to show you just what we mean: The Yoast SEO Social Previews.
If you haven’t got the Yoast Premium version, you’ll need to share the article on Facebook to see the results.
To view the OG image with Yoast standard, you’ll need to share the page directly.
To do this, go to the website’s front end and navigate to the article. Now highlight the full URL in the address bar; it will look something like this:
https://yourwebsiteaddress.com/blog/open-graph-image/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 Via HTML
If you have coded your website in HTML, use the Open Graph tags before the final </head> tag. The meta property for an Open Graph image is:
og:image
Include the width and height so Facebook can render the image quickly.
<meta property="og:image" content="https://website.net/assets/opengraph/theogimage.jpg"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="A full description of the page."/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>Notice in the code above. The OG title and description will appear on the Facebook post.
These can be entirely different from the page’s meta-title and meta-description, so you could use them to personalise content for LinkedIn fans.
Open Graph Image Lowdown
- Recommended size is 1200 × 630 pixels to display a large rectangle stacked under the post text.
- Images under 600 pixels will display to the left of the OG title.
- The minimum size is 200 × 200 pixels, but we don’t recommend anything this low in resolution.
- Use text overlay, but keep words to a minimum.
- Use height and width attributes to help the image render quickly.
