OG Images for Supabase-Powered Apps

Fetch your content from Supabase and pass the title to Imago API — dynamic OG images in one round trip.

Start Integrating

Supabase Native

Use createServerClient from @supabase/ssr. Works with your existing Supabase setup.

Next.js Ready

App Router compatible. Use generateMetadata for SEO-friendly OG images.

Edge Friendly

Works on Vercel Edge and other edge deployment environments.

Example Integration

// app/blog/[slug]/page.tsx — Next.js App Router + Supabase
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    { cookies }
  );
  const { data: post } = await supabase
    .from('posts')
    .select('title')
    .eq('slug', params.slug)
    .single();

  const ogUrl = `https://imagoapi.com/api/og/generate?title=${encodeURIComponent(post?.title ?? 'Post')}&template=modern&api_key=${process.env.IMAGO_API_KEY}`;
  return { openGraph: { images: [{ url: ogUrl, width: 1200, height: 630 }] } };
}

Generate OG Images in Seconds

Start using Imago API today and add beautiful social cards to your Supabase/Next.js app.

Try Imago API Free