Next.jsBeginner

Metadata ও SEO

metadata export, generateMetadata, Open Graph — Next.js-এ SEO ও metadata বাংলায়।

10টি অংশবাংলা ভাষায়

Metadata হলো page সম্পর্কে browser ও search engine-এর জন্য info — title, description, Open Graph image ইত্যাদি। Next.js-এ Metadata API দিয়ে সহজেই দেওয়া হয়।

Static Metadata

app/layout.tsx (root)tsx

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "My Blog",
    template: "%s | My Blog",
  },
  description: "A blog built with Next.js",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="bn">
      <body>{children}</body>
    </html>
  );
}

Page-Like Metadata

app/about/page.tsxtsx

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About",
  description: "আমাদের সম্পর্কে",
};

export default function Page() {
  return <h1>About</h1>;
}

generateMetadata (Dynamic)

app/blog/[slug]/page.tsxtsx

tsx

import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
    },
  };
}

Common Metadata Fields

Field	কাজ
title	ব্রাউজার tab ও SERP-এ শিরোনাম
description	SERP-এ সংক্ষিপ্ত বিবরণ
openGraph	Social media share preview
keywords	SEO keywords
robots	index/noindex নিয়ন্ত্রণ
alternates	Canonical URL

Metadata Files

sitemap.ts ও robots.ts ফাইল দিয়েও automatic SEO ফাইল তৈরি হয়। আর opengraph-image.png দিয়ে social preview image।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।