Problem

I'm building a monorepo that has both a Next.js App Router app and a Remix v2 app. I need to manage SEO meta tags (title, description, Open Graph, Twitter Card, robots directives like maxSnippet, maxImagePreview, canonical URL) across both apps.

Right now I'm maintaining two separate implementations:

Next.js (app/blog/[slug]/page.tsx):

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    robots: {
      index: true,
      follow: true,
    },
    openGraph: {
      images: [{ url: post.coverImage, width: 1200, height: 630 }],
    },
  };
}

Remix v2 (app/routes/blog.$slug.tsx):

export const meta: MetaFunction = ({ data }) => {
  return [
    { title: data.post.title },
    { name: 'description', content: data.post.excerpt },
    { name: 'robots', content: 'index, follow' },
    { property: 'og:image', content: data.post.coverImage },
  ];
};