KWAS Academy
Learn. Build. Master.
QUICK START:HTMLCSSJavaScriptTypeScriptPythonSQLReactNext.jsNode.jsDSASystem DesignDevOpsCybersecurityAI / ML
Advanced 18 min readModule: Module 9: Metadata, OpenGraph & Dynamic SEO

Dynamic Metadata & Dynamic Sitemaps (sitemap.ts)

Generate dynamic SEO titles, descriptions, OpenGraph social cards, and XML sitemaps programmatically.

What You Will Learn in This Lesson

  • Exporting static metadata objects in layout.tsx and page.tsx
  • Generating dynamic metadata based on URL parameters with generateMetadata()
  • Creating programmatic sitemap.ts and robots.ts for search indexing

Introduction & Core Concept

Next.js App Router features a unified Metadata API that replaces legacy Head tags with type-safe metadata definitions.
WHY DOES THIS MATTER IN THE REAL WORLD?

generateMetadata allows each course and lesson page to dynamically render customized titles and social share cards.

Dynamic generateMetadata API

typescript
typescript
1
2
3
4
5
6
7
8
9
10
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const course = await getCourse(params.slug);
  return {
    title: `${course.title} | KWAS Academy`,
    description: course.tagline,
    openGraph: {
      images: [`https://kwas.dev/api/og?title=${course.title}`],
    },
  };
}

Line-by-Line Technical Breakdown

1sitemap.ts exports an array of URL entries that Next.js automatically formats into XML.

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[TYPESCRIPT]
TYPESCRIPT SOURCE EDITOR
Interactive Live Code

Industry Best Practices & Professional Standards

  • Always define a metadataBase in root layout.tsx to resolve absolute OpenGraph image URLs.

Lesson Summary & Core Takeaways

  • The Metadata API delivers full search engine optimization and social preview integration.