RemixHow-ToBeginner · 3 min read

How to Add Meta Tags in Remix for SEO and Social Sharing

In Remix, you add meta tags by exporting a meta function from your route module that returns an object with key-value pairs for each meta tag. Remix uses this function to inject meta tags into the HTML <head> automatically.

📐

Syntax

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

Common keys include title, description, og:title, og:description, and twitter:card.

typescript

export const meta = () => {
  return {
    title: "Page Title",
    description: "Page description for SEO",
    "og:title": "Open Graph Title",
    "og:description": "Open Graph Description",
    "twitter:card": "summary_large_image"
  };
};

💻

Example

This example shows a Remix route exporting a meta function to add meta tags for SEO and social sharing. The tags will appear in the page's <head> section automatically.

typescript

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

export const meta: MetaFunction = () => {
  return {
    title: "Welcome to My Remix Site",
    description: "This is a simple Remix app with meta tags.",
    "og:title": "Welcome to My Remix Site",
    "og:description": "This is a simple Remix app with meta tags.",
    "twitter:card": "summary"
  };
};

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

Output

<head> <title>Welcome to My Remix Site</title> <meta name="description" content="This is a simple Remix app with meta tags." /> <meta property="og:title" content="Welcome to My Remix Site" /> <meta property="og:description" content="This is a simple Remix app with meta tags." /> <meta name="twitter:card" content="summary" /> </head> <body> <h1>Hello Remix!</h1> </body>

⚠️

Common Pitfalls

Not exporting the meta function from the route module means no meta tags will be added.
Returning a non-object or missing keys in meta causes Remix to ignore meta tags.
Using incorrect keys like og:title without quotes can cause syntax errors; always quote keys with colons.
For dynamic meta tags, use the data argument in meta to access loader data.

typescript

/* Wrong: missing export */
const meta = () => ({ title: "No export" });

/* Right: export meta function */
export const meta = () => ({ title: "Correct export" });

📊

Quick Reference

Use this quick reference to remember how to add meta tags in Remix:

Step	Description	Example
1	Export a meta function from your route	export const meta = () => ({ title: "My Title" });
2	Return an object with meta tag keys and values	{ description: "Page description" }
3	Quote keys with colons for Open Graph or Twitter tags	"og:title": "Open Graph Title"
4	Use loader data for dynamic meta tags	export const meta = ({ data }) => ({ title: data.title });

✅

Key Takeaways

Always export a meta function from your Remix route to add meta tags.

Return an object with meta tag names as keys and their content as values.

Quote keys with colons like "og:title" to avoid syntax errors.

Use loader data in the meta function for dynamic meta tags.

Meta tags appear automatically in the HTML head when using Remix.