OG image best practices for your website

Acclaim/Blog/Articles/OG image best practices for your website
  • Comments icon
    0 comments
  • 3 minutes of reading
  • 1022 views
Share

OG image stands for the Open Graph image. The Open Graph was created to standardize the use of metadata within a webpage to represent the content of a page.

OG image example

OG image stands for the Open Graph image. The Open Graph was created to standardize the use of metadata within a webpage to represent the content of a page. So we can set for instance og:title, og:description and of course og:image.

OG image tag is important because this is a picture which is visible when sharing your website across many social networks (Facebook, Twitter, Linkedin), and apps. Therefore, optimizing its presentation can be crucial for somebody’s interest or even decision to click on the link you shared. Having today’s world in mind, how can you grab someone’s attention in a fraction of a second?

What can you do to grab the reader’s attention?

It’s not an easy task to grab the reader’s attention on social media. That’s why a unique image representing your website is exactly what you need. Sharing your page without an OG image will result in a boring grey box on social media feed or randomly chosen pictures.

Good OG image should not only be eye-catching but should also be relevant to the content of your website. As mentioned before, an OG image should be unique – having the same stock picture that most readers have already seen thousands of times is not what you need to grab someone’s attention.

What is the perfect OG image size and aspect ratio?

As mentioned before, an OG image is used across multiple platforms, however, we cannot select a different picture for each platform. There can only be one OG image assigned to each website. So which is the best size for it?

Recommended OG Image size is 1200 x 630px, which is 1.91:1 aspect ratio. This size will work best not only on Facebook but also on Twitter and LinkedIn. And what about file size? The biggest image you can have varies by platform. Some platforms support images as big as 8MB (Facebook) while others have small max sizes, like 2MB which is the case for LinkedIn or Telegram.

How to add an OG image to your website?

All meta tags should be added inside <head></head> tag. You can see below an example for og:image meta.

<meta property="og:image" content="https://525365-1673943-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/09/Acclaim-OG-Image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="628" />

Adding OG image on WordPress website

If you’re using WordPress CMS for your website, adding an OG image to your website is super easy. You can do it by using 👉 Yoast SEO plugin 👈

  1. Choose Yoast Seo Plugin (SEO) from your left-hand side menu. The SEO settings will expand providing you additional options.
  2. From this menu click on Social.
  3. Click on Facebook tab and add your OG image in the default image section.
yoast seo social settings
setting og image in yoast seo

How to check if your OG image works without any problem?

To check if the og:image we’ve chosen for our website works well, we can use one of the many available OG image testing tools, like 👉 facebook sharing debugger 👈 or 👉 linkedin post inspector 👈. You can just paste your website URL and have a glimpse of how people will see when that link is shared on social media

OG Image is an important element of your social media marketing strategy. A good picture will grab the reader’s attention and will help you to increase your click-through-rates (CTR). I hope this article will help you to prepare a perfect OG image for Facebook, Twitter or any other platform where you want to share your website.

Related articles

Why choose a mobile-first approach for web development?

The Mobile-First approach focuses on developing an interactive experience for mobile devices before designing desktop websites. Find out why you need to pick mobile-first for your next website development project.

Comments

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.