← Help

Remix

Get started with integrating Mosaic into your Remix project.

Step 1

If you want to add OG metadata to all pages in your Remix app, you can create a root layout file (`app/root.tsx`) and define a `meta` export there:

import type { MetaFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export const meta: MetaFunction = () => {
  return [
    { charset: "utf-8" },
    { viewport: "width=device-width,initial-scale=1" },
    { title: "Your App Name" },
    { name: "description", content: "Your app description" },
    { property: "og:title", content: "Your App Name" },
    { property: "og:description", content: "Your app description" },
    { property: "og:image", content: "https://mosaicimg.com/use?url=yourwebsite.com" },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary_large_image" },
  ];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Step 2

To add OG metadata to a specific route (e.g., `app/routes/your-page.tsx`), export a `meta` function that returns an array of meta objects.

import type { MetaFunction, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

type LoaderData = {
  title: string;
  description: string;
  imageUrl: string;
};

export const loader: LoaderFunction = async () => {
  // You can fetch data here if needed
  return {
    title: "Your Page Title",
    description: "Your page description",
    imageUrl: `https://mosaicimg.com/use?url=yourwebsite.com/your_slug`,
  };
};

export const meta: MetaFunction = ({ data }) => {
  const { title, description, imageUrl } = data as LoaderData;
  return [
    { title: title },
    { name: "description", content: description },
    { property: "og:title", content: title },
    { property: "og:description", content: description },
    { property: "og:image", content: imageUrl },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: title },
    { name: "twitter:description", content: description },
    { name: "twitter:image", content: imageUrl },
  ];
};

export default function YourPage() {
  const { title, description } = useLoaderData<LoaderData>();

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      {/* Rest of your page content */}
    </div>
  );
}

Step 3

Remember to replace the placeholder value (like 'yourwebsite.com' and 'your_slug') with your actual website URL and slug.