You can use the following code samples to explore using parameters and different content types with @vercel/og. For a get started guide and system requirements, review using @vercel/og.
You can deploy the examples in this guide on your own Vercel account by using the button below:
In this example, your post image is made up of a static SVG logo and the post title. You will pass the post title as a parameter and use TypeScript.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';
export const config = {
runtime: 'edge',
};
export default function handler(req: NextRequest) {
try {
const { searchParams } = new URL(req.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,
});
}
}
Image generated using title=my post title
Once deployed, you can use the following <meta> tag value for all your posts:
<head>
<title>The post's title</title>
<meta property="og:image" content="*.vercel.app/api/og?title=my post title" />
</head>In this example, your post image is made up of an avatar user image and the URL of the user’s profile. The image is fetched remotely based on the username passed as a parameter.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';
export const config = {
runtime: 'edge',
};
export default async function handler(req: NextRequest) {
const { searchParams } = req.nextUrl;
const username = searchParams.get('username');
if (!username) {
return new ImageResponse(<>Visit with "?username=vercel"</>, {
width: 1200,
height: 630,
});
}
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 60,
color: 'black',
background: '#f6f6f6',
width: '100%',
height: '100%',
paddingTop: 50,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
width="256"
height="256"
src={`https://github.com/${username}.png`}
style={{
borderRadius: 128,
}}
/>
<p>github.com/{username}</p>
</div>
),
{
width: 1200,
height: 630,
},
);
}
Image generated using a github profile dynamic image for username=vercel
Once deployed, you can use the following <meta> tag value for all your posts:
<head>
<title>The post's title</title>
<meta
property="og:image"
content="https://{your-app-name-here}/api/og?username=myusername"
/>
</head>In this example, your post image is made up of emojis.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
export default async function handler() {
return new ImageResponse(
(
<div
style={{
fontSize: 100,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
padding: '50px 200px',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
👋, 🌎
</div>
),
{
width: 1200,
height: 630,
// Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
// Default to 'twemoji'
emoji: 'twemoji',
},
);
}
Image generated using emojis 👋, 🌎
Once deployed, you can use the following <meta> tag value for your post:
<head>
<title>My post with emoji</title>
<meta property="og:image" content="https://{your-app-name-here}/api/og" />
</head>In this example, your post image is made up of an SVG image.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
export default async function handler() {
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 40,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
<svg fill="black" viewBox="0 0 284 65">
<path d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm117.14-14.5c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.03 3.5c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9v-46h9zM37.59.25l36.95 64H.64l36.95-64zm92.38 5l-27.71 48-27.71-48h10.39l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10v14.8h-9v-34h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" />
</svg>
</div>
),
{
width: 1200,
height: 630,
},
);
}
Image generated using the Vercel logo SVG
Once deployed, you can use the following <meta> tag value for your post:
<head>
<title>My post with SVG</title>
<meta property="og:image" content="https://{your-app-name-here}/api/og" />
</head>In this example, your post image is made of a static title styled with a custom font that you provide.
Paste your custom font TYPEWR__.ttf (Available here) under the /assets folder from the project root.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
// Make sure the font exists in the specified path:
const font = fetch(new URL('../../assets/TYPEWR__.ttf', import.meta.url)).then(
(res) => res.arrayBuffer(),
);
export default async function handler() {
const fontData = await font;
return new ImageResponse(
(
<div
style={{
backgroundColor: 'white',
height: '100%',
width: '100%',
fontSize: 100,
fontFamily: '"Typewriter"',
paddingTop: '100px',
paddingLeft: '50px',
}}
>
Hello world!
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Typewriter',
data: fontData,
style: 'normal',
},
],
},
);
}
Image generated using the custom font typewriter
Once deployed, you can use the following <meta> tag value for your post:
<head>
<title>Hello world</title>
<meta property="og:image" content="https://{your-app-name-here}/api/og" />
</head>In this example, you use Tailwind CSS to style the content for the OG image using a template provided by Tailwind.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
export default async function () {
return new ImageResponse(
(
// Modified based on https://tailwindui.com/components/marketing/sections/cta-sections
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<div tw="bg-gray-50 flex">
<div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
<h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
<span>Ready to dive in?</span>
<span tw="text-indigo-600">Start your free trial today.</span>
</h2>
<div tw="mt-8 flex md:mt-0">
<div tw="flex rounded-md shadow">
<a
href="#"
tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white"
>
Get started
</a>
</div>
<div tw="ml-3 flex rounded-md shadow">
<a
href="#"
tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600"
>
Learn more
</a>
</div>
</div>
</div>
</div>
</div>
),
{
width: 1200,
height: 630,
},
);
}
Image generated using tailwind css
Once deployed, you can use the following <meta> tag value for your post:
<head>
<title>My post using tailwindcss</title>
<meta property="og:image" content="https://{your-app-name-here}/api/og" />
</head>In this example, your post image uses different languages.
Create og.tsx under /pages/api and paste the following code:
import { ImageResponse } from '@vercel/og';
export const config = {
runtime: 'edge',
};
export default async function handler() {
return new ImageResponse(
(
<div
style={{
fontSize: 40,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
padding: '50px 200px',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
👋 Hello 你好 नमस्ते こんにちは สวัสดีค่ะ 안녕 добрий день Hallá
</div>
),
{
width: 1200,
height: 630,
},
);
}
Image generated using other languages
Once deployed, you can use the following <meta> tag value for your post:
<head>
<title>My post in multiple languages</title>
<meta property="og:image" content="https://{your-app-name-here}/api/og" />
</head>In this example, you use HMAC hash to encrypt the parameters passed to the OG image API endpoint so that only encrypted parameters can be passed to the endpoint for security purposes.
In addition to the API endpoint, you will create a front-end dynamic route that generates a link with a token to access the endpoint. This is the directory structure for these files:
Create encrypted.tsx under /pages/api and paste the following code:
// This function verifies the token to prevent generating images with random parameters (`id`).
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';
export const config = {
runtime: 'edge',
};
const key = crypto.subtle.importKey(
'raw',
new TextEncoder().encode('my_secret'),
{ name: 'HMAC', hash: { name: 'SHA-256' } },
false,
['sign'],
);
function toHex(arrayBuffer: ArrayBuffer) {
return Array.prototype.map
.call(new Uint8Array(arrayBuffer), (n) => n.toString(16).padStart(2, '0'))
.join('');
}
export default async function handler(req: NextRequest) {
const { searchParams } = req.nextUrl;
const id = searchParams.get('id');
const token = searchParams.get('token');
const verifyToken = toHex(
await crypto.subtle.sign(
'HMAC',
await key,
new TextEncoder().encode(JSON.stringify({ id })),
),
);
if (token !== verifyToken) {
return new Response('Invalid token.', { status: 401 });
}
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 40,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
padding: '50px 200px',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
<h1>Card generated, id={id}.</h1>
</div>
),
{
width: 1200,
height: 630,
},
);
}Create the dynamic route [id].tsx under /pages/encrypted and paste the following code:
// This SSG page generates the token to prevent generating OG images with random parameters (`id`).
import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next';
import { ParsedUrlQuery } from 'querystring';
import { createHmac } from 'node:crypto';
interface IParams extends ParsedUrlQuery {
id: string;
}
type PageProps = {
id: string;
token: string;
};
export const getStaticProps: GetStaticProps = async (context) => {
const { id } = context.params as IParams;
const hmac = createHmac('sha256', 'my_secret');
hmac.update(JSON.stringify({ id: id }));
const token = hmac.digest('hex');
return {
props: {
id: id,
token,
},
};
};
export function getStaticPaths() {
return {
paths: [
{ params: { id: 'a' } },
{ params: { id: 'b' } },
{ params: { id: 'c' } },
],
fallback: false,
};
}
export default function Page({ id, token }: PageProps) {
return (
<div>
<h1>Encrypted Open Graph Image.</h1>
<p>Only /a, /b, /c with correct tokens are accessible:</p>
<a
href={`/api/encrypted?id=${id}&token=${token}`}
target="_blank"
rel="noreferrer"
>
<code>
/api/encrypted?id={id}&token={token}
</code>
</a>
</div>
);
}Run your project locally and browse to http://localhost/encrypted/a(b or c will also work).
Click on the generated link to be directed to the generated image.
Image generated using /api/encrypted?id=a&token=634dd7e46ec814fb105074b73e26755b0d9966c031dca05d7e7cc65a1619058e
In your actual implementation, you will use the code in /pages/encrypted/[id].tsx with a page to create your post html that will look like this:
<head>
<title>My post with encrypted API</title>
<meta
property="og:image"
content="https://{your-app-name-here}/api/encrypted?id=a&token=634dd7e46ec814fb105074b73e26755b0d9966c031dca05d7e7cc65a1619058eg"
/>
</head>