As developers, we spend hours crafting great content, but often overlook how it appears when shared on social media. Let's fix that with this practical guide to social share images (OG images). What Are OG Images & Why They Matter Open Graph (OG) images are preview images that appear when your content is shared on social platforms. They're your first impression in a crowded social feed. Simple example: When you share your blog post on Twitter/LinkedIn, the large image that appears is the OG image. Quick Size Reference Here's what you need to know for major platforms: Facebook/LinkedIn:
- 1200 x 630px (1.91:1 ratio)
- Minimum: 600 x 315px
- Max file size: 8MB

Twitter:
- 1200 x 600px (2:1 ratio)
- Large card: 1200 x 600px
- Small card: 440 x 220px Pro tip: Design for 1200 x 630px - it works well across all platforms. Implementation in 30 Seconds Add these meta tags to your <head>: 
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" /> 5 Design Tips That Actually Work Text Hierarchy

Main message: 5-7 words max
Font size: Min 30px (test on mobile)


Contrast is King

Dark text on light bg (or vice versa)
Test: Can you read it at thumbnail size?


Brand Consistency

Logo placement (pick a corner and stick to it)
Use your brand colors


Whitespace

Don't overcrowd
Leave 10% padding on edges


Mobile-First

Test how it looks on phone screens
Most shares are viewed on mobile Common Gotchas to Avoid ❌ Using generic stock photos ✅ Custom graphics or branded templates ❌ Text too small/too much ✅ Large, scannable text ❌ Inconsistent branding ✅ Use templates with your brand elements Quick Testing Test your OG images with these tools: Facebook Debugger
Twitter Card Validator
LinkedIn Post Inspector Automate It (Because We're Developers) Why create OG images manually when you can automate? Some approaches: DIY Solution: // Using Node.js + Sharp
const sharp = require('sharp');

async function generateOG(text) {
  return await sharp('template.png')
    .resize(1200, 630)
    .composite([{
      input: Buffer.from(`<svg>...</svg>`),
      top: 0,
      left: 0,
    }])
    .png()
    .toBuffer();
} Vercel's OG Image Generation: // pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export default function handler() {
  return new ImageResponse(
    (
      <div style={{ 
        background: 'white',
        width: '100%',
        height: '100%',
        padding: '50px'
      }}>
        <h1>Hello OG Image</h1>
      </div>
    )
  );
} Want To Make This Easier? I built gleam.so because I got tired of making OG images manually. It's free to try, and I'd love your feedback: 👉 Create your first OG image Get 75% off all paid plans with code: PH75OFF Happy coding! ✨ Found this helpful? Follow me on Twitter/X for more web dev tips. As developers, we spend hours crafting great content, but often overlook how it appears when shared on social media. Let's fix that with this practical guide to social share images (OG images). What Are OG Images & Why They Matter Open Graph (OG) images are preview images that appear when your content is shared on social platforms. They're your first impression in a crowded social feed. Simple example: When you share your blog post on Twitter/LinkedIn, the large image that appears is the OG image. Quick Size Reference Here's what you need to know for major platforms: Facebook/LinkedIn:
- 1200 x 630px (1.91:1 ratio)
- Minimum: 600 x 315px
- Max file size: 8MB

Twitter:
- 1200 x 600px (2:1 ratio)
- Large card: 1200 x 600px
- Small card: 440 x 220px Facebook/LinkedIn:
- 1200 x 630px (1.91:1 ratio)
- Minimum: 600 x 315px
- Max file size: 8MB

Twitter:
- 1200 x 600px (2:1 ratio)
- Large card: 1200 x 600px
- Small card: 440 x 220px Pro tip: Design for 1200 x 630px - it works well across all platforms. Pro tip: Implementation in 30 Seconds Add these meta tags to your <head> : <head> 
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" /> 
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" /> 5 Design Tips That Actually Work Text Hierarchy

Main message: 5-7 words max
Font size: Min 30px (test on mobile) Contrast is King

Dark text on light bg (or vice versa)
Test: Can you read it at thumbnail size? Brand Consistency

Logo placement (pick a corner and stick to it)
Use your brand colors Whitespace

