Open Graph React SEO: Why React App Looks Broken on Twitter And How to Fix It

I spent nearly 3 hours debugging why my React app looked perfect in the browser but turned into a blank card when shared on Twitter.

No image. No title. No description.

Just a sad naked URL.

The frustrating part was that my meta tags were technically correct. The real issue was simpler: most social crawlers do not execute client-side React the same way browsers do.

In this article, you’ll learn how to fix Open Graph React SEO properly using server-rendered meta tags, generate dynamic OG images, and avoid the most common SEO mistakes in React apps without rebuilding your entire stack.

The React SEO Problem Nobody Notices Until Production

If you’ve built a React SPA using Vite, CRA, or React Router, your index.html probably looks something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My React App</title>
    <meta name="description" content="Cool app" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Then somewhere inside React:

import { Helmet } from "react-helmet";

export default function BlogPost() {
  return (
    <>
      <Helmet>
        <title>React SEO Guide</title>

        <meta
          property="og:title"
          content="React SEO Guide"
        />

        <meta
          property="og:description"
          content="How to fix Open Graph tags in React"
        />
      </Helmet>

      <h1>Blog Post</h1>
    </>
  );
}

Looks correct, right?

But many crawlers fetch the initial HTML before React hydrates.

That means they only see:

<title>My React App</title>

…and completely miss your dynamic Open Graph tags.

Result:

Broken social previews
Wrong titles on Discord, Twitter, and LinkedIn
Poor indexing
Lower click-through rates

This is one of the most common Open Graph React SEO issues developers run into.

The Fastest Fix Is Injecting OG Tags Server Side

You do not need to migrate your app to Next.js.

You just need the server to return fully rendered meta tags.

Here’s a lightweight Express setup that works with existing React apps.

Step 1: Create an Express server

Install Express:

npm install express

Create server.js:

import express from "express";
import fs from "fs";
import path from "path";

const app = express();

app.use(express.static("dist"));

app.get("/post/:slug", (req, res) => {
  const slug = req.params.slug;

  const post = {
    title: "Fix React Open Graph Tags",
    description: "Dynamic OG tags for React apps",
    image: "https://mysite.com/og-image.png"
  };

  let html = fs.readFileSync(
    path.resolve("dist/index.html"),
    "utf8"
  );

  html = html
    .replace("__TITLE__", post.title)
    .replace("__DESCRIPTION__", post.description)
    .replace("__IMAGE__", post.image);

  res.send(html);
});

app.listen(3000);

Step 2: Add placeholders to `index.html`

<head>
  <title>__TITLE__</title>

  <meta
    property="og:title"
    content="__TITLE__"
  />

  <meta
    property="og:description"
    content="__DESCRIPTION__"
  />

  <meta
    property="og:image"
    content="__IMAGE__"
  />
</head>

Now crawlers receive the correct tags immediately.

No hydration required.

Result

When someone shares:

https://mysite.com/post/react-seo-guide

Twitter, Discord, LinkedIn, and Facebook now render:

Correct title
Correct description
Preview image

This is the core fix behind most Open Graph React SEO problems.

Dynamic OG Images Improve CTR More Than Most Developers Expect

Most developers stop after adding titles and descriptions.

But preview images dramatically improve click-through rates.

Static images work, but dynamic images are much better for blogs, changelogs, dashboards, and documentation pages.

Here’s a simple dynamic OG image endpoint using React and Satori.

Install dependencies:

npm install satori sharp

Create og.js:

import satori from "satori";
import sharp from "sharp";

export async function generateOgImage(title) {
  const svg = await satori(
    {
      type: "div",
      props: {
        style: {
          display: "flex",
          width: "1200px",
          height: "630px",
          background: "#111",
          color: "#fff",
          alignItems: "center",
          justifyContent: "center",
          fontSize: "64px",
          padding: "40px"
        },
        children: title
      }
    },
    {
      width: 1200,
      height: 630
    }
  );

  return sharp(Buffer.from(svg))
    .png()
    .toBuffer();
}

Add route:

app.get("/og/:title", async (req, res) => {
  const image = await generateOgImage(
    req.params.title
  );

  res.set("Content-Type", "image/png");
  res.send(image);
});

Now your OG tag becomes:

<meta
  property="og:image"
  content="https://mysite.com/og/react-seo-guide"
/>

Result

Every shared article automatically gets a branded preview image.

