OGMagicIntegrations
OG Images for Remix
Create an image once and reuse its public URL in your page metadata.
Return your post's saved image URL from a Remix loader and read it in the route's meta export. Your loader fetches content; image creation happens separately when that content is published.
Quick Start
1. Create and save your image URL
Get a private API key through email access and set OGMAGIC_API_KEY in your server or terminal environment. Run this request when publishing content, then save the returned url with the page:
curl https://www.ogmagic.dev/api/images \
-H "Authorization: Bearer $OGMAGIC_API_KEY" \
-H "Content-Type: application/json" \
-d '{"title":"My article","template":"gradient-mesh"}'
# Save the returned url with your content. Keep the API key private.You can also create an image in the editor and copy its hosted URL. Keep the API key private; the returned image URL is public.
2. Publish it in your Remix metadata
Use your saved URL in the example below. Replace any placeholder URL with the creation response's url, or pass it from the stored content field. The dimensions shown are for the default 1200 × 630 image; use the returned dimensions for custom sizes.
import type { MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
export async function loader() {
return {
title: "My article",
description: "What this article covers",
ogImage: "https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png",
};
}
export const meta: MetaFunction<typeof loader> = ({ data }) => {
if (!data) return [{ title: "Article unavailable" }];
return [
{ title: data.title },
{ name: "description", content: data.description },
{ property: "og:title", content: data.title },
{ property: "og:description", content: data.description },
{ property: "og:type", content: "article" },
{ property: "og:image", content: data.ogImage },
{ property: "og:image:width", content: "1200" },
{ property: "og:image:height", content: "630" },
{ name: "twitter:card", content: "summary_large_image" },
{ name: "twitter:image", content: data.ogImage },
];
};
export default function Page() {
const post = useLoaderData<typeof loader>();
return <main><h1>{post.title}</h1></main>;
}💡 Render Remix's <Meta /> component inside the root document's <head>. Replace the example loader data with your CMS or database record. A leaf route's meta array replaces inherited route metadata, so return the complete social card for that route.
Reference: Remix documentation. After deploying, check the page with the OG tag checker.
Why use OGMagic with Remix?
Create once
Repeated identical requests reuse the saved image; social views use no generation credits.
55+ templates
Professional designs out of the box. Customize with JSON options.
Email access
Get your API key without a password or profile. Keep it private; share only image URLs.
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 new images per 30 days. Get your API key through an email link.