Dynamic routes use generateMetadata for OG tags

A static metadata export on a dynamic route ([slug], [id], [username]) applies identical OG tags to every instance of that route. Every blog post shares the same title, every product page shows the same description, and every user profile presents the same image in social previews. Per ogp.me, og tags are the mechanism social platforms use to generate link preview cards; when all instances of a dynamic route return the same tags, the platform cannot differentiate between content pieces. This is the most common and highest-impact social sharing gap in AI-built projects: content that was individually created gets collectively presented as one undifferentiated link, eliminating per-content shareability entirely.

Replace static metadata exports on dynamic routes with generateMetadata functions that fetch the specific item and build OG tags from its data:

// app/blog/[slug]/page.tsx
// WRONG:
export const metadata: Metadata = { openGraph: { title: 'My Blog' } }

// RIGHT:
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPostBySlug(params.slug)
  if (!post) return { title: 'Not Found' }
  return {
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImageUrl ?? '/og-default.png', width: 1200, height: 630 }],
      url: `https://yoursite.com/blog/${params.slug}`,
    },
  }
}

Apply this pattern to every [param] route directory in app/ that renders public-facing content.