Adding Open Graph Meta Tags in Next.js and React Apps

Implementing Open Graph tags in React and Next.js apps requires a different approach than static HTML sites. Since social media crawlers often don't execute JavaScript, you need server-side rendering or static generation to ensure your OG tags are visible to crawlers. This guide covers the best approaches for each framework.

Next.js: Using the Metadata API (App Router)

Next.js 13+ with the App Router provides a built-in Metadata API that makes OG tag implementation straightforward. Export a metadata object from your page.tsx file with the openGraph property. Next.js automatically renders these as meta tags in the HTML head, making them visible to social media crawlers.

Next.js: Pages Router with next/head

For Next.js apps using the Pages Router, use the next/head component to inject meta tags. Import Head from "next/head" and add your OG tags inside the Head component in each page component. For dynamic pages, fetch the data in getServerSideProps or getStaticProps and pass it to the component.

React SPA: The Challenge

Pure React SPAs (without SSR) have a fundamental challenge: social media crawlers typically don't execute JavaScript, so they see the empty HTML shell without any OG tags. Solutions include: (1) using a pre-rendering service like Prerender.io, (2) migrating to Next.js for SSR, or (3) using a CDN-level solution to serve pre-rendered HTML to crawlers.

Remix: Built-in Meta Function

Remix has excellent built-in support for meta tags through the meta export function. Each route can export a meta function that returns an array of meta tag objects. Remix renders these server-side, making them immediately visible to social media crawlers without any additional configuration.

Priya Sharma

Priya is a full-stack developer and technical SEO specialist who writes about web performance, metadata, and developer tools.