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.