Hey developers! ? After helping hundreds of Gleam.so users with their OG images, I've noticed some common patterns. Here are the top mistakes and how to fix them.

1. Incorrect Image Dimensions ?

The Problem

One user shared:

"My images looked perfect on Twitter but were cropped weirdly on LinkedIn."

The Fix

Pro Tip: Use 1200x630px as your default size. It works well across all platforms.

2. Text Readability Issues ?

The Problem

// Common mistake: Not considering mobile view
const title = {
  fontSize: '32px',
  color: '#666666',  // Low contrast
  fontWeight: 'normal'
};

User feedback:

"Text was unreadable when shared on mobile devices."

The Fix

// Text optimization
const titleStyle = {
  fontSize: '72px',
  color: '#000000',
  fontWeight: 'bold',
  lineHeight: 1.2,
  maxWidth: '80%'  // Prevent edge bleeding
};

// Contrast checker
const hasGoodContrast = (bg: string, text: string): boolean => {
  return calculateContrast(bg, text) >= 4.5;
};

3. Missing Fallback Data ?

The Problem

User experience:

"When OG image failed to load, posts looked broken."

The Fix

4. Cache Issues ?

The Problem

// Image updates not reflecting
const ogImage = '/static/og-image.png';

Common complaint:

"Updated my OG image but social platforms still show the old one."

The Fix

// Add version control
const getOGImageUrl = (baseUrl: string): string => {
  const version = Date.now();
  return `${baseUrl}?v=${version}`;
};

// Usage

5. Poor Performance ⚡

The Problem

// Generating images on every request
const generateOG = async (text: string) => {
  const svg = createSVG(text);
  const png = await convertToPNG(svg);
  return png;
};

User feedback:

"OG image generation was slowing down my entire site."

The Fix

// Implement caching
const cachedGenerate = async (text: string) => {
  const cacheKey = createHash(text);
  const cached = await cache.get(cacheKey);

  if (cached) return cached;

  const image = await generateOG(text);
  await cache.set(cacheKey, image, '7d');

  return image;
};

6. Broken URLs ?

The Problem

Common issue:

"My OG images work locally but not in production."

The Fix

// Always use absolute URLs
const getAbsoluteUrl = (path: string): string => {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  return new URL(path, baseUrl).toString();
};

// Usage

7. Missing Mobile Optimization ?

The Problem

// Desktop-only testing
const testOG = async (url: string) => {
  const response = await fetch(url);
  return response.ok;
};

User experience:

"Images looked great on desktop but terrible on mobile shares."

The Fix

// Comprehensive testing
const testOGImage = async (url: string) => {
  const tests = [
    checkDimensions,
    checkMobileRendering,
    checkTextSize,
    checkContrast,
    checkLoadTime
  ];

  return Promise.all(tests.map(test => test(url)));
};

Quick Fix Checklist ✅

1. Use 1200x630px dimensions
2. Ensure text is 72px for titles
3. Implement proper fallbacks
4. Use absolute URLs
5. Add cache busting
6. Test on mobile
7. Monitor performance

Need a Reliable Solution?

If you're tired of dealing with these issues, try Gleam.so.

I handle all these optimizations automatically, and you can now design & preview everything for free!

Share Your Experience ?

What OG image issues have you encountered? Drop them in the comments and let's solve them together!

Part of the Making OpenGraph Work series. Follow for more web development insights!