← Back to Home
Next.js & Frontend Engineering

Production SEO: Mastering Next.js Metadata API for Dynamic Routes

By Md. Abdullah (Ahyan) • Published: June 2026

Next.js এর ট্র্যাডিশনাল Pages আর্কিটেকচারে <Head> ট্যাগের ভেতর মেটা ট্যাগ ডিক্লেয়ার করা হতো। তবে আধুনিক **App Router** মডেলে এসইও অপ্টিমাইজেশন বুস্ট করার জন্য অফিসিয়াল বিল্ট-ইন **Metadata API** আনা হয়েছে। এটি টাইটেল, ডেসক্রিপশন বা ওজি ইমেজ কনফিগার করা সহজ করার পাশাপাশি ক্লায়েন্ট-সাইড মেমোরি ফাঁকা রেখে সার্ভার লেভেলেই এসইও কম্পাইল সম্পন্ন করে।

এই ব্লগে আমরা দেখবো কীভাবে স্ট্যাটিক ও ডাইনামিক রাউটের (যেমন- ব্লগ বা প্রোডাক্ট পেজ) জন্য রিয়েল-টাইম এসইও ডেটা ইনজেক্ট করতে হয়।

১. স্ট্যাটিক মেটাডেটা অবজেক্ট (Static Layouts)

যে পেজগুলোর টাইটেল ফিক্সড বা অপরিবর্তনশীল, সেগুলোর জন্য পেজের ফাইল বা layout.js-এ নিচের অবজেক্টটি এক্সপোর্ট করতে হবে:

// app/page.js অথবা app/about/page.js
export const metadata = {
  title: 'Home | Ahyan Creations LTD',
  description: 'Premium Digital Solutions Provider and Open-Source Labs.',
  openGraph: {
    title: 'Ahyan Creations Studio',
    description: 'Scaling infrastructures with cutting edge software.',
    images: [{ url: 'https://ahyancreations.top/og-core.png' }],
  },
};

export default function Page() {
  return <h1>Welcome to Enterprise Dashboard</h1>;
}

ধাপ ২: ডায়নামিক মেটাডেটা জেনারেশন (`generateMetadata`)

ব্লগ পেজের ক্ষেত্রে যেখানে আইডি বা স্লাগ (Slug) অনুযায়ী ডাটাবেজ থেকে ডেটা তুলে মেটা ট্যাগ বসাতে হয়, সেখানে generateMetadata ফাংশন ব্যবহার করতে হবে:

// app/posts/[slug]/page.js

// এই ফাংশনটি স্বয়ংক্রিয়ভাবে নেক্সট ডট জেএস কল করবে
export async function generateMetadata({ params }) {
  const currentSlug = params.slug;

  // ডাটাবেজ বা এপিআই থেকে কন্টেন্ট নিয়ে আসা (সিমুলেটেড)
  const postData = await fetch(`https://api.ahyancreations.top/posts/${currentSlug}`).then((res) => res.json());

  return {
    title: `${postData.title} | Technical Center`,
    description: postData.excerpt,
    openGraph: {
      title: postData.title,
      description: postData.excerpt,
      images: [{ url: postData.featuredImage }],
    },
  };
}

export default function BlogPost({ params }) {
  return <main>Dynamic Content Render Container</main>;
}

সার্ভার অপ্টিমাইজেশন টিপস: আপনি যদি একই এপিআই রিকোয়েস্ট generateMetadata ফাংশনের ভেতর এবং মেইন কম্পোনেন্ট BlogPost এর ভেতরও কল করেন, তবুও কোনো পারফরম্যান্স লস হবে না। Next.js তার বিল্ট-ইন Fetch Data Cache Deduplication মেকানিজমের মাধ্যমে ব্যাকএন্ডে মাত্র একবারই নেটওয়ার্ক রিকোয়েস্ট ফায়ার করবে।