How to Use the meta Function in Remix for SEO and Metadata

In Remix, use the meta function inside your route modules to define page metadata like titles and descriptions. This function returns an object with key-value pairs that Remix uses to set HTML <meta> tags dynamically for each route.

Syntax

The meta function is exported from a Remix route module and returns an object where keys are meta tag names and values are their content. Remix uses this object to generate HTML <meta> tags in the document head.

Common keys include title for the page title and description for the page description.

javascript

export function meta() {
  return {
    title: "Page Title",
    description: "Page description for SEO and social sharing."
  };
}

Example

This example shows a Remix route module that sets a custom title and description using the meta function. When the page loads, the browser tab shows the title, and search engines read the description.

javascript

import { json } from "@remix-run/node";

export function meta() {
  return {
    title: "Welcome to Remix Meta Example",
    description: "This page demonstrates how to use the meta function in Remix."
  };
}

export function loader() {
  return json({ message: "Hello from Remix!" });
}

export default function Index() {
  return <h1>Hello Remix Meta!</h1>;
}

Output

<title>Welcome to Remix Meta Example</title>
<meta name="description" content="This page demonstrates how to use the meta function in Remix.">

Common Pitfalls

• Not exporting the meta function: Remix won't set metadata if meta is missing or not exported.
• Returning incorrect object shape: The meta function must return an object with string keys and string values; returning other types causes errors.
• Overwriting metadata unintentionally: When using nested routes, ensure each route sets metadata carefully to avoid unexpected overrides.

javascript

/* Wrong: meta function missing export */
function meta() {
  return { title: "Missing export" };
}

/* Right: meta function exported */
export function meta() {
  return { title: "Correct export" };
}

Quick Reference

Use this quick guide to remember how to use the meta function in Remix:

• export function meta(): Define metadata for the route.
• Return an object with keys like title, description, keywords.
• Values must be strings.
• Remix injects these as HTML <meta> tags in the document head.
• Works per route for dynamic metadata.

Key Takeaways

Always export a meta function from your Remix route to set page metadata.

Return an object with string keys and values representing meta tags like title and description.

Meta function output controls the HTML tags for SEO and browser display.

Be careful with nested routes to avoid metadata conflicts or overwrites.

Meta function helps improve SEO and user experience by customizing page info.