---
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"
published: 2025-11-04
last_updated: 2025-11-18
authors: DX Team
related:
  - /docs/og-image-generation
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Examples](https://vercel.com/docs/og-image-generation/examples?from=related) — Learn how to use the @vercel/og library with examples.
- [Using an external image as OG image](https://vercel.com/kb/guide/using-an-external-dynamic-image?from=related) — Learn how to pass the username as a URL parameter to pull an external profile image for the image generation.
- [Using emoji in your OG image](https://vercel.com/kb/guide/using-emoji-in-image?from=related) — Learn how to use emojis to generate an OG image.
- [Using an SVG image in your OG image](https://vercel.com/kb/guide/using-svg-image?from=related) — Learn how to use SVG embedded content to generate your OG images.
- [@vercel/og](https://vercel.com/docs/og-image-generation/og-image-api?from=related) — This reference provides information on how the @vercel/og package works on Vercel.
- [Using Tailwind CSS with your OG Image](https://vercel.com/kb/guide/using-tailwind?from=related) — Learn how to use Tailwind CSS to style your OG images.
- [Next.js](https://vercel.com/docs/frameworks/full-stack/nextjs?from=related) — Vercel is the native Next.js platform, designed to enhance the Next.js experience.
- [Using languages in your OG image](https://vercel.com/kb/guide/using-different-languages?from=related) — Learn how to use other languages in the text of your OG image.
- [opengraph-image and twitter-image](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image?from=related) — API Reference for the Open Graph Image and Twitter Image file conventions.
- [ImageResponse](https://nextjs.org/docs/app/api-reference/functions/image-response?from=related) — API Reference for the ImageResponse constructor.
- [Metadata and OG images](https://nextjs.org/docs/app/getting-started/metadata-and-og-images?from=related) — Learn how to add metadata to your pages and create dynamic OG images.

Full cross-link map for this page: [/kb/guide/dynamic-text-as-image.graph.md](/kb/guide/dynamic-text-as-image.graph.md)
<!-- /docsgraph:related -->


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:

```typescript
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=<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:

```bash
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)