Don't overcrowd
Leave 10% padding on edges Mobile-First

Test how it looks on phone screens
Most shares are viewed on mobile Text Hierarchy Main message: 5-7 words max
Font size: Min 30px (test on mobile) Text Hierarchy Main message: 5-7 words max Font size: Min 30px (test on mobile) Main message: 5-7 words max Font size: Min 30px (test on mobile) Contrast is King Dark text on light bg (or vice versa)
Test: Can you read it at thumbnail size? Contrast is King Dark text on light bg (or vice versa) Test: Can you read it at thumbnail size? Dark text on light bg (or vice versa) Test: Can you read it at thumbnail size? Brand Consistency Logo placement (pick a corner and stick to it)
Use your brand colors Brand Consistency Logo placement (pick a corner and stick to it) Use your brand colors Logo placement (pick a corner and stick to it) Use your brand colors Whitespace Don't overcrowd
Leave 10% padding on edges Whitespace Don't overcrowd Leave 10% padding on edges Don't overcrowd Leave 10% padding on edges Mobile-First Test how it looks on phone screens
Most shares are viewed on mobile Mobile-First Test how it looks on phone screens Most shares are viewed on mobile Test how it looks on phone screens Most shares are viewed on mobile Common Gotchas to Avoid ❌ Using generic stock photos ✅ Custom graphics or branded templates ❌ Text too small/too much ✅ Large, scannable text ❌ Inconsistent branding ✅ Use templates with your brand elements Quick Testing Test your OG images with these tools: Facebook Debugger Twitter Card Validator LinkedIn Post Inspector Facebook Debugger Facebook Debugger Twitter Card Validator Twitter Card Validator LinkedIn Post Inspector LinkedIn Post Inspector Automate It (Because We're Developers) Why create OG images manually when you can automate? Some approaches: DIY Solution : DIY Solution // Using Node.js + Sharp
const sharp = require('sharp');

async function generateOG(text) {
  return await sharp('template.png')
    .resize(1200, 630)
    .composite([{
      input: Buffer.from(`<svg>...</svg>`),
      top: 0,
      left: 0,
    }])
    .png()
    .toBuffer();
} // Using Node.js + Sharp
const sharp = require('sharp');

async function generateOG(text) {
  return await sharp('template.png')
    .resize(1200, 630)
    .composite([{
      input: Buffer.from(`<svg>...</svg>`),
      top: 0,
      left: 0,
    }])
    .png()
    .toBuffer();
} Vercel's OG Image Generation : Vercel's OG Image Generation // pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export default function handler() {
  return new ImageResponse(
    (
      <div style={{ 
        background: 'white',
        width: '100%',
        height: '100%',
        padding: '50px'
      }}>
        <h1>Hello OG Image</h1>
      </div>
    )
  );
} // pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export default function handler() {
  return new ImageResponse(
    (
      <div style={{ 
        background: 'white',
        width: '100%',
        height: '100%',
        padding: '50px'
      }}>
        <h1>Hello OG Image</h1>
      </div>
    )
  );
} Want To Make This Easier? Want To Make This Easier? I built gleam.so because I got tired of making OG images manually. It's free to try, and I'd love your feedback: 👉 Create your first OG image Create your first OG image Get 75% off all paid plans with code: PH75OFF PH75OFF Happy coding! ✨ Found this helpful? Follow me on Twitter/X for more web dev tips. Found this helpful? Follow me on Twitter/X Follow me on Twitter/X for more web dev tips.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The Essential Guide to Social Share Images in 2024

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Want to Stop Wasting Hours on OpenGraph Images? Let's Fix That Together 👋

How to Create Dynamic Open Graph Images

How to fetch Open Graph metadata in Laravel

How to Generate Dynamic Preview Images for Social Media Sharing

0–100 in Django: Starting an app the right way

Want to Stop Wasting Hours on OpenGraph Images? Let's Fix That Together 👋

How to Create Dynamic Open Graph Images

How to fetch Open Graph metadata in Laravel

How to Generate Dynamic Preview Images for Social Media Sharing

0–100 in Django: Starting an app the right way

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps