DEV Community: Corbanware

OG Image Sizes: The Complete Guide for 2026

Corbanware — Mon, 11 May 2026 01:00:58 +0000

OG Image Sizes: The Complete Guide for 2026

Here is the quick answer: 1200 x 630 pixels. If you remember nothing else from this article, remember that number. It works on every major platform without cropping or distortion.

But if you want to understand why, what the edge cases are, and how to avoid the mistakes that make your shared links look broken, keep reading.

Quick Reference Table

Platform	Recommended Size	Min Size	Aspect Ratio	Max File Size
Facebook	1200 x 630	600 x 315	1.91:1	8 MB
Twitter/X (large card)	1200 x 628	300 x 157	2:1	5 MB
Twitter/X (summary)	240 x 240	144 x 144	1:1	5 MB
LinkedIn	1200 x 627	200 x 200	1.91:1	5 MB
Slack	1200 x 630	Any	1.91:1	No hard limit
Discord	1200 x 630	Any	1.91:1	8 MB
WhatsApp	1200 x 630	300 x 200	1.91:1	5 MB
iMessage	1200 x 630	Any	1.91:1	No hard limit
Pinterest	1200 x 630	200 x 200	1.91:1	10 MB

Bookmark this table. Reference it when you need it.

Why 1200 x 630 Is the Standard

Back in 2010, Facebook introduced the Open Graph protocol to let websites control how shared links appear in the News Feed. They settled on a roughly 1.91:1 aspect ratio for link preview images. Every other platform that came along afterward -- Twitter, LinkedIn, Slack, Discord -- adopted the same ratio or something close enough that a 1200x630 image displays without issues.

The result: one image at 1200 x 630 works everywhere. You do not need platform-specific images. Period.

Why 1200px wide specifically? Because it renders crisply on high-DPI (Retina) displays. On a standard feed where link cards are displayed at around 600px wide, a 1200px source image means 2x pixel density. Your text stays sharp, your gradients stay smooth.

PNG vs. JPEG: Which Format to Use

PNG -- Use for images with text, solid colors, or sharp edges. Most OG images fall into this category.
JPEG -- Use for photographic images. JPEG compresses these more efficiently.
WebP -- Inconsistent support across platforms. Stick to PNG or JPEG.
SVG -- Do not use SVG for OG images. Most platforms will silently ignore it.

The Safe Zone: Where to Place Your Content

Platforms do not all crop identically. Keep all important content within a 60px margin safe zone on all sides. That means your actual content area is roughly 1080 x 510 pixels.

Font Size Matters More Than You Think

OG images are typically displayed at 400-600 pixels wide in feeds. Rules of thumb:

Title text: Minimum 48px at 1200px width
Description text: Minimum 28px at 1200px width
Limit text to 2-3 lines for the title
High contrast: White text on dark backgrounds or vice versa

Common Mistakes (and How to Fix Them)

1. Using a square image -- A 1:1 image will get aggressively cropped. Always use 1200 x 630.

2. File size too large -- Aim for under 1 MB. Use TinyPNG or ImageOptim to compress.

3. Relative URLs in the meta tag -- Social platform crawlers need the full absolute URL starting with https://.

4. Caching issues -- Platforms cache OG images aggressively. Use each platform's debugger tool to bust the cache.

5. Missing width and height meta tags -- Providing og:image:width and og:image:height helps platforms render previews faster.

How to Test Your OG Images

Facebook Sharing Debugger -- Paste your URL, click Scrape Again
Twitter Card Validator -- Preview the card rendering
LinkedIn Post Inspector -- Check LinkedIn's cache
opengraph.xyz -- Previews across multiple platforms simultaneously

Automating OG Image Generation

For sites with many pages, manual OG image creation does not scale. Options:

@vercel/og -- JSX to PNG on the edge. Free, self-hosted.
Cloudinary -- Text overlay capabilities for dynamic transformations.
ogimg.xyz -- Dedicated API for OG image generation. Free tier with 50 images/month.
Puppeteer/Playwright -- Screenshot approach. Flexible but slow.

The One-Sentence Summary

Use 1200 x 630 pixels, PNG format, under 1 MB, with text inside a 60px safe zone, and always test with platform debugger tools before you ship.

Found this useful? Follow me for more practical web development guides.

How to Add OG Images to Next.js in 5 Minutes

Corbanware — Mon, 27 Apr 2026 01:01:38 +0000

How to Add OG Images to Next.js in 5 Minutes

If you have ever shared a link on Twitter or Slack and watched it render as a sad, plain-text URL with no preview image, you already understand why OG images matter. Those 1200x630 pixel cards are the difference between a link that gets clicked and one that gets scrolled past. Studies show that links with rich preview images get 2-3x more engagement than bare text links.

