Documentation

Everything you need to generate beautiful OG images with a single URL.

Quick Start

Add this meta tag to your HTML. Replace the parameters with your own content:

<meta property="og:image"
  content="https://ogpix.dev/api/og?title=My+Page+Title&description=A+great+description&theme=gradient&key=YOUR_API_KEY" />

That's it. When anyone shares your link on Twitter, LinkedIn, Slack, or Discord, they'll see a beautiful preview image.

Base URL

GET https://ogpix.dev/api/og

All parameters are passed as query string parameters. The response is a PNG image.

Parameters

titlestring

The main heading text. Keep it under ~80 chars for best results.

Default: "Untitled"

descriptionstring

Subtitle / description text shown below the title.

Default: ""

themestring

One of: "gradient", "minimal", "dark", "branded", "sunset", "ocean", "forest", "mono", "neon", "warm".

Default: "gradient"

bgstring

Background color (hex). Only used with the branded theme.

Default: "#6366f1"

colorstring

Text color (hex). Only used with the branded theme.

Default: "#ffffff"

wnumber

Image width in pixels. Max 2400.

Default: 1200

hnumber

Image height in pixels. Max 1260.

Default: 630

keystring

Your API key. Without it, images include a watermark.

Default: none

Themes

theme=gradient

Purple gradient background, bold white text.

theme=minimal

Clean white background with dark text and accent bar.

theme=dark

Near-black background with light text.

theme=branded

Custom background and text color using bg and color params.

theme=sunset

Warm orange-to-pink gradient with white text.

theme=ocean

Deep blue gradient with light cyan text.

theme=forest

Green nature gradient with mint text.

theme=mono

Pure black background with white text and high contrast.

theme=neon

Cyberpunk dark background with neon green glowing text.

theme=warm

Cream/beige background with dark brown text and terracotta accents.

Examples

Next.js App Router

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    openGraph: {
      images: [`https://ogpix.dev/api/og?${new URLSearchParams({
        title: post.title,
        description: post.excerpt,
        theme: "dark",
        key: process.env.OGPIX_KEY,
      })}`],
    },
  };
}

Astro

---
// src/layouts/BlogPost.astro
const { title, description } = Astro.props;
const ogUrl = new URL("https://ogpix.dev/api/og");
ogUrl.searchParams.set("title", title);
ogUrl.searchParams.set("description", description);
ogUrl.searchParams.set("theme", "gradient");
ogUrl.searchParams.set("key", import.meta.env.OGPIX_KEY);
---
<meta property="og:image" content={ogUrl.toString()} />

Plain HTML

<head>
  <meta property="og:image"
    content="https://ogpix.dev/api/og?title=Hello+World&theme=minimal&key=og_live_abc123" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
</head>

Rate Limits

Plan	Images/month	Watermark
Free	100	Yes
Starter ($9/mo)	5,000	No
Pro ($29/mo)	50,000	No
Enterprise	Custom	No

Images are cached at the CDN edge — repeated requests with the same parameters don't count against your limit.

Ready to get started?

Get Your Free API Key →