How to Add OG Images to React Apps (Vite, CRA, Remix)
Add Open Graph images to your React application. Covers react-helmet, Vite SSR, Remix meta, and API-based OG image generation.
Quick Answer
To add OG images in React, you need to set og:image meta tags in the HTML head. For client-side React (Vite/CRA), use react-helmet-async. For SSR frameworks like Remix, use the built-in meta function. Point the og:image URL to an API endpoint that generates images from your page data.
The Challenge with React and OG Images
Social media crawlers (Facebook, Twitter, LinkedIn) do not execute JavaScript. They only read the initial HTML response. This means OG meta tags must be present in the server-rendered HTML, not injected by client-side JavaScript.
This has important implications for different React setups:
- Next.js / Remix (SSR): Meta tags are in the initial HTML — OG images work out of the box
- Vite / CRA (CSR): Meta tags are injected by JS — crawlers won't see them unless you add SSR or use a pre-rendering service
React with Remix
Remix provides a meta function for setting Open Graph tags:
// app/routes/blog.$slug.tsx
import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction = ({ data }) => {
const ogImage = `https://ogimg.xyz/api/og?${new URLSearchParams({
title: data.post.title,
description: data.post.excerpt,
template: "blog",
})}`;
return [
{ title: data.post.title },
{ property: "og:title", content: data.post.title },
{ property: "og:image", content: ogImage },
{ property: "og:image:width", content: "1200" },
{ property: "og:image:height", content: "630" },
];
};Client-Side React (Vite / CRA)
For client-side React apps, use react-helmet-async:
import { Helmet } from "react-helmet-async";
function BlogPost({ post }) {
const ogImage = `https://ogimg.xyz/api/og?${new URLSearchParams({
title: post.title,
template: "gradient",
})}`;
return (
<>
<Helmet>
<meta property="og:title" content={post.title} />
<meta property="og:image" content={ogImage} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
</Helmet>
<article>{/* post content */}</article>
</>
);
}Important: This only works if you add server-side rendering (SSR) or pre-rendering. Without SSR, social crawlers won't see these tags. Consider using Prerender.io or switching to a framework with SSR support.
Static Site Generators (Gatsby, Astro)
For Gatsby, use the Gatsby Head API:
// src/pages/blog/{mdx.slug}.tsx
export function Head({ data }) {
const ogImage = `https://ogimg.xyz/api/og?title=${encodeURIComponent(data.mdx.frontmatter.title)}&template=blog`;
return <>
<meta property="og:image" content={ogImage} />
</>;
}For Astro, add meta tags in your layout's <head>:
---
// src/layouts/BlogPost.astro
const { title, description } = Astro.props;
const ogImage = `https://ogimg.xyz/api/og?title=${encodeURIComponent(title)}&template=gradient`;
---
<head>
<meta property="og:image" content={ogImage} />
</head>Frequently Asked Questions
Do OG images work with client-side rendering?
Not by default. Social media crawlers don't execute JavaScript, so they won't see meta tags injected by React. You need SSR, static generation, or a pre-rendering service.
Which React framework is best for OG images?
Next.js and Remix both have excellent built-in support for OG meta tags via their metadata/meta APIs. Both render meta tags server-side, which is what social crawlers need.
Related Guides
Compare with Alternatives
See how OG Image Generator stacks up against other tools.
Start Generating OG Images
Free API for developers. 50 images/month, 10 templates, no credit card required.