Next.js
Get started with integrating Mosaic into your Next.js project.

Use the metadata export in your layout or page files

import { Metadata } from "next";

export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: "https://mosaicimg.com/use?url=yourwebsite.com/your_slug",
        width: 1200,
        height: 630,
        alt: "Open Graph Image",
      },
    ],
  },
};

For dynamic routes, use generateMetadata

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const slug = params.slug;

  return {
    title: `Post: ${slug}`,
    openGraph: {
      images: [
        {
          url: `https://mosaicimg.com/use?url=yourwebsite.com/${slug}`,
          width: 1200,
          height: 630,
          alt: `Open Graph Image for ${slug}`,
        },
      ],
    },
  };
}