What is the ideal OG image size?

The recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. This works well on Facebook, Twitter, LinkedIn, and most messaging platforms.

How do I test my OG image?

Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) or Twitter's Card Validator. You can also use browser extensions that preview Open Graph tags.

Do OG images affect SEO?

OG images don't directly affect search rankings, but they significantly improve click-through rates from social media, increase engagement, and drive more traffic to your site.

Open Graph Images — Complete Guide to Social Media Preview Cards (2026)

What is Open Graph and Why It Matters

Open Graph (OG) is a protocol originally created by Facebook in 2010 that allows web pages to control how their content appears when shared on social media platforms. When someone shares a URL on Facebook, Twitter, LinkedIn, Slack, or messaging apps, the platform reads the Open Graph meta tags embedded in the page's HTML to generate a rich preview card with a title, description, and image.

Without Open Graph tags, platforms attempt to scrape your page and guess what to display. The result is often a broken preview with a missing image, a truncated title, or an irrelevant description. This leads to lower engagement because users are far less likely to click on a link that looks incomplete or untrustworthy.

A well-crafted OG image can dramatically improve click-through rates. Studies have shown that social media posts with proper preview images receive significantly more engagement than those without. For any website that relies on social traffic, getting Open Graph right is not optional — it is essential.

OG Image Specifications

Recommended Size

The universally recommended OG image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This dimension works reliably across all major platforms and devices. While platforms may crop or resize images, starting at 1200x630 ensures the best possible display everywhere.

Format and File Size

Formats supported: JPEG, PNG, GIF (first frame only), and WebP (limited support)
Recommended format: JPEG for photographs, PNG for graphics with text or transparency
Maximum file size: Keep images under 5 MB for Facebook and under 5 MB for Twitter. In practice, aim for under 1 MB for fast loading
Minimum size: Facebook requires at least 200x200 pixels, but images smaller than 600x315 will display as small thumbnails rather than large preview cards

Aspect Ratio Details

Aspect Ratio	Dimensions	Best For
1.91:1	1200 x 630	Facebook, LinkedIn, general sharing
2:1	1200 x 600	Twitter summary_large_image
1:1	1200 x 1200	Twitter summary card, some apps

Platform-Specific Requirements

Facebook

Facebook uses the standard Open Graph protocol and is the most forgiving platform. Images must be at least 200x200 pixels, but anything below 600x315 renders as a small thumbnail. For the large preview card format, use 1200x630 pixels. Facebook caches OG images aggressively, so after updating an image you need to clear the cache using the Sharing Debugger.

Twitter (X)

Twitter uses its own Card system alongside Open Graph tags. You need to include twitter:card meta tags in addition to standard OG tags. Twitter supports two card types relevant to images:

summary: Displays a small square thumbnail (144x144 minimum, 1:1 ratio)
summary_large_image: Displays a large rectangular image (300x157 minimum, 2:1 ratio recommended)

If Twitter-specific tags are not present, Twitter falls back to reading standard OG tags.

LinkedIn follows the Open Graph standard closely. The recommended image size is 1200x627 pixels. LinkedIn is strict about image dimensions — images that are too small will not display at all. LinkedIn also caches shared URLs, and you can use their Post Inspector tool to refresh cached previews.

Slack and Messaging Apps

Slack, Discord, Telegram, WhatsApp, and iMessage all read Open Graph tags to generate link previews. These platforms generally handle 1200x630 images well. Slack in particular benefits from og:image:width and og:image:height tags because it uses them to render the preview before the image fully loads.

HTML Meta Tags for OG Images

Here is the complete set of meta tags you should include in the <head> section of your HTML:

<!-- Essential Open Graph Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of the page content." />
<meta property="og:image" content="https://example.com/images/og-preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- Recommended Image Tags -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Description of the image for accessibility" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description of the page content." />
<meta name="twitter:image" content="https://example.com/images/og-preview.jpg" />
<meta name="twitter:image:alt" content="Description of the image for accessibility" />

Key Points About the Tags

og:image must use an absolute URL. Relative paths like /images/og.jpg will not work. Always include the full URL with the protocol (https://).
og:image:width and og:image:height are technically optional but strongly recommended. They allow platforms to allocate the correct space for the image before it loads, preventing layout shifts.
twitter:card determines the layout Twitter uses. Set it to summary_large_image for the large preview format.
og:image:alt provides accessibility for screen readers and is considered a best practice.

Multiple Images

You can specify multiple OG images by repeating the og:image tag. Platforms will typically use the first one, but some may allow the user to choose:

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/secondary.jpg" />

Design Best Practices for Effective OG Images

Keep Text Minimal and Large

Social media preview cards appear at various sizes depending on the platform, device, and context. Text on your OG image should be large enough to read even when the image is rendered at 400 pixels wide. Limit yourself to a headline and optionally a short subtitle. Avoid paragraphs or small print.

Use a Safe Zone

Platforms may crop your image slightly on different devices. Keep all critical content — text, logos, key visual elements — within the center 80% of the image. Leave margins of at least 60 pixels on each side.

Brand Consistently

Include your logo or brand mark on every OG image so that shared links are immediately recognizable. Use consistent brand colors, fonts, and layout templates across all your pages. This builds visual recognition in social feeds.

Choose High-Contrast Colors

OG images appear in busy social media feeds alongside photos, ads, and other content. High contrast between text and background ensures readability. Dark text on light backgrounds or white text on dark backgrounds both work well. Avoid placing text over complex photographic backgrounds without a color overlay.

Avoid Text-Heavy Images

Facebook historically penalized ads with too much text (the 20% rule), and while this is no longer strictly enforced, the principle remains sound. Images that are primarily text look like ads and receive less engagement. Use the image to complement your title, not repeat it.

Design for Dark Mode

Many users browse social media in dark mode. Test how your OG image looks on both light and dark backgrounds. Avoid images with transparent backgrounds or white borders that disappear in dark mode.

How to Create OG Images

There are several approaches to creating OG images, ranging from manual design to fully automated generation.

Manual Design Tools

Design tools like Figma, Canva, and Adobe Express offer templates sized at 1200x630 pixels. This approach gives you full creative control but does not scale well if you have hundreds or thousands of pages.

Automated Generation

For blogs and dynamic content, generating OG images programmatically is the most efficient approach. Many frameworks offer built-in or community solutions:

Next.js: The @vercel/og package generates images at the edge using JSX-like syntax
Static sites: Build scripts can use libraries like sharp or canvas to generate images during the build process
API services: Dedicated OG image APIs accept parameters and return rendered images on demand

Using an Online Generator

If you need a quick OG image without setting up any infrastructure, an online generator is the fastest path. Try our free OG Image Generator to create properly sized Open Graph images with custom text, colors, and branding. Simply enter your title, adjust the styling, and download the image ready for use.

Testing and Debugging OG Images

After adding Open Graph tags to your pages, always test them before sharing. Here are the essential debugging tools:

Visit the Facebook Sharing Debugger, enter your URL, and click "Debug." The tool shows exactly which OG tags Facebook detects, displays the preview image, and reports any warnings or errors. Use the "Scrape Again" button to clear Facebook's cache after making changes.

Twitter Card Validator

The Twitter Card Validator previews how your link will appear in a tweet. Enter your URL and verify that the correct card type, image, title, and description all display properly.

LinkedIn Post Inspector

LinkedIn's Post Inspector works similarly. Enter the URL of the page you want to check, and it will show the preview card LinkedIn would generate. Use it to refresh LinkedIn's cache after updating your tags.

Browser Extensions

Several browser extensions let you inspect Open Graph tags on any page without leaving your browser. These tools display all meta tags, show the preview image, and flag common issues. They are useful for quickly checking competitor pages or auditing your own site.

Manual Inspection

You can always view the raw meta tags by inspecting your page's HTML source. In Chrome, right-click the page, select "View Page Source," and search for og: to find all Open Graph tags. Verify that the og:image URL is absolute and accessible.

Common Mistakes to Avoid

Using Relative Image URLs

The most frequent OG image error is using a relative path like /images/og.jpg instead of an absolute URL like https://example.com/images/og.jpg. Social media crawlers fetch the image from a separate server and have no way to resolve relative paths.

Forgetting to Update Cached Images

All major platforms cache OG images after the first scrape. If you update your image but do not clear the platform's cache, the old image continues to appear in previews. Always use the platform's debugging tool to force a re-scrape after making changes.

Using Images That Are Too Small

Images below the minimum dimensions (200x200 for Facebook, 300x157 for Twitter) will either not display at all or render as tiny thumbnails instead of large preview cards. Always use 1200x630 to ensure the large card format.

Missing the twitter:card Tag

Without the twitter:card meta tag, Twitter defaults to the basic "summary" card with a small square image. If you want the large image preview on Twitter, you must explicitly include <meta name="twitter:card" content="summary_large_image" />.

Serving Images Over HTTP

If your site uses HTTPS but your og:image URL points to an HTTP resource, some platforms will block or ignore the image due to mixed content restrictions. Always serve OG images over HTTPS.

Ignoring Image File Size

An OG image that is 8 MB might technically meet the dimension requirements, but crawlers may time out while downloading it. Keep file sizes under 1 MB by compressing JPEG images to 80-85% quality or using optimized PNG files.

Not Including Alt Text

The og:image:alt tag is often overlooked, but it serves an important accessibility purpose. Screen readers use this text to describe the image for visually impaired users. It takes only a few seconds to add and improves the experience for all users.

Conclusion

Open Graph images are one of the simplest and most impactful optimizations you can make for social media sharing. By using the correct 1200x630 dimensions, including the proper meta tags, and following design best practices, you ensure that every shared link represents your content in the best possible light.

Start by auditing your existing pages with the debugging tools mentioned above, fix any issues, and establish a consistent template for new content. If you need to generate OG images quickly, try our free OG Image Generator to create professional preview cards in seconds.