OG Image

Definition

An OG image is the Open Graph image specified by og:image. Social platforms use it for link preview thumbnails. Using the right size and an accessible absolute URL improves preview quality and click-through.

Why it matters

• Better previews increase clicks and sharing
• Prevents platforms from guessing a random image
• Especially important for tool and tutorial pages
• Builds brand recognition: consistent visual style makes content instantly recognizable
• Increases social engagement: high-quality previews get more likes and shares
• Supports dynamic generation: auto-generate customized OG images based on page content

How to implement

• Use an absolute URL (https://...)
• Use 1200x630 (1.91:1) as default, minimum 600x315
• Keep file size reasonable (< 1MB) and ensure it's crawlable
• Bust caches by changing the URL (rename or add ?v=2)
• Add og:image:width and og:image:height for faster platform rendering
• Consider dynamic OG image services (Vercel OG, Cloudflare Workers)
• Set og:image:alt for accessibility and embedded key info

Examples

<!-- Complete OG Image setup -->
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="SEO Tutorial - How to optimize rankings" />

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

// Dynamic OG image with Vercel OG
// pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export const config = { runtime: 'edge' };

export default function handler(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'SEO Academy';

  return new ImageResponse(
    (
      <div style={{ fontSize: 48, background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Related