Keep image generation out of the page request
Next.js can publish the correct Open Graph and X/Twitter tags from static metadata or generateMetadata. Mosaicora provides the image-generation layer, so each route can reference a page-specific hosted asset without rendering the image inside your application.
Works with App Router metadata
Use the standard openGraph and twitter fields already supported by Next.js routes.
Supports dynamic routes
Resolve a different hosted image URL for products, articles, profiles, or other route parameters.
Keeps templates reusable
Separate visual design from route code while retaining page-specific titles and imagery.
Connect a Next.js route
Step 1
Resolve the page data
Load the title, description, canonical URL, and Mosaicora image URL.
Step 2
Return route metadata
Set openGraph.images and twitter.images from the same hosted asset.
Step 3
Verify the rendered tags
Inspect the deployed page and check the preview before sharing it publicly.
App Router metadata example
export async function generateMetadata({ params }) {
const page = await getPage((await params).slug)
return {
title: page.title,
description: page.description,
openGraph: {
images: [{ url: page.mosaicoraImageUrl, width: 1200, height: 630 }],
},
twitter: {
card: "summary_large_image",
images: [page.mosaicoraImageUrl],
},
}
}