Next js metadata not working?

•
Post Date:19 Feb 2026 - 05:42 AM

Next.js App Router-এ Metadata কেন শুধু Server Component-এ কাজ করে?


আমি যখন প্রথম Next.js App Router-এ একটা blog project বানাচ্ছিলাম, তখন একটা অদ্ভুত সমস্যা দেখলাম—
✅ Facebook-এ link share করলে thumbnail আসছে না ✅ Title/Description ঠিক মতো show হচ্ছে না
খুঁজতে গিয়ে বুঝলাম—আমি metadata set করেছিলাম Client Component-এ। আর App Router-এ এটা কাজ করে না।
আজকে এই concept টা একবারে clear করে দেই।


Server Component vs Client Component — Metadata কোথায় কাজ করে?


Server Component → ✅ Metadata কাজ করে Client Component → ❌ Metadata কাজ করে না
Next.js App Router-এ page.tsx এবং layout.tsx ডিফল্টভাবে Server Component।
যখন কোনো page-এ request আসে, Next.js মোটামুটি এই flow follow করে:
  1. Server Component run হয়
  1. metadata বা generateMetadata() execute হয়
  1. HTML + <head> tag তৈরি হয়
  1. এরপর Client-side bundle attach হয়
👉 এই সময় Client Component এখনো browser-এ run শুরুই করেনি। তাই Client Component থেকে metadata generate করা সম্ভব না।


"use client" থাকলে metadata কেন কাজ করে না?


ধরো তুমি এমন করলা—
"use client";

export const metadata = {
  title: "My Blog",
};
এটা কাজ করবে না, কারণ:
  • Client Component browser-এ run করে
  • কিন্তু metadata server-side এ <head>-এ inject হয়
  • Browser-side component দিয়ে Next.js <head> build করে না
✅ Next.js metadata system আসলে “server-first”।


সঠিক Architecture কেমন হওয়া উচিত?

❌ ভুল পদ্ধতি

  • page.tsx → "use client"
  • metadata export
  • → কাজ করবে না

✅ সঠিক পদ্ধতি

page.tsx (Server Component)
 ├── export metadata / generateMetadata()
 └── <BlogTemplate /> (Client Component)
Server Component handle করবে:
  • SEO
  • metadata
  • Open Graph / Twitter card
Client Component handle করবে:
  • useState
  • useEffect
  • event handlers
  • UI interactions


Static Metadata (Blog List Page)



// app/blog/page.tsx

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


Dynamic Metadata (Blog Detail Page)


// 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 }],
    },
  };
}
✅ এখানে HTML তৈরি হওয়ার আগেই metadata ready থাকে। ফলে Facebook/LinkedIn crawler scrape করলে সঠিক thumbnail পায়।


SEO-এর জন্য কেন এটা জরুরি?


Google, Facebook, LinkedIn crawler সাধারণত:
  • JavaScript execute করে না (বা পুরোপুরি করে না)
  • শুধু initial HTML পড়ে
তাই:
  • Open Graph image
  • title
  • description
  • Twitter Card metadata
সবকিছু server-rendered HTML-এ থাকা লাগবে।

Verify করতে চাইলে

Browser → Right click → View Page Source
তারপর খুঁজে দেখো:
<meta property="og:image" content="https://..." />
👉 এটা server থেকেই inject হয়েছে।

Server Component = Architect Building-এর structure বানায় (HTML + Head)
Client Component = Interior Designer UI সাজায় + interactivity দেয়
Architect ছাড়া building দাঁড়াবে না। Designer ছাড়া building usable হবে না।

✅ Metadata অবশ্যই Server Component-এ set করতে হবে ❌ Client Component metadata support করে না ✅ SEO + OG + Twitter Card = server-side ✅ Static page → export const metadata ✅ Dynamic page → generateMetadata()