That alone can significantly improve engagement on:

Dev.to
Twitter/X
Reddit
LinkedIn
Discord

Crawlers also cache aggressively, so dynamic images help prevent stale previews from sticking around too long.

A Cleaner Approach Using @power-seo

After manually wiring this up across multiple projects, I got tired of repeating the same boilerplate.

Especially:

Meta tag injection
Route matching
OG image generation
Crawler compatibility
SSR edge cases

Instead of manually replacing placeholders, you define SEO data per route.

Example:

import { createSEO } from "@power-seo/core";

const seo = createSEO({
  routes: {
    "/post/:slug": async ({ slug }) => {
      const post = await getPost(slug);

      return {
        title: post.title,
        description: post.description,
        image: post.image
      };
    }
  }
});

Then mount middleware:

app.use(seo.middleware());

That’s it.

The important thing is not the library itself. The important thing is the architecture:

Generate tags server-side
Return crawler-friendly HTML
Keep metadata tied to routes
Avoid client-only rendering for SEO

The package simply removes repetitive plumbing.

I wrote a deeper breakdown here:

Open Graph React SEO guide

How to Verify Your Open Graph Tags Actually Work

A lot of developers assume tags work because they appear in DevTools.

That’s not enough.

You need to test what crawlers actually see.

Twitter Card Validator

https://cards-dev.twitter.com/validator

LinkedIn Post Inspector

https://www.linkedin.com/post-inspector/

Facebook Sharing Debugger

https://developers.facebook.com/tools/debug/

Paste your URL and verify:

Title
Description
Image
Canonical URL

If something looks wrong, the usual causes are:

Tags are client-rendered
Crawlers cached old HTML
Invalid image dimensions
Missing absolute URLs

Common Open Graph React SEO Mistakes

1. Using React Helmet Alone

react-helmet is useful for browsers.

It is not enough for crawler compatibility unless paired with SSR or prerendering.

2. Forgetting Absolute URLs

This breaks frequently:

<meta property="og:image" content="/image.png" />

Use:

<meta
  property="og:image"
  content="https://mysite.com/image.png"
/>

3. Wrong Image Size

Recommended dimensions:

1200 × 630

Smaller images often render poorly or fail entirely.

4. Not Caching OG Images

Dynamic generation can become expensive quickly.

Cache aggressively:

res.set(
  "Cache-Control",
  "public, max-age=86400"
);

What I Learned

React SPAs often fail social previews because crawlers do not fully execute client-side rendering
Open Graph React SEO works best when meta tags are generated server-side
Dynamic OG images improve click-through rates more than most developers expect
react-helmet helps browsers, but SSR or prerendering fixes crawler visibility
You do not need a full Next.js migration to solve this problem
Libraries like @[power-seo](https://www.npmjs.com/org/power-seo) are useful because they automate repetitive server-side SEO plumbing.

What’s your current React SEO setup?

Are you using SSR, prerendering, middleware injection, or just hoping crawlers execute your app correctly?

I’m curious what approaches people are using in production right now.

推荐订阅源

DEV Community

The React SEO Problem Nobody Notices Until Production

The Fastest Fix Is Injecting OG Tags Server Side

Step 1: Create an Express server

Step 2: Add placeholders to `index.html`

Result

Dynamic OG Images Improve CTR More Than Most Developers Expect

Result

A Cleaner Approach Using @power-seo

How to Verify Your Open Graph Tags Actually Work

Twitter Card Validator

LinkedIn Post Inspector

Facebook Sharing Debugger

Common Open Graph React SEO Mistakes

1. Using React Helmet Alone

2. Forgetting Absolute URLs

3. Wrong Image Size

4. Not Caching OG Images

What I Learned

推荐订阅源

DEV Community

The React SEO Problem Nobody Notices Until Production

The Fastest Fix Is Injecting OG Tags Server Side

Step 1: Create an Express server

Step 2: Add placeholders to index.html

Result

Dynamic OG Images Improve CTR More Than Most Developers Expect

Result

A Cleaner Approach Using @power-seo

How to Verify Your Open Graph Tags Actually Work

Twitter Card Validator

LinkedIn Post Inspector

Facebook Sharing Debugger

Common Open Graph React SEO Mistakes

1. Using React Helmet Alone

2. Forgetting Absolute URLs

3. Wrong Image Size

4. Not Caching OG Images

What I Learned

Step 2: Add placeholders to `index.html`