React framework

React Router OG Image Integration

Add automatic MyOG.social images to React Router Framework Mode routes with meta exports, loaders, and pre-rendered or server-rendered HTML.

Prerequisites

A React Router Framework Mode app
Server rendering enabled or the public routes pre-rendered at build time
A MyOG.social account with your domain added

How MyOG fits React Router

React Router Framework Mode renders route metadata from each route module's meta export.

MyOG works best when those meta descriptors are present in the initial HTML response, so social crawlers can read og:image without running client-side JavaScript.

Use loader data or route params to build the canonical page URL, then return Open Graph and Twitter image descriptors from meta.

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

Add the React Router code

Route meta export

Use this in a public Framework Mode route module.

import type { MetaFunction } from "react-router";

export const meta: MetaFunction = () => {
  return [
    { property: "og:image", content: "https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fblog%2Fmy-post&template=screenshot-right" },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:image", content: "https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Fblog%2Fmy-post&template=screenshot-right" },
  ];
};

Replace the encoded example URL with the route's final canonical URL.

Dynamic route with loader data

Use loader data when the canonical URL depends on route params or content records.

import type { LoaderFunctionArgs, MetaFunction } from "react-router";

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    canonicalURL: `https://example.com/blog/${post.slug}`,
  };
}

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  const pageURL = encodeURIComponent(data?.canonicalURL ?? "https://example.com");
  const imageURL = `https://api.myog.social/og?url=${pageURL}&template=screenshot-right`;

  return [
    { title: data?.title ?? "Blog post" },
    { property: "og:image", content: imageURL },
    { property: "og:image:width", content: "1200" },
    { property: "og:image:height", content: "630" },
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:image", content: imageURL },
  ];
};

Keep the canonical URL stable across trailing slashes, locale prefixes, and redirects.

Place it correctly

Find the route module for the public page, such as app/routes/blog.$slug.tsx.
Add or update the route's meta export so it returns MyOG Open Graph and Twitter image descriptors.
For static pages, use a literal canonical URL. For dynamic pages, build the URL from loader data, params, or a canonical URL helper.
Confirm the route is server-rendered or included in react-router.config.ts pre-rendering.

Avoid duplicate og:image tags

If your root route, parent route, or SEO helper already returns og:image, merge metadata carefully and keep only one preferred image for a page. React Router nested routes can override or replace parent metadata depending on how your meta functions are composed.

Dynamic pages

Dynamic routes should build the MyOG url parameter from the final canonical URL, not from a client-side location value. Use loader data for slugs, locale prefixes, or canonical aliases when the request path is not the URL you want shared.

Test the result

Use curl or View Source on the deployed route and confirm the MyOG tags are in the HTML response.
Test a static route and one dynamic route that uses loader data or params.
If ssr is false, confirm the route is pre-rendered; otherwise crawlers may only see the shell HTML.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

React Router Data Mode and Declarative Mode do not use Framework Mode route meta exports the same way.

Client-only metadata changes after hydration are unreliable for link-preview crawlers.

Private dashboards, authenticated routes, and preview URLs should not be used as public MyOG targets.

Sources

Ready to get started?

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f