Beautiful Open Graph ImagesGenerated on Demand

// app/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to our amazing site.',
  alternates: {
    canonical: `https://yoursite.com/`,
  },
  openGraph: {
    title: 'Home',
    description: 'Welcome to our amazing site.',
    url: `https://yoursite.com/`,
    images: [{ url: `https://readmecodegen.vercel.app/api/og-generator?title=Home` }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Home',
    description: 'Welcome to our amazing site.',
    images: [`https://readmecodegen.vercel.app/api/og-generator?title=Home`],
  }
};

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

async function getPost(slug: string) {
  const res = await fetch(`https://api.yoursite.com/posts/${slug}`);
  if (!res.ok) throw new Error('Failed to fetch post');
  return res.json();
}

function getDynamicOgUrl(title: string, author?: string) {
  const params = new URLSearchParams({ 
    title,
    template: 'article',
    ...(author && { author })
  });
  return `https://readmecodegen.vercel.app/api/og-generator?${params.toString()}`;
}

export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const post = await getPost(params.slug);
  const ogImageUrl = getDynamicOgUrl(post.title, post.author);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://yoursite.com/blog/${params.slug}`,
      images: [{ url: ogImageUrl }],
      type: 'article',
      authors: [post.author],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [ogImageUrl],
    },
  };
}