Adding Metadata & generateMetadata

In a Server Component layout or page, export a metadata object. Next.js turns it into <title>, <meta>, and Open Graph tags in the document head.

export const metadata

In a Server Component layout or page, export a metadata object. Next.js turns it into <title>, <meta>, and Open Graph tags in the document head.

Static metadata is perfect when the title never depends on URL params.

Real-life example: Static metadata is the printed cover of a textbook — same title for every copy of that edition.

app/blog/page.tsx — static metadata

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Blog | Rishtaara",
  description: "Practical web development lessons and guides.",
  openGraph: {
    title: "Rishtaara Blog",
    description: "Learn Next.js with real-life examples.",
    type: "website",
  },
};

export default function BlogPage() {
  return <h1>Blog</h1>;
}

generateMetadata()

When the title depends on a slug or id, export async function generateMetadata. It receives the same params as the page.

Real-life example: generateMetadata is printing a name badge for each guest — the template is fixed, the name changes per person.

Tip: Set a default title template in the root layout: title: { default: 'Rishtaara', template: '%s | Rishtaara' }.

Dynamic metadata for a course page

import type { Metadata } from "next";

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const course = await getCourse(slug); // your DB/fetch helper

  if (!course) {
    return { title: "Course not found" };
  }

  return {
    title: `${course.title} | Rishtaara`,
    description: course.excerpt,
    openGraph: {
      title: course.title,
      description: course.excerpt,
      images: [{ url: course.coverImage }],
    },
  };
}

export default async function CoursePage({ params }: Props) {
  const { slug } = await params;
  const course = await getCourse(slug);
  return <article><h1>{course?.title}</h1></article>;
}

generateImageMetadata & Open Graph

generateImageMetadata helps when one route serves multiple images (for example OG variants). For most apps, openGraph.images in metadata is enough.

Open Graph tags control how links look when shared on WhatsApp, LinkedIn, or Twitter/X.

Real-life example: Open Graph is the shop window photo — people share the link, and the preview image sells the click.

Open Graph essentials

export const metadata: Metadata = {
  metadataBase: new URL("https://rishtaara.com"),
  title: "Next.js Course",
  openGraph: {
    title: "Next.js: Zero to Full-Stack",
    description: "App Router, Auth.js, SEO, and deploy.",
    url: "https://rishtaara.com/learn/web-development/nextjs-advanced-patterns",
    siteName: "Rishtaara",
    images: [{ url: "/og/nextjs-course.png", width: 1200, height: 630 }],
    locale: "en_IN",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Next.js: Zero to Full-Stack",
    images: ["/og/nextjs-course.png"],
  },
};