RemixHow-ToBeginner · 3 min read

How to Add OG Tags in Remix for Social Sharing

In Remix, add Open Graph (OG) tags by returning a meta function from your route module that includes og:title, og:description, and other OG properties. Remix uses this meta export to inject tags into the HTML <head> for social sharing previews.

📐

Syntax

In Remix, you define a meta export function in your route file. This function returns an object where keys are meta tag names and values are their content. For OG tags, use keys like og:title, og:description, og:image, and og:url.

Remix automatically adds these tags inside the HTML <head> when rendering the page.

javascript

export const meta = () => ({
  'og:title': 'Page Title',
  'og:description': 'Description for social media',
  'og:image': 'https://example.com/image.png',
  'og:url': 'https://example.com/page'
});

💻

Example

This example shows a Remix route that sets OG tags for social sharing. The meta function returns the OG tags, and Remix injects them into the page's <head>.

javascript

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

export const meta = () => ({
  'og:title': 'Welcome to My Remix Site',
  'og:description': 'This is a simple Remix app with OG tags.',
  'og:image': 'https://remix.run/img/remix-og.png',
  'og:url': 'https://myremixsite.com'
});

export default function Index() {
  return (
    <main>
      <h1>Hello Remix!</h1>
      <p>Check the page source for OG meta tags.</p>
    </main>
  );
}

Output

⚠️

Common Pitfalls

Not using the meta export function in the route file means no OG tags get added.
Using incorrect meta tag keys like name instead of property for OG tags can cause social platforms to ignore them.
For dynamic pages, ensure meta returns tags based on loader data to keep OG tags relevant.

javascript

/* Wrong way: Using 'name' instead of 'property' for OG tags */
export const meta = () => ({
  'name': 'og:title', // Incorrect key
  'content': 'Wrong OG Title'
});

/* Right way: Use keys as OG properties */
export const meta = () => ({
  'og:title': 'Correct OG Title'
});

📊

Quick Reference

Meta Tag	Purpose	Example Value
og:title	Title shown on social previews	My Remix Page
og:description	Description shown on social previews	A cool Remix app
og:image	Image shown on social previews	https://example.com/image.png
og:url	URL of the page	https://example.com/page

✅

Key Takeaways

Use the meta export function in Remix route files to add OG tags.

Return an object with keys like og:title and og:description for social sharing.

Remix injects these tags into the HTML <head> automatically.

Ensure dynamic pages generate OG tags based on data for accurate previews.

Use correct OG property keys, not name, to avoid social media ignoring tags.