API Documentation

og-image.org supports URL parameters for creating shareable template links and pre-populated generators. This reference covers all available parameters and how to use them effectively.

Note: og-image.org is a client-side tool. These URL parameters configure the generator interface—they don't generate images server-side. For server-side OG image generation, see our Next.js guide.

Template URL Structure

Create shareable links to the generator with pre-filled values using query parameters:

https://og-image.org/templates/{template-id}?title=Your+Title&description=Your+Description

Available Parameters

Parameter	Type	Description
title	string	Main heading text for the OG image
description	string	Secondary text/subtitle (alias: desc)
icon	string	Icon identifier (e.g., "sparkles", "rocket")
bg	hex color	Background color (without #)
text	hex color	Text/foreground color (without #)
accent	hex color	Accent color for highlights (without #)

Available Templates

Use these template IDs in your URLs:

Template ID	Name	Best For
gradient	Gradient	Modern SaaS, tech products
minimal	Minimal	Clean blogs, documentation
modern	Modern	Professional portfolios
bold	Bold	Statements, announcements
split	Split	Two-tone designs
glass	Glass	Trendy, modern look
startup	Startup	Product launches, startups
blog	Blog	Article previews, blogs

URL Encoding

Parameters must be URL-encoded. Here are common characters and their encodings:

Character	Encoding	Example
Space	%20 or +	Hello+World
&	%26	Tom%26Jerry
#	%23	%23trending
=	%3D	1%3D1
?	%3F	What%3F

Most programming languages have built-in URL encoding. In JavaScript:

const title = encodeURIComponent("What's New in 2024?")
const url = `https://og-image.org/templates/gradient?title=${title}`

Examples

Basic Template Link

https://og-image.org/templates/gradient?title=Hello+World&description=My+first+OG+image

With Custom Colors

https://og-image.org/templates/minimal?title=Product+Launch&bg=1a1a2e&text=ffffff&accent=e94560

With Icon

https://og-image.org/templates/startup?title=Launching+Soon&description=Join+the+waitlist&icon=rocket

Full Example

https://og-image.org/templates/bold?title=The+Ultimate+Guide&description=Everything+you+need+to+know&icon=book&bg=0f172a&text=f8fafc&accent=3b82f6

Available Icons

The icon parameter accepts the following values:

sparkles

rocket

lightning

star

heart

fire

globe

code

book

briefcase

chart

check

clock

cloud

cog

cube

document

download

flag

folder

gift

home

key

link

location

lock

mail

megaphone

moon

music

pencil

phone

photo

play

puzzle

search

shield

shopping

sun

tag

terminal

trophy

user

video

wifi

zap

Color Format

Colors are specified as 6-character hex codes without the # prefix:

// Correct
?bg=000000&text=ffffff&accent=3b82f6

// Incorrect (don't use #)
?bg=#000000  ❌

Programmatic Usage

Generate shareable links in your application:

JavaScript/TypeScript

function generateOgImageUrl(options: {
  template: string
  title: string
  description?: string
  icon?: string
  bg?: string
  text?: string
  accent?: string
}) {
  const params = new URLSearchParams()

  if (options.title) params.set('title', options.title)
  if (options.description) params.set('description', options.description)
  if (options.icon) params.set('icon', options.icon)
  if (options.bg) params.set('bg', options.bg)
  if (options.text) params.set('text', options.text)
  if (options.accent) params.set('accent', options.accent)

  return `https://og-image.org/templates/${options.template}?${params.toString()}`
}

// Usage
const url = generateOgImageUrl({
  template: 'gradient',
  title: 'My Awesome Article',
  description: 'Learn something new today',
  bg: '0f172a',
  accent: '3b82f6'
})

Python

from urllib.parse import urlencode

def generate_og_image_url(template, **kwargs):
    params = {k: v for k, v in kwargs.items() if v}
    query = urlencode(params)
    return f"https://og-image.org/templates/{template}?{query}"

# Usage
url = generate_og_image_url(
    "gradient",
    title="My Awesome Article",
    description="Learn something new today",
    bg="0f172a",
    accent="3b82f6"
)

Use Cases

Shareable Template Links

Let users share pre-configured templates with their team or community. They can click the link and immediately see the generator with their settings.

CMS Integration

Generate "Create OG Image" links in your CMS that pre-populate the generator with article titles and descriptions.

Team Branding

Create a base URL with your brand colors, then share it with your team. Everyone creates on-brand images by just changing the title.

Documentation Links

Include "Generate OG Image" buttons in your documentation that open the generator with appropriate templates for different content types.

Limitations

URL parameters configure the interface; they don't generate images server-side
Maximum URL length is ~2000 characters (browser limit)
Custom fonts and advanced styling require using the interface directly
Images must be downloaded manually or through automation

Need Server-Side Generation?

For programmatic, server-side OG image generation, check out our framework guides. They cover how to generate images dynamically at build time or on-demand.

Next.js Guide React Guide