const hasTitle = searchParams.has('title'); const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : 'My default title'; return new ImageResponse( ( <div style={{ backgroundColor: 'black', backgroundSize: '150px 150px', height: '100%', width: '100%', display: 'flex', textAlign: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', flexWrap: 'nowrap', }} > <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', justifyItems: 'center', }} > <img alt="Vercel" height={200} src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E" style={{ margin: '0 30px' }} width={232} /> </div> <div style={{ fontSize: 60, fontStyle: 'normal', letterSpacing: '-0.025em', color: 'white', marginTop: 30, padding: '0 120px', lineHeight: 1.4, whiteSpace: 'pre-wrap', }} > {title} </div> </div> ), { width: 1200, height: 630, }, ); } catch (e: any) { console.log(`${e.message}`); return new Response(`Failed to generate the image`, { status: 500, }); } }`` > If you're not using a framework, you must either add `"type": "module"` to your `package.json` or change your JavaScript Functions' file extensions from `.js` to `.mjs` Preview the OG route locally by running: `pnpm dev` Then, browse to `http://localhost:3000/api/og`. You will see the generated image. ## More resources - [Consume the OG route](/docs/og-image-generation#consume-the-og-route) - [Getting started with OG image](/docs/og-image-generation#usage)

--- title: Using dynamic text as your OG Image description: Learn how to pass the image title as a URL parameter. url: /kb/guide/dynamic-text-as-image canonical_url: "https://vercel.com/kb/guide/dynamic-text-as-image" last_updated: 2025-11-18 authors: DX Team related: - /docs/og-image-generation install_vercel_plugin: npx plugins add vercel/vercel-plugin --- You can use the following code sample to explore using parameters and different content types with OG Image Generation. To learn more, see [Open Graph Image Generation](/docs/og-image-generation). Create an api route with `route.tsx` in `/app/api/og/` and paste the following code: ``import { ImageResponse } from 'next/og'; // App router includes @vercel/og. // No need to install it. export async function GET(request: Request) { try { const { searchParams } = new URL(request.url); // ?title= const hasTitle = searchParams.has('title'); const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : 'My default title'; return new ImageResponse( ( <div style={{ backgroundColor: 'black', backgroundSize: '150px 150px', height: '100%', width: '100%', display: 'flex', textAlign: 'center', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', flexWrap: 'nowrap', }} > <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', justifyItems: 'center', }} > <img alt="Vercel" height={200} src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E" style={{ margin: '0 30px' }} width={232} /> </div> <div style={{ fontSize: 60, fontStyle: 'normal', letterSpacing: '-0.025em', color: 'white', marginTop: 30, padding: '0 120px', lineHeight: 1.4, whiteSpace: 'pre-wrap', }} > {title} </div> </div> ), { width: 1200, height: 630, }, ); } catch (e: any) { console.log(`${e.message}`); return new Response(`Failed to generate the image`, { status: 500, }); } }`` > If you're not using a framework, you must either add `"type": "module"` to your `package.json` or change your JavaScript Functions' file extensions from `.js` to `.mjs` Preview the OG route locally by running: `pnpm dev` Then, browse to `http://localhost:3000/api/og`. You will see the generated image. ## More resources - [Consume the OG route](/docs/og-image-generation#consume-the-og-route) - [Getting started with OG image](/docs/og-image-generation#usage)