Open Graph Tags in React and Next.js
How to add OG tags in React and Next.js — Helmet, Next.js Metadata API, and dynamic OG images.
Published:
Tags: Open Graph tags React Next.js, Next.js OG image, React meta tags
Open Graph Tags in React and Next.js React's client-side rendering creates a challenge for OG tags: social media scrapers don't execute JavaScript, so tags written by React after mount are invisible to them. The solution depends on whether you're using Next.js (server-rendered) or a pure client-side React SPA. --- What about The Core Problem with React SPAs? A plain or Vite React SPA outputs a minimal HTML shell: When React mounts, it writes meta tags to — but only after JavaScript executes. Social scrapers see the empty shell. The og:image is missing. The share card is blank or generic. Solutions: Server-side rendering (Next.js, Remix) Static generation with baked-in per-route HTML (this site's approach) Dynamic OG page generation at build time --- What about Next.js App Router…
Frequently Asked Questions
How do I add OG tags in Next.js?
In the App Router (Next.js 13+), export a `metadata` object or `generateMetadata` function from any `page.tsx`. Next.js renders the resulting tags server-side, making them available to crawlers before JavaScript executes. In the Pages Router, use `next/head` with `<Head>` component inside each page.
How do I use React Helmet for meta tags?
Install `react-helmet-async` and wrap your app in `<HelmetProvider>`. Inside any component, use `<Helmet>` with `<title>` and `<meta>` children. React Helmet writes to the document `<head>` on the client after hydration. Important: for social scrapers, you still need server-side rendering or static OG page generation.
How do I generate dynamic OG images in Next.js?
Use `@vercel/og` with a route at `/api/og`. It accepts URL parameters and renders a React component to a PNG image on demand. Example: `/api/og?title=My+Article&author=Alice`. Reference this URL in `og:image` in your metadata. It works on Vercel's Edge Runtime at low latency.
What is the Next.js Metadata API?
The Next.js App Router provides a built-in Metadata API via exported `metadata` constants or `generateMetadata` async functions in `page.tsx` and `layout.tsx`. It generates the full `<head>` tag set including Open Graph, Twitter Cards, and canonical without requiring any head-management library.
How do I test OG tags in development?
Social scrapers can't reach localhost. Use `ngrok` or Cloudflare Tunnel to expose localhost to a public URL, then test with the Facebook Sharing Debugger or Twitter Card Validator. Alternatively, check the rendered `<head>` source in DevTools to verify tags are present.
All articles · theproductguy.in