Back to Docs

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.

1

Choose a layout

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

2

Add the React Router code

Route meta export

Use this in a public Framework Mode route module.

Preview anonymously. Sign in to get complete install code for your account.

Sign in to get install code

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.

Preview anonymously. Sign in to get complete install code for your account.

Sign in to get install code

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

3

Place it correctly

  1. Find the route module for the public page, such as app/routes/blog.$slug.tsx.
  2. Add or update the route's meta export so it returns MyOG Open Graph and Twitter image descriptors.
  3. For static pages, use a literal canonical URL. For dynamic pages, build the URL from loader data, params, or a canonical URL helper.
  4. 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?

Sign up for free and add generated social images to React Router routes.

Already have an account?

9355e1d0af85531fec59b28108cfa489a0cb1a32