The Problem: Every Page Needs an OG Image
Open Graph images are the preview cards shown when someone shares your link on Twitter, LinkedIn, Facebook, Slack, or Discord. Without one, your link looks boring — a plain text snippet that nobody clicks.
But creating unique OG images for every blog post, product page, or landing page is a pain. You'd need a designer, or spend hours in Figma/Canva. For 100+ pages? Forget it.
The Solution: Generate Them with a URL
Pandan's OG Image API generates beautiful social preview images on the fly. Just construct a URL with your title and subtitle — no API key, no signup, no cost.
<meta property="og:image" content="https://og.pandan.is/v1/og?title=My+Blog+Post&subtitle=A+deep+dive+into+React+hooks" />That single line in your HTML head gives every page a professional OG image. The image is generated in real-time and cached for performance.
Customization Options
The API supports multiple themes and styles:
GET https://og.pandan.is/v1/og
Parameters:
title - Main heading text
subtitle - Secondary text
theme - dark (default) or light
pattern - dots, grid, diagonal, or none
color - Accent color (hex, e.g. #7b2ff7)
logo - Logo text displayed at bottom
width - Image width (default: 1200)
height - Image height (default: 630)Framework Integration
Next.js / React
// pages/_app.js or layout.tsx
import Head from 'next/head';
export default function Page({ title, description }) {
const ogImage = `https://og.pandan.is/v1/og?title=${encodeURIComponent(title)}&subtitle=${encodeURIComponent(description)}&color=%230070f3`;
return (
<Head>
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={ogImage} />
</Head>
);
}Hugo / Static Sites
{{ $ogTitle := .Title }}
{{ $ogSub := .Description | default .Site.Params.description }}
<meta property="og:image" content="https://og.pandan.is/v1/og?title={{ $ogTitle | urlquery }}&subtitle={{ $ogSub | urlquery }}" />WordPress
// functions.php
add_action('wp_head', function() {
$title = get_the_title();
$desc = get_the_excerpt();
$url = 'https://og.pandan.is/v1/og?title=' . urlencode($title) . '&subtitle=' . urlencode($desc);
echo '<meta property="og:image" content="' . esc_url($url) . '" />';
});Why Not Use Vercel OG or Cloudinary?
Vercel OG (@vercel/og) requires you to deploy a serverless function, write JSX templates, and it only works on Vercel. Great if you're already there, but overkill for most sites.
Cloudinary is powerful but complex. Text overlays require learning their transformation URL syntax, and the free tier has limits on transformations.
Pandan OG Image API is a single URL. Works with any framework, any host, any language. No deployment, no account, no limits.
Performance
Images are generated server-side using Chromium and cached. First request takes ~500ms, subsequent requests return cached images in under 50ms. The default size (1200×630) is optimal for all social platforms.
Try It Now
Paste this into your browser and see the result immediately:
https://og.pandan.is/v1/og?title=My%20Awesome%20Product&subtitle=The%20easiest%20way%20to%20build%20things&color=%23ff6600&theme=dark&pattern=dotsOr visit og.pandan.is for an interactive playground where you can customize every parameter and preview the result in real-time.
Free, forever. No limits. Start using it today.