Next js metadata not working?

"use client";

export const metadata = {
  title: "My Blog",
};

page.tsx (Server Component)
 ├── export metadata / generateMetadata()
 └── <BlogTemplate /> (Client Component)

// app/blog/page.tsx

export const metadata = {
  title: "Blog",
  openGraph: {
    images: [{ url: "/og-image.jpg" }],
  },
};

// app/blog/[slug]/page.tsx

export async function generateMetadata({ params }) {
  const post = await getBlogPost(params.slug);

  return {
    title: post.title,
    openGraph: {
      images: [{ url: post.featured_image }],
    },
  };
}

<meta property="og:image" content="https://..." />