The Ultimate Guide to Open Graph Images (Sizes, Formats & Best Practices)

TL;DR

• Best size: 1200 × 630 px (safe across most platforms)
• Aspect ratios: Facebook & LinkedIn ~1.91:1, Twitter 16:9
• Formats: JPEG for photos, PNG for graphics/logos
• File size: Keep under 300 KB for fast loading
• Text: Minimal, keep content centred
• Testing: Use tools like the Facebook Debugger

When you share a link online, the image is often what catches people’s attention first. That image comes from your Open Graph (OG) tags. Get it right, and your link looks sharp and clickable. Get it wrong, and you might end up with a blurry thumbnail or no image at all.

This guide breaks down everything you need to know about Open Graph images: the right sizes, the best formats, and a few easy best practices.

Why Open Graph images matter

• First impressions count – The image is usually the biggest part of a social preview.
• Better engagement – Posts with images get more clicks, shares, and likes than text-only links.
• Brand control – Instead of letting platforms pick a random picture, you can make sure the right one appears every time.

If you’re new to OG tags, it might help to read our Beginner’s Guide to Open Graph Tags first.

Recommended Open Graph image sizes

Every social platform displays link previews slightly differently. Here are the most common sizes:

• Facebook & LinkedIn: 1200 × 630 px (aspect ratio ~1.91:1)
• Twitter (X): 1200 × 675 px (aspect ratio 16:9)
• General safe size: 1200 × 630 px

A good rule of thumb: stick to 1200 pixels wide. This ensures your image looks sharp on high-resolution screens.

👉 Pro tip: Avoid anything smaller than 600 × 315 px — otherwise your preview might look pixelated.

File formats to use

• JPEG (.jpg) – Best for photos or detailed images.
• PNG (.png) – Best for logos, illustrations, or graphics with text.
• WebP – Supported by some platforms but not all; use with caution.
• GIFs – Rarely work for OG tags (they’ll usually show only the first frame).

Stick with JPEG or PNG for maximum compatibility.

File size matters too

Large files can slow down loading times and may not display correctly. Keep images under 300 KB if possible. Tools like TinyPNG or Squoosh can help compress images without losing quality.

Best practices for Open Graph images

1. Use clear, high-quality visuals – Blurry images will be ignored.
2. Keep text minimal – Too much text can get cut off or hard to read.
3. Mind the crop – Some platforms crop differently. Keep key content in the centre.
4. Be consistent – Use a similar style across all your images for brand recognition.
5. Test your images – Use tools like the Facebook Debugger or an Open Graph Checker to preview how they’ll look.

Example of an Open Graph image tag

Here’s how you add your image to a page:

<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Adding width and height isn’t required, but it helps platforms load the preview faster.

What if your image isn’t showing?

Sometimes you’ve set everything up, but the image still doesn’t appear. Common reasons include:

• The file is too large.
• The URL is blocked (make sure it’s publicly accessible).
• The page needs re-crawling by the social platform.

In that case, try forcing a refresh with the Facebook Open Graph Debugger.

Your Open Graph image is often the difference between someone scrolling past your link and clicking it. Stick to the recommended sizes, use the right format, and always test before sharing.

Next step: Once your images are ready, learn how to Add Open Graph Meta Tags to Your Website.