The good news: if you are building with Next.js and the App Router, adding OG images is remarkably straightforward. Let me walk you through three approaches, from the simplest to the most powerful.

The Foundation: Understanding OG Meta Tags

Before we touch any Next.js code, here is what the browser needs to see in your HTML <head>:

<meta property="og:image" content="https://yoursite.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description" />

That is it. Every social platform (Facebook, Twitter/X, LinkedIn, Slack, Discord, WhatsApp) reads these tags to build the preview card. The image URL must be absolute -- relative paths will not work.

Approach 1: Static Metadata (30 Seconds)

For pages where the OG image never changes (your homepage, about page, pricing page), use the metadata export in your layout or page file:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Awesome App",
  description: "The best thing since sliced bread",
  openGraph: {
    title: "My Awesome App",
    description: "The best thing since sliced bread",
    images: [
      {
        url: "https://yoursite.com/og-homepage.png",
        width: 1200,
        height: 630,
        alt: "My Awesome App - homepage preview",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
  },
};

Next.js automatically renders the correct <meta> tags in the HTML head. No manual string concatenation, no dangerouslySetInnerHTML. It even handles the Twitter card fallback for you.

Pro tip: Always include the twitter.card: "summary_large_image" property. Without it, Twitter defaults to the small square card, which wastes most of your carefully designed image.

Approach 2: Dynamic generateMetadata (2 Minutes)

This is where things get interesting. For blogs, documentation, or any page with dynamic content, you want a unique OG image per page. The generateMetadata async function lets you compute metadata at request time:

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { getPostBySlug } from "@/lib/posts";

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  if (!post) return {};

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt,
      images: [
        {
          url: `https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: { card: "summary_large_image" },
  };
}

Notice the OG image URL points to an API route. That brings us to the next question: how do you actually generate the image?

Approach 3: Generating Images on the Fly

You have two main options here.

Option A: @vercel/og (Self-Hosted)

Vercel's @vercel/og library lets you write JSX that renders as an image. It uses Satori under the hood -- a layout engine that converts React components to SVG, then rasterizes to PNG.

// app/api/og/route.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") ?? "My Blog";

  return new ImageResponse(
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', padding: 60 }}>
      <h1 style={{ fontSize: 64, fontWeight: 700, textAlign: 'center' }}>{title}</h1>
    </div>,
    { width: 1200, height: 630 }
  );
}

This works well if you want full control over the design and are comfortable with Satori's CSS limitations.

Option B: External API

If you would rather not maintain your own image generation endpoint, an external API simplifies things significantly. For example, with ogimg.xyz, your dynamic metadata becomes:

const ogUrl = new URL("https://ogimg.xyz/api/og"?utm_source=devto&utm_medium=article&utm_campaign=wf5);
ogUrl.searchParams.set("title", post.title);
ogUrl.searchParams.set("description", post.excerpt);
ogUrl.searchParams.set("template", "gradient");

No API route to maintain, no font files to bundle, no Satori quirks to debug. ogimg.xyz offers a free tier of 50 images/month, which is enough for most personal blogs and small projects.

Testing Your OG Images

After deploying, always verify your images actually work:

Facebook Sharing Debugger -- Paste your URL and hit Scrape Again to force a fresh fetch.
Twitter Card Validator -- Preview exactly what Twitter will render.
LinkedIn Post Inspector -- Check how LinkedIn will render your shared link.
Open your browser DevTools -- Search the HTML head for og:image and make sure the URL loads.

Quick Checklist

og:image URL is absolute (starts with https://)
Image dimensions are 1200x630
File size is under 1MB (5MB max for most platforms)
twitter:card is set to summary_large_image
Image renders correctly when you open the URL directly
You have tested with at least one social platform debugger

Wrapping Up

Adding proper OG images to a Next.js app is one of those 5-minute tasks that pays dividends every time someone shares your content. Whether you go with static metadata, dynamic generateMetadata, self-hosted @vercel/og, or an external service, the important thing is that you do it.

Your links deserve better than plain text.

Have questions about OG images in Next.js? Drop a comment below -- I read every one.

GEO vs SEO: Why Optimizing for AI Search Is the Next Frontier

Corbanware — Mon, 20 Apr 2026 01:00:50 +0000

Why Your Brand Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 13 Apr 2026 01:00:49 +0000

I Built an AI Search Visibility Auditor - Here Is What I Learned

Corbanware — Mon, 06 Apr 2026 01:00:26 +0000

GEO vs SEO: Why Optimizing for AI Search Is the Next Frontier

Corbanware — Mon, 30 Mar 2026 01:00:36 +0000

Why Your Brand Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 23 Mar 2026 01:00:31 +0000

I Built an AI Search Visibility Auditor - Here Is What I Learned

Corbanware — Mon, 16 Mar 2026 01:01:11 +0000

Building a Multi-LLM Fallback System with Vercel AI SDK

Corbanware — Mon, 09 Mar 2026 01:01:20 +0000

A practical guide to implementing LLM provider fallback chains for production applications. Covers the architecture of Geonapse's 3-tier fallback system (Gemini Flash-Lite ? Groq ? DeepSeek), error handling patterns, cost optimization strategies, response quality validation, and monitoring. Includes code examples using Vercel AI SDK's unified interface and lessons learned from running multi-provider LLM systems in production.

GEO vs SEO: Why Your Website Is Invisible to ChatGPT (And How to Fix It)

Corbanware — Mon, 02 Mar 2026 01:01:17 +0000

Generative Engine Optimization (GEO) is emerging as the next evolution of SEO. This article explores why traditional SEO techniques only partially work for AI search engines, what factors influence LLM brand recommendations, and a practical framework for auditing your AI search visibility. Covers knowledge graph presence, structured data importance, citation cascades, content structure optimization, and the growing importance of platform presence across Wikipedia, Crunchbase, G2, and other knowledge sources.

I Built an AI Search Visibility Auditor Here's the Architecture

Corbanware — Mon, 23 Feb 2026 01:01:07 +0000

A technical deep-dive into building Geonapse, an AI search visibility auditor. Covers the 3-tier LLM fallback architecture (Gemini Flash-Lite ? Groq ? DeepSeek), the 40+ check audit engine, ranking detection via AI search APIs, and platform presence scanning across 8 knowledge platforms. Built with Next.js 16, Vercel AI SDK, Neon PostgreSQL, and Drizzle ORM. Includes lessons learned about LLM reliability, cost optimization, and building evaluation frameworks for AI-generated content.

I Built an OG Image Generator API — Here's How (Next.js + Vercel Edge)

Corbanware — Sun, 15 Feb 2026 13:56:47 +0000

Every web page that gets shared on social media needs an Open Graph image. It's that 1200x630 preview card you see on Twitter, Facebook, LinkedIn, and Slack. Without one, your shared links look like plain text. With a good one, click-through rates go up significantly.

I've been building web projects for years, and creating OG images has always been my least favorite part of the process. Open Figma, create a canvas, add text, pick colors, export, upload. Repeat for every page. For a blog with 30 posts, that's 30 images. For a documentation site with 100 pages, it's simply not viable.

So I built ogimg.xyz — an API that generates OG images programmatically. Send a POST request, get back a PNG. Here's how it works under the hood.

The Architecture

The entire application is a Next.js 15 project deployed on Vercel. The image generation endpoint is a Vercel Edge Function, which means it runs on Cloudflare's network close to the user — no cold starts, no long-running server processes.

The core pipeline:

Request → Validate API Key → Resolve Template → Satori (JSX → SVG) → Resvg (SVG → PNG) → Response

Let me break down each step.

Step 1: Request Validation

Every API call requires an API key passed via the Authorization: Bearer header. The key is looked up in a Neon PostgreSQL database (via Drizzle ORM). I check:

Is the key valid and active?
What plan tier is this user on?
Have they exceeded their monthly quota?

Rate limiting uses a sliding window counter. Free users get 50 images/month, Hobby gets 1,000, and Pro gets 10,000.

curl -X POST https://ogimg.xyz/api/generate?utm_source=devto&utm_medium=article&utm_campaign=wf5 \
  -H "Authorization: Bearer og_live_abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "title": "My Awesome Blog Post",
    "description": "Learn how to build better software",
    "template": "gradient",
    "backgroundColor": "#0f172a",
    "textColor": "#f8fafc"
  }'

Step 2: The Template System

Each template is a React component. Yes, actual JSX — because the rendering engine (Satori) understands React components.

Here's a simplified version of what a template looks like:

function GradientTemplate({ title, description, backgroundColor, textColor, pattern }: TemplateProps) {
  return (
    <div style={{
      width: 1200,
      height: 630,
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      padding: 80,
      background: `linear-gradient(135deg, ${backgroundColor}, ${adjustColor(backgroundColor, 30)})`,
      color: textColor,
    }}>
      {pattern && <PatternOverlay type={pattern} />}
      <h1 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.2 }}>
        {title}
      </h1>
      {description && (
        <p style={{ fontSize: 28, opacity: 0.8, marginTop: 24 }}>
          {description}
        </p>
      )}
    </div>
  );
}

There are 10 templates total: gradient, minimal, bold, split, centered, documentation, dark, light, branded, and announcement. Each is designed for a different use case.

Step 3: Background Patterns

I built 10 SVG-based background patterns: dots, grid, diagonal lines, cross-hatch, waves, circles, hexagons, triangles, diamonds, and noise. They're rendered as inline SVG within the template and can be customized with color and opacity.

The pattern is layered behind the text content using Flexbox positioning (Satori doesn't support position: absolute, so everything is Flexbox-based).

Step 4: Satori — JSX to SVG

Satori is Vercel's library for converting React components (JSX) to SVG. It implements a subset of CSS Flexbox and renders text using actual font files (loaded as ArrayBuffers).

Key limitations I had to work around:

No position: absolute: All layout must use Flexbox. This makes some designs trickier but keeps the rendering engine simple and fast.
Limited CSS properties: No box-shadow, no backdrop-filter, no CSS gradients on text. You work within the constraints.
Font loading: You must provide font files explicitly. I bundle Inter and a few other Google Fonts as static assets.

Despite the limitations, Satori is fast. It converts a template to SVG in about 50-100ms.

Step 5: SVG to PNG

The SVG from Satori is converted to PNG using Resvg (via @vercel/og). This is a Rust-based SVG renderer compiled to WebAssembly, so it runs on the Edge without any native dependencies. The PNG conversion takes another 50-150ms.

The total pipeline from request to response is typically 200-500ms, depending on complexity and edge location.

Step 6: The Watermark

Free tier images get a small "Powered by ogimg.xyz" watermark in the bottom-right corner. It's rendered as part of the template — just an additional text element added conditionally based on the user's plan tier. Paid plans remove it entirely.

URL Auto-Fetch Mode

There's a convenience feature where you send a URL instead of content:

curl -X POST https://ogimg.xyz/api/generate?utm_source=devto&utm_medium=article&utm_campaign=wf5 \
  -H "Authorization: Bearer og_live_abc123..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/blog/my-post",
    "template": "minimal"
  }'

The API fetches the URL, parses the HTML for <title>, <meta name="description">, and <link rel="icon">, and uses those as the template input.

Important security note: I implemented SSRF protection here. The fetch is restricted to public IP ranges only (no 127.0.0.1, no 10.x.x.x, no 169.254.x.x). Schemes are limited to http and https. There's a 5-second timeout. If you're building something similar that accepts user-provided URLs, don't skip this step.

Billing Integration

I use LemonSqueezy as the merchant of record. This means LemonSqueezy handles:

Payment processing (Stripe under the hood)
Global tax calculation and remittance (VAT, GST, sales tax)
Invoicing
Subscription management

On my end, I listen for LemonSqueezy webhooks to update user plan tiers in my database. When a user upgrades, their quota and feature access update immediately.

Pricing tiers:

Plan	Price	Images/Month	Templates	Watermark
Free	$0	50	4	Yes
Hobby	$4.90/mo	1,000	10	No
Pro	$9.90/mo	10,000	10	No
Lifetime	$149 once	10,000	10	No

The Live Playground

I built an interactive playground at ogimg.xyz where you can:

Select a template from a visual grid
Enter your title and description
Pick background colors and patterns
See the preview update in real-time
Copy the equivalent API call (curl or JavaScript)

This serves two purposes: it lets non-technical users generate images without writing code, and it lets developers experiment before integrating the API.

Lessons Learned

Satori is great but limited. If you need pixel-perfect designs, you'll hit its CSS limitations. For structured templates with text and simple graphics, it's perfect.
Edge rendering is the right call for this use case. No cold starts, globally distributed, and fast enough for real-time generation.
Freemium works for developer tools. Developers need to test before they commit. A generous free tier with a clear upgrade path converts better than a free trial with a time limit.
SSRF protection is essential. If your API accepts user-provided URLs, protect against server-side request forgery from day one. Not later. Now.

Try It

Head over to ogimg.xyz and generate your first image. The free tier gives you 50 images/month with no credit card required. If you're integrating into a Next.js project, it's literally one fetch call:

const response = await fetch('https://ogimg.xyz/api/generate',?utm_source=devto&utm_medium=article&utm_campaign=wf5 {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.OGIMG_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'My Page Title',
    description: 'A brief description',
    template: 'gradient',
    backgroundColor: '#1e293b',
  }),
});

const imageBuffer = await response.arrayBuffer();
// Save or serve the image

I'd love feedback on the API design, the templates, and anything else. You can find me on Twitter at @corbanware.