How to Add SEO Tags in New React Using React Router v7

📈 How to Add SEO Tags in New React Using React Router v7

React Router v7 introduces powerful built-in support for SEO through modern APIs like meta() and links(). These allow you to manage <title>, <meta>, and <link> tags directly within your route files—no need for external libraries like react-helmet.

In this guide, you’ll learn how to implement SEO tags the right way using React Router v7’s latest features.

🚀 What Are meta() and links()?

React Router v7 (inspired by Remix) supports route-specific SEO and resource tags using:

meta(): Sets <title> and <meta> tags
links(): Sets <link> tags for styles, icons, preloads, etc.

🧱 Project Setup (Modern React with File-Based Routing)

Ensure you're using react-router-dom@^6.14 or 7.x and using createBrowserRouter() or file-based routing with a plugin like vite-plugin-react-router.

📝 Example: SEO Tags with meta()

export function meta() {
  return [
    { title: "Home | Example App" },
    {
      name: "description",
      content: "Welcome to our platform. Discover services tailored to your needs.",
    },
    {
      name: "keywords",
      content: "React, SEO, Example, Router, Web App",
    },
  ];
}

export default function Home() {
  return <h1>Welcome to Example App</h1>;
}

🎨 Example: Add Icons, Fonts, and Preloads with links()

export function links() {
  return [
    {
      rel: "icon",
      href: "/favicon.png",
      type: "image/png",
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
    },
    {
      rel: "preload",
      href: "/images/banner.jpg",
      as: "image",
    },
  ];
}

🧠 Rendering <meta> and <link> Tags

Use <Meta /> and <Links /> inside your root layout:

import { Meta, Links, Outlet } from "react-router-dom";

export default function RootLayout() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
      </body>
    </html>
  );
}

🔄 Dynamic SEO with Loader Data

export function meta({ data }: { data: { title: string } }) {
  return [
    { title: `${data.title} | Example Blog` },
    { name: "description", content: "Read expert insights, tutorials, and more." },
  ];
}

Ideal for dynamic pages like blogs, products, or CMS entries.

✅ Key Benefits

Cleaner per-route SEO config
No external libraries
Works with dynamic data
Works with SSR or static sites

🎁 Final Thoughts

With meta() and links() in React Router v7, adding SEO tags is built-in and scalable.

Whether you're building a landing page, blog, or full-scale web app—SEO is now just a few lines of code away.

📥 Bonus: Try it Out

npm install react-router

Need a starter template or example boilerplate? Let us know!