Dynamic OG Images API

Beautiful Open Graph ImagesGenerated on Demand

Create stunning, customizable Open Graph images for your websites and applications. No design skills required – just construct a URL and get professional results instantly.

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Hello%20World

BASH

Required: title only. All other parameters are optional.
Defaults: theme=light, template=default if not provided.

How the OG Image API Works

The OG Image API lets you generate beautiful, dynamic Open Graph images for your website, blog, or app. Only the title parameter is required. All other parameters are optional and have sensible defaults. You can customize the look and feel with theme, template, subtitle, logoUrl, author, and more.

Required: title (the main text for your image)
Optional: theme (light/dark, default: light), template (default/simple /article /blog /gradient /neon /professional, default: default), subtitle, logoUrl, author, authorImageUrl, background, pattern, backgroundImage, format (png/svg, default: png)

Base URL:

Code Example in bash

https://www.readmecodegen.com/api/og-generator

BASH

Minimal Example:

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Hello%20World

BASH

Advanced Example:

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Launch%20Event&subtitle=Join%20us%20for%20the%20biggest%20launch&theme=dark&template=professional&logoUrl=https://example.com/logo.png

BASH

Tip: You only need to add parameters if you want to override the defaults or add extra info. The API will always work with just a title.

Get Started in Minutes

Three simple steps to generate your first OG image

1. Choose Template

Select from our professionally designed templates

Default

Simple

Article

Blog

Minimalist Article

Left Aligned Article

Split Layout Blog

Card Article

Magazine Blog

Clean Modern Article

Professional

Modern Glass

Minimalist Elite

Corporate Gradient

Tech Noir

Luxury Gold

Gradient

Neon

2. Add Parameters

Customize with your title, colors, and branding

• Title (required)

• Theme (optional, default: light)

• Template (optional, default: default)

• Logo & author info

3. Get Your Image

Use the generated URL in your meta tags

Perfect for Facebook, Twitter, Discord, and more social platforms

API Reference

Simple RESTful interface – just construct a URL with query parameters and get a PNG image back.

Base Endpoint

Code Example in bash

GET https://www.readmecodegen.com/api/og-generator

BASH

All Parameters at a Glance

Parameter	Type	Description	Templates
title	string	Main title text Required	All
theme	string	Color theme (`light` or `dark`). Optional, defaults to `light`.	All
template	string	Design template (`default`, `simple`, etc). Optional, defaults to `default`.	All
subtitle	string	Secondary text line	default, simple, professional, article, blog
logoUrl	string (URL)	Brand or site logo	All except gradient, neon
author	string	Author name	article, blog
authorImageUrl	string (URL)	Author profile image	article, blog
background	string (CSS)	Custom CSS background	All
pattern	string	Predefined background pattern	All
backgroundImage	string (URL)	Background image URL	All
format	png/svg	Image format	All

Query Parameters

Required Parameters

title

The main title text for your OG image

Required

Template & Styling

template

Optional

Choose the overall layout and design style

Default

Simple

Article

Blog

Minimalist Article

Left Aligned Article

Split Layout Blog

Card Article

Magazine Blog

Clean Modern Article

Professional

Modern Glass

Minimalist Elite

Corporate Gradient

Tech Noir

Luxury Gold

Gradient

Neon

Defaults to default

theme

Optional

Color scheme for the image

light

dark

Defaults to light

Content & Branding

subtitle

Optional

Secondary text line

Used by: default, simple, professional, article, blog template(s)

author

Optional

Author's name

Used by: article, blog template(s)

authorImageUrl

Optional

URL for author's profile picture

Used by: article, blog template(s)

logoUrl

Optional

URL for your brand logo

Used by: All except gradient, neon template(s)

Background & Format Options

background

Custom CSS background (any valid CSS background value)

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Custom%20BG&background=linear-gradient(135deg,#667eea,#764ba2)

BASH

pattern

Predefined background pattern (choose one):

abstract

geometric

modern

sunset

ocean

forest

tech

corporate

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Pattern%20BG&pattern=geometric

BASH

backgroundImage

Use a custom image as the background (must be a public image URL)

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=Image%20BG&backgroundImage=https://images.unsplash.com/photo-1506744038136-46273834b3fb

BASH

format

Choose output format:

png

(default)

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=PNG%20Format

BASH

Example Request

Professional template with dark theme

Code Example in bash

https://www.readmecodegen.com/api/og-generator?template=professional&theme=dark&title=Building%20a%20World-Class%20API&subtitle=Lessons%20Learned%20in%20Scalability%20and%20Design

BASH

Integration Guides

Step-by-step instructions for popular frameworks and platforms

Note: Only title is required for the OG image API. All other parameters are optional and default to theme=light and template=default unless you specify otherwise.

Next.js provides excellent SEO support with its metadata API. Choose the method that best fits your use case.

Method 1: Single Static Page

Perfect for homepage, about page, or any page with fixed content

Add the OG image URL directly to your page's static metadata object.

Code Example in typescript

// app/page.tsx
import { Metadata } from 'next';

const PAGE_TITLE = 'Home';

export const metadata: Metadata = {
  title: PAGE_TITLE,
  description: 'Welcome to our amazing site.',
  alternates: {
    canonical: `https://yoursite.com/`,
  },
  openGraph: {
    title: PAGE_TITLE,
    description: 'Welcome to our amazing site.',
    url: `https://yoursite.com/`,
    images: [{ url: `https://www.readmecodegen.com/api/og-generator?title=${encodeURIComponent(PAGE_TITLE)}` }]
  },
  twitter: {
    card: 'summary_large_image',
    title: PAGE_TITLE,
    description: 'Welcome to our amazing site.',
    images: [`https://www.readmecodegen.com/api/og-generator?title=${encodeURIComponent(PAGE_TITLE)}`]
  }
};

TYPESCRIPT

Best Practice: Keep your title in sync easily: ✅ Yes — Use a variable for both metadata and the OG image URL.

Method 2: Reusable Helper Function

Best practice for managing metadata across multiple static pages

Step 1: Create the helper file

Code Example in typescript

// lib/metadata.ts
import { Metadata } from 'next';

const SITE_URL = 'https://yoursite.com';

function getOgImageUrl(title: string, options?: {
  template?: string;
  theme?: string;
  subtitle?: string;
}) {
  const params = new URLSearchParams({ title, ...options });
  return `https://www.readmecodegen.com/api/og-generator?${params.toString()}`;
}

export function generatePageMetadata(data: {
  title: string;
  description: string;
  path: string;
  ogOptions?: Parameters<typeof getOgImageUrl>[1];
}): Metadata {
  const { title, description, path, ogOptions } = data;
  const imageUrl = getOgImageUrl(title, ogOptions);
  const pageUrl = SITE_URL + path;
  
  return {
    title,
    description,
    alternates: {
      canonical: pageUrl,
    },
    openGraph: {
      title,
      description,
      url: pageUrl,
      images: [{ url: imageUrl }],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [imageUrl],
    },
  };
}

TYPESCRIPT

Step 2: Use in your pages

Code Example in typescript

// app/about/page.tsx
import { generatePageMetadata } from '@/lib/metadata';

export const metadata = generatePageMetadata({
  title: 'About Us',
  description: 'Learn more about our company mission and team.',
  path: '/about',
  ogOptions: {
    template: 'professional',
    theme: 'dark'
  }
});

export default function AboutPage() {
  return <div>... your amazing about page ...</div>;
}

TYPESCRIPT

Method 3: Dynamic Pages

For blog posts, product pages, or any content from CMS/database

Code Example in typescript

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

async function getPost(slug: string) {
  const res = await fetch(`https://api.yoursite.com/posts/${slug}`);
  if (!res.ok) throw new Error('Failed to fetch post');
  return res.json();
}

function getDynamicOgUrl(title: string, author?: string) {
  const params = new URLSearchParams({ 
    title,
    template: 'article',
    ...(author && { author })
  });
  return `https://www.readmecodegen.com/api/og-generator?${params.toString()}`;
}

export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const post = await getPost(params.slug);
  const ogImageUrl = getDynamicOgUrl(post.title, post.author);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://yoursite.com/blog/${params.slug}`,
      images: [{ url: ogImageUrl }],
      type: 'article',
      authors: [post.author],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [ogImageUrl],
    },
  };
}

TYPESCRIPT

Ready to Get Started?

Try the API now and see how easy it is to generate beautiful OG images for your projects.

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=My%20First%20OG%20Image&template=professional&theme=dark

BASH

Full Code Guide

Minimal Example (Only Required)

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=My%20First%20OG%20Image

BASH

Advanced Example (With Optional Parameters)

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=My%20First%20OG%20Image&theme=dark&template=professional&subtitle=Optional%20Subtitle

BASH

You only need to add parameters if you want to override the defaults or add extra info.

Step-by-Step Usage Guide

Choose your title: This is the only required parameter. Example: title=My%20Awesome%20Blog
Pick a template (optional): Use template=default, simple, article, blog, gradient, neon, or professional for different styles.
Set a theme (optional): Use theme=light or theme=dark.
Add branding (optional): Use logoUrl for your logo, author and authorImageUrl for author info.
Customize background (optional): Use background for a CSS gradient, pattern for a preset, or backgroundImage for a custom image.
Choose output format (optional): Use format=svg for SVG, otherwise PNG is default.
Copy and use the generated URL: Paste it in your meta tags, social cards, or anywhere you need an OG image.

Best Practice: Always test your OG image in Facebook, Twitter, and LinkedIn preview tools to ensure it looks great everywhere!

Branding & Author Info

Tip: You can personalize your OG images by adding your logo and author details.

Code Example in bash

https://www.readmecodegen.com/api/og-generator?title=My%20Blog%20Post&logoUrl=https://www.readmecodegen.com/logo.png&author=Jane%20Doe&authorImageUrl=https://example.com/jane.jpg

BASH

logoUrl: URL to your brand or site logo (PNG, SVG, or JPG).
author: Name of the author (shown on article/blog templates).
authorImageUrl: URL to the author's profile image (shown on article/blog templates).

How to Sync OG Image Title with Your Page Title

Important: The OG Image API does not automatically fetch your page's <title> or meta title. You must explicitly pass the title parameter in the OG image URL. This ensures your OG image always displays the correct text.

Static HTML Example

Code Example in html

<title>My Static Page</title>
<meta property="og:title" content="My Static Page">
<meta property="og:image" content="https://www.readmecodegen.com/api/og-generator?title=My%20Static%20Page" />

HTML

Tip: Always keep the <title>, og:title, and the title parameter in the OG image URL in sync.

Dynamic Example (Next.js/React)

Code Example in typescript

// Next.js App Router example
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Dynamic Page',
  openGraph: {
    title: 'My Dynamic Page',
    images: [
      {
        url: 'https://www.readmecodegen.com/api/og-generator?title=My%20Dynamic%20Page',
      },
    ],
  },
};

TYPESCRIPT

Best Practice: Use the same variable for your page title and the OG image title parameter to keep them in sync.

Beautiful Open Graph ImagesGenerated on Demand

Code Example in bash

How the OG Image API Works

Code Example in bash

Code Example in bash

Code Example in bash

Get Started in Minutes

API Reference

Code Example in bash

All Parameters at a Glance

Query Parameters

Background & Format Options

Code Example in bash

Code Example in bash

Code Example in bash

Code Example in bash

Code Example in bash

Integration Guides

NNext.js Integration

Code Example in typescript

Step 1: Create the helper file

Code Example in typescript

Step 2: Use in your pages

Code Example in typescript

Code Example in typescript

HHTML & Client-Side JavaScript

EExpress.js & Node.js

Ready to Get Started?

Code Example in bash

Full Code Guide

Minimal Example (Only Required)

Code Example in bash

Advanced Example (With Optional Parameters)

Code Example in bash

Step-by-Step Usage Guide

Branding & Author Info

Code Example in bash

How to Sync OG Image Title with Your Page Title

Static HTML Example

Code Example in html

Dynamic Example (Next.js/React)

Code Example in typescript