OG Images for Remix
Dynamic OG images for Remix apps — just add a meta export
OGMagic integrates cleanly with Remix's meta function. Add dynamic social preview images to every route with a simple URL.
Quick Start
Add OGMagic to your Remix project — no packages to install, no API keys to configure.
// app/root.tsx
export const meta: MetaFunction = () => {
return [
{ property: "og:image", content: "https://ogmagic.dev/api/og?template=gradient-mesh&title=My+App&domain=mysite.com" },
{ property: "og:image:width", content: "1200" },
{ property: "og:image:height", content: "630" },
{ name: "twitter:card", content: "summary_large_image" },
];
};Dynamic OG Images
Generate unique OG images per page using route data:
// app/routes/blog.$slug.tsx
export const meta: MetaFunction<typeof loader> = ({ data }) => {
if (!data) return [];
const ogUrl = new URL('https://ogmagic.dev/api/og');
ogUrl.searchParams.set('template', 'gradient-mesh');
ogUrl.searchParams.set('title', data.post.title);
ogUrl.searchParams.set('description', data.post.excerpt);
ogUrl.searchParams.set('domain', 'mysite.com');
return [
{ property: "og:image", content: ogUrl.toString() },
{ property: "og:image:width", content: "1200" },
{ property: "og:image:height", content: "630" },
{ name: "twitter:card", content: "summary_large_image" },
];
};💡 Works with Remix v2 meta convention. Each route can have unique OG images based on loader data.
Why use OGMagic with Remix?
No build step
Images are generated on-demand via URL. No build plugins, no CI/CD changes.
55+ templates
Professional designs out of the box. Customize with query parameters.
No API key needed
Free tier works instantly — just use the URL. No signup, no config.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Remix app?
Start with 50 free API calls/month. No signup needed.