Use Remix's built-in meta function to generate dynamic OG images for every route — zero configuration.
Get StartedTypeScript-first approach with full type safety for your meta functions and data flows.
Per-route meta definitions with explicit control over og:image and twitter:image tags.
Data flows naturally from your loaders into your meta functions for dynamic content.
// app/routes/blog.$slug.tsx
export async function loader({ params }: LoaderArgs) {
const post = await getPost(params.slug!);
return json({ post });
}
export const meta: MetaFunction<typeof loader> = ({ data }) => {
const ogUrl = `https://imagoapi.com/api/og/generate?title=${encodeURIComponent(data.post.title)}&template=modern&api_key=${process.env.IMAGO_API_KEY}`;
return [
{ property: 'og:image', content: ogUrl },
{ name: 'twitter:image', content: ogUrl },
{ name: 'twitter:card', content: 'summary_large_image' },
];
};
Join thousands of developers using Imago API for dynamic social cards.
Start Free Trial