i have /signin?referralcode=<userReferalcode> and i want to display opengraph meta tag image for different user different
#meta tag image
hasty kernel
pallid micaBOT
Hi @hasty kernel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can achieve this by using dynamic Open Graph images in Next.js. You can create a unique image for every page of your site, which is useful when sharing links on the web through social platforms or through text message.
You can use the opengraph-image file convention to set Open Graph images for a route segment. This is useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site. There are two ways to set Open Graph images:
- Using image files (.jpg, .png, .gif)
- Using code to generate images (.js, .ts, .tsx)
For dynamic images, you can use Next.js API Routes with Vercel OG image generation library. Here is an example of how you can create a dynamic image based on a username parameter:
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
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,
},
);
}
In this example, the image is fetched remotely based on the username passed as a parameter. You can modify this code to suit your needs, for example, by fetching different images based on the referral code.
To see your generated image, run npm run dev in your terminal and visit the /api/og route in your browser (most likely <http://localhost:3000/api/og>).
Sources:
- Next.js Documentation - Open Graph Image (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image)
- Vercel Documentation - OG Image Generation (https://vercel.com/docs/functions/og-image-generation/og-image-examples)
- Vercel Documentation - Next.js on Vercel (https://vercel.com/docs/frameworks/nextjs)