How to Add Custom OG Images to Your Remix App
Remix handles metadata through exported meta functions rather than a document head component, which means OG images work differently than in other frameworks. Once you understand the pattern, adding a unique social card to every route takes about five minutes. Here is the complete picture.
Export a meta function from each route
In Remix, each route file can export a `meta` function that returns an array of tag descriptors. To set an OG image, return `{ property: "og:image", content: "https://cdn.example.com/og/page.png" }` alongside your title and description tags. Pair it with a `{ name: "twitter:image", content: "..." }` entry and a `{ name: "twitter:card", content: "summary_large_image" }` entry so both Facebook and X render correctly. The meta function receives loader data, so you can pull the image URL from your server without any client-side tricks.
Use loader data for dynamic per-page images
If you have a blog or product detail route, your loader fetches the record from the database and can include a pre-generated OG image URL. Return the URL in the loader response, then pick it up in your meta function via the `data` argument. This keeps image URLs out of the client bundle entirely and lets you update them server-side without redeploying. For static marketing pages, you can hard-code the URL directly in the meta array.
Resource routes for on-demand image generation
Remix resource routes are regular route files that return a non-HTML response. You can create a route like `app/routes/og.$.tsx` that accepts title and color query parameters, generates an image on demand using a canvas library or external API, and returns the PNG with `Content-Type: image/png`. Point your `og:image` tag at this route URL with the page title encoded as a query param. Cache the response at the CDN layer with a long `Cache-Control` header so generation only happens once per unique set of inputs.
Test previews before deploying
After wiring up the meta function, run `remix dev` and use a local tunnel tool like ngrok to expose your dev server to the public internet. Paste the tunnel URL into the Twitter Card Validator or Facebook Sharing Debugger to confirm the image is being fetched correctly. Social crawlers need a publicly reachable URL, so local `localhost` addresses will not work. Once deployed, clear the Facebook cache with the Sharing Debugger scrape button and recheck the Twitter validator.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Remix app