Meta Tags for React and Next.js — Generate Tags Without the Guesswork

React applications have a meta tag problem that static HTML sites don't. In a single-page app, the HTML document head doesn't update when you navigate between routes — it stays static unless you explicitly manage it with JavaScript. Search engines see whatever is in the initial HTML, which is often just your app shell with no useful title or description.

Next.js solves most of this with its built-in metadata API, but getting the right tags in the right places still requires knowing exactly what to write. This guide shows you how to generate perfect meta tags and add them to React and Next.js apps — starting with what to write, not where to paste it.

Why React SPAs Struggle With Meta Tags

In a traditional HTML page, meta tags sit in the head element and get served with the initial HTML response. Search engine bots read that HTML and extract the title, description, and OG tags immediately.

In a client-side React app, the initial HTML response looks like this: a bare HTML shell with a single div and a script tag. The actual content — including meta tags — only appears after JavaScript runs. Most search engine bots do execute JavaScript, but they don't always wait long enough, and rendering JavaScript costs crawl budget.

The practical result: many React apps show up in Google with no title, no description, or with the same title tag on every page. Even worse, when someone shares a React app URL on social media, platforms like Facebook don't execute JavaScript at all — they read the raw HTML and get nothing useful.

Solutions: use Next.js (which handles server-side rendering), use React Helmet or react-helmet-async in a Create React App setup, or configure your server to inject meta tags based on the route. Next.js is the easiest path for most projects.

Next.js App Router — The metadata Export

In Next.js 13+ with the App Router, you export a metadata object from any page.tsx or layout.tsx file. Next.js handles the rest — it injects the tags into the rendered HTML head automatically.

The structure looks like this in TypeScript:

export const metadata = {
  title: 'Your Page Title',
  description: 'Your meta description here.',
  openGraph: {
    title: 'Your OG Title',
    description: 'Your OG description.',
    images: [{ url: 'https://example.com/og-image.jpg' }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    site: '@yourhandle',
  },
};

For dynamic pages (blog posts, product pages), export a generateMetadata function instead. It receives route params and can fetch data to build metadata dynamically:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

Use the Meta Tag Generator to write the actual title, description, and OG tag content — then paste those values into your metadata object. The generator ensures you stay within character limits and don't forget required fields.

Sell Custom Apparel — We Handle Printing & Free Shipping

Open Graph and Twitter Card Tags in Next.js

Next.js fully supports OG and Twitter Card tags through the openGraph and twitter keys in the metadata object. The generated output is server-rendered HTML, which means Facebook, LinkedIn, and Twitter can read the tags even without executing JavaScript.

Key fields to set for every page:

• openGraph.title — usually the same as your page title, but can be longer
• openGraph.description — 2–4 sentences, optimized for social shares (different intent than your SEO meta description)
• openGraph.images — array of image objects, include width and height for faster rendering
• openGraph.url — the canonical URL of the page
• openGraph.type — 'website' for most pages, 'article' for blog posts

For Twitter/X specifically:

• twitter.card — 'summary' for small cards, 'summary_large_image' for large image cards
• twitter.site — your brand's Twitter handle
• twitter.creator — the author's handle (for blog posts)

After deploying, paste your page source into the Open Graph Checker to verify everything is rendering correctly before you share.

React SPAs — react-helmet-async for Non-Next.js Apps

If you're using Create React App, Vite, or another client-side-only React setup, you need react-helmet-async to manage meta tags per route. Install it with: npm install react-helmet-async

Wrap your app in the HelmetProvider, then use the Helmet component inside each route component:

import { Helmet } from 'react-helmet-async';

function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} — Your Brand</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:image" content={product.image} />
      </Helmet>
      {/* page content */}
    </>
  );
}

The important caveat: react-helmet only helps search engines if you have server-side rendering. For a purely client-side app, Googlebot may or may not pick up the tags depending on when it renders. For reliable social sharing, pre-rendering or SSR is still required — which is why Next.js is recommended for SEO-sensitive apps.

Generate Your Tags First, Then Paste — The Faster Workflow

Whether you're using Next.js's metadata API, react-helmet, or plain HTML, the fastest workflow is to generate all your meta tags before touching your codebase.

Use the Meta Tag Generator to fill in your title, description, canonical URL, OG image, Twitter handle, and other fields. The generator shows a live character count for your title (target: under 60) and description (target: 120–155). Once you're happy with the output, copy the generated HTML and extract the values you need.

For Next.js, you don't paste the raw HTML — you paste the text values into your metadata object. For react-helmet, you paste the attribute values into your Helmet component props. For plain HTML, you paste the tags directly into your head element.

The generator catches common mistakes before they reach production: titles that are too long and get truncated, missing OG tags that cause blank social previews, wrong og:type values, and Twitter Card tags that reference the wrong image dimensions.

After pasting, validate the output using the Open Graph Checker — paste your page's HTML source and see the Facebook, LinkedIn, and Twitter previews before you share anything.

Frequently Asked Questions

How do I add meta tags to a React app?

In Next.js, export a metadata object from your page.tsx or layout.tsx file — Next.js handles server-side injection automatically. In Create React App or Vite, install react-helmet-async and use the Helmet component inside each route. For static sites, add meta tags directly to your HTML files.

Do React meta tags work for social sharing?

Only if the tags are server-rendered or statically generated. Facebook, Twitter, and LinkedIn do not execute JavaScript — they read the raw HTML response. A client-side React app that injects meta tags via JavaScript will show blank social previews. Next.js solves this with server-side rendering.

What is the Next.js metadata API?

The metadata API is a Next.js 13+ App Router feature that lets you export a metadata object from any page or layout file. Next.js reads this object and renders the corresponding meta tags as part of the server-side HTML output, making them visible to search engines and social media crawlers.