The Complete Guide to Social Media Preview Images

What Are OG Images?

Open Graph (OG) images are the preview images that appear when you share a link on social media platforms like Twitter, LinkedIn, Facebook, Slack, and Discord. They're defined using the og:image meta tag in your HTML.

A good OG image can increase your link's click-through rate by 2-3x compared to links with no preview image or a generic fallback.

Why OG Images Matter

When someone shares your website on Slack or Twitter, the first thing people see is the preview card. That card includes:

• A title (from og:title)
• A description (from og:description)
• An image (from og:image)

Without a custom OG image, platforms either show nothing or grab a random image from your page. Neither looks professional.

The Right Dimensions

The standard OG image size is 1200 x 630 pixels (1.91:1 aspect ratio). This works across all major platforms:

• Twitter/X: Shows full image in timeline
• LinkedIn: Full-width preview card
• Facebook: Large preview card
• Slack/Discord: Embedded preview

How to Generate OG Images Automatically

Instead of designing each OG image manually in Figma, you can use an API to generate them dynamically based on your page title and template.

With OG Image Generator, it's a single GET request:

https://ogimg.xyz/api/og?title=Your+Page+Title&template=gradient

This returns a 1200x630 PNG in under 200ms. You can then use it in your HTML:

``html `

Choosing the Right Template

Different templates work better for different content types:

• Gradient — Great for blog posts and landing pages
• Minimal — Clean look for documentation and tools
• Dark — Perfect for developer tools and technical content
• Bold — Eye-catching for announcements and launches

OG Image Generator offers 10 professional templates and 10 background patterns, all customizable via URL parameters.

Best Practices

1. Always set OG images — Never leave the og:image` tag empty 2. Use dynamic generation — Don't create images manually for every page 3. Include your brand — Use consistent colors and typography 4. Test across platforms — Preview cards look different on each platform 5. Keep text readable — Large font, high contrast, minimal words

Next Steps

• Try the OG Image Generator — Free 50 images per month
• Read the API docs — Full parameter reference
• Check your current OG images — Geonapse audits your meta tags as part of its AI visibility check