OG Image Best Practices: Make Every Social Share Count

When someone shares your link on X, LinkedIn, Slack, or Discord, the OG image is the first thing anyone sees. It's bigger than the title. It's bigger than the description. It is, functionally, a billboard for your product — shown to an audience that's already in the mindset of clicking links.

And most SaaS products either skip it entirely or use an auto-generated screenshot that looks terrible at thumbnail size.

Why OG Images Matter

Social sharing is the primary distribution channel for most early-stage SaaS products. Every time someone shares your link, the platform renders a card. That card has three elements:

1. Image (1200x630, the dominant visual)
2. Title (truncated after ~60 characters)
3. Description (truncated after ~150 characters)

The image occupies 70%+ of the card's visual weight. A compelling OG image can increase click-through rates by 2-3x compared to a missing or default one. For a product that gets 100 shares/month, that's the difference between 50 and 150 visits — with zero additional effort.

Technical Requirements

Dimensions and Format

Meta Tags

<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Description of the image" />

<!-- Twitter/X Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

Critical: Use summary_large_image for Twitter cards. The default summary card shows a tiny square image — you lose the entire billboard effect.

In Next.js

export const metadata: Metadata = {
  openGraph: {
    images: [{
      url: '/og-image.png',
      width: 1200,
      height: 630,
      alt: 'Your description here',
    }],
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/og-image.png'],
  },
}

Design Principles

1. Readable at Thumbnail Size

OG images are rarely viewed at full 1200x630. On mobile X/Twitter, they render at roughly 500px wide. On Slack desktop, about 400px. Design for the smallest expected size.

• Minimum font size: 40px (at 1200x630 canvas)
• Maximum 6-8 words in any text block
• No body text — just headline and brand

2. Use Your Brand Colors

Your OG image is a brand touchpoint. Use your primary color palette — background, text, and accent colors should match your product. This creates recognition when users see your links repeatedly.

3. Include Your Logo

Small, in a corner. Not the hero element — but present enough that someone who has seen your product before recognizes the card immediately.

4. One Clear Message

What does this page do for the viewer? That message, in 3-6 words, is your OG image headline. Not your company description. Not your tagline. The specific value of this specific page.

5. High Contrast Text

Text on OG images must survive JPEG compression, screen brightness variations, and platform-specific overlays (some platforms add dark gradients at the bottom for title text). Use high-contrast combinations: dark text on light backgrounds, or white text on dark/saturated backgrounds.

OG Image Patterns That Work

Pattern 1: Centered Text

Your brand name and tagline centered on a solid or subtle gradient background using your brand colors. Clean, fast to create, works for every page type.

Best for: Homepage, landing pages, blog index.

Pattern 2: Gradient + Bold Text

Primary-to-accent color gradient with large white text. High visual impact, feels modern and bold.

Best for: Marketing pages, feature announcements, product launches.

Pattern 3: Card Layout

White or light card overlaid on a colored background. Logo top-left, headline in the card, subtle border. Feels structured and professional.

Best for: Blog posts, documentation, changelog entries.

Dynamic OG Images

For blogs and pages with unique content, static OG images don't scale. You need dynamic generation — one template that renders different text per page.

Next.js ImageResponse

Next.js supports OG image generation at the edge using ImageResponse:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export default async function OgImage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        height: '100%',
        backgroundColor: '#1a1a2e',
        color: '#ffffff',
        padding: '60px',
        justifyContent: 'center',
      }}>
        <h1 style={{ fontSize: '56px', lineHeight: 1.2 }}>{post.title}</h1>
        <p style={{ fontSize: '28px', opacity: 0.8 }}>{post.description}</p>
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

This generates a unique OG image for every blog post, automatically. No manual design needed.

Limitations

• ImageResponse uses Satori under the hood — supports a subset of CSS (flexbox only, no grid)
• Custom fonts require loading font files as ArrayBuffer
• Complex layouts can be slow to render on first request (cache aggressively)

Platform-Specific Behavior

Twitter caching is aggressive. Once Twitter fetches your OG image, it caches it indefinitely. If you update your image, you must use the Card Validator to force a refresh. LinkedIn has the same issue — use Post Inspector.

Common Mistakes

No OG image at all. Platforms show your favicon in a tiny square, or a gray box. It looks broken. Every page needs an OG image.

Screenshot as OG image. Product screenshots are too detailed to read at thumbnail size. They look like noise, not information.

Too much text. OG images are not slide decks. 3-6 words for the headline, your logo, done. Every additional word reduces the size of every other word.

Wrong aspect ratio. If your image isn't 1200x630 (1.91:1), platforms will crop it unpredictably. LinkedIn crops the bottom. Twitter crops the sides. The result always looks worse than a properly sized image.

Forgetting the og:image:alt tag. Alt text makes your OG images accessible to screen readers and improves SEO signal. Describe what the image shows, not what the page does.

Using WebP. Some platforms (notably LinkedIn and older Facebook crawlers) don't support WebP for OG images. Stick with PNG or JPEG.

Testing Your OG Images

Before shipping, validate on every major platform:

1. X/Twitter: Card Validator
2. LinkedIn: Post Inspector
3. Facebook: Sharing Debugger
4. Slack/Discord: Paste the URL in a test channel

Also test on mobile — that's where most social browsing happens, and where sizing issues become obvious.

Generate, Don't Design

Creating OG images manually in Figma for every page doesn't scale. You have three options:

1. Dynamic generation with ImageResponse in Next.js (free, requires code)
2. Template-based tools like og-image.vercel.app (free, limited customization)
3. Brand-matched generation with Brand Generator — creates 3 OG templates using your exact brand colors, fonts, and logo. Every template is pixel-perfect at 1200x630.

The best OG image is one that exists, matches your brand, and ships today. Don't let design perfectionism cost you social traffic.