Metadata API: Dynamic SEO, OpenGraph Tags & Sitemap Generation0%
Production Optimization, Dockerization & Vercel Cloud Deployment

Metadata API: Dynamic SEO, OpenGraph Tags & Sitemap Generation

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Metadata API: Dynamic SEO, OpenGraph Tags & Sitemap Generation

Search Engine Optimization (SEO) and social media link previews are vital for digital reach. Next.js 15 features the built-in Metadata API, allowing developers to define static or dynamic SEO tags, OpenGraph images, Twitter cards, and programmatic sitemaps directly through type-safe TypeScript interfaces.

1. Static Metadata

Define static metadata by exporting a metadata object from any layout.tsx or page.tsx:

TypeScript
// app/courses/page.tsx
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
title: 'Full-Stack & Data Analytics Courses | MSK Institute',
description: 'Explore comprehensive certification programs in web development, Python, and AI.',
keywords: ['full-stack web development', 'react', 'next.js', 'mongodb', 'python'],
openGraph: {
title: 'Master Modern Tech with MSK Institute',
description: 'Job-ready curriculum taught by industry leaders.',
url: 'https://mskinstitute.com/courses',
siteName: 'MSK Institute',
images: [
{
url: 'https://mskinstitute.com/images/og/courses-banner.jpg',
width: 1200,
height: 630,
alt: 'MSK Institute Courses'
}
],
locale: 'en_IN',
type: 'website'
},
twitter: {
card: 'summary_large_image',
site: '@mskinstitute'
}
};

2. Dynamic Metadata with generateMetadata()

For dynamic pages (e.g., /courses/[slug]), metadata depends on database content. Export an async generateMetadata() function:

TypeScript
// app/courses/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';
import { getCourseBySlug } from '@/lib/courses';
 
interface Props {
params: Promise<{ slug: string }>;
}
 
export async function generateMetadata(
{ params }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const { slug } = await params;
const course = await getCourseBySlug(slug);
 
if (!course) {
return { title: 'Course Not Found | MSK Institute' };
}
 
return {
title: `${course.title} | MSK Institute`,
description: course.shortDescription,
openGraph: {
title: course.title,
description: course.shortDescription,
images: [course.featuredImageUrl || '/images/default-course-og.jpg']
}
};
}

3. Programmatic Sitemaps: sitemap.ts

Search engines discover your entire content catalog through a sitemap.xml. Create app/sitemap.ts to generate dynamic sitemaps automatically:

TypeScript
// app/sitemap.ts
import { MetadataRoute } from 'next';
import { getAllCourses } from '@/lib/courses';
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const baseUrl = 'https://mskinstitute.com';
const courses = await getAllCourses();
 
const courseEntries: MetadataRoute.Sitemap = courses.map(course => ({
url: `${baseUrl}/courses/${course.slug}`,
lastModified: new Date(course.updatedAt || Date.now()),
changeFrequency: 'weekly',
priority: 0.8
}));
 
return [
{
url: baseUrl,
lastModified: new Date(),
changeFrequency: 'daily',
priority: 1.0
},
{
url: `${baseUrl}/courses`,
lastModified: new Date(),
changeFrequency: 'daily',
priority: 0.9
},
...courseEntries
];
}

Next.js automatically serves this at /sitemap.xml!

Interactive Quiz

Multiple Choice Questions

Question 1
Which function is used to generate dynamic SEO metadata based on database content for dynamic route segments?
Question 2
What is the standard recommended aspect ratio and resolution for OpenGraph preview images?
Question 3
What file convention in the app/ directory automatically generates a standardized sitemap.xml for search engines?
Question 4
How does Next.js handle metadata declared in a parent layout.tsx versus a child page.tsx?
Question 5
Why should you avoid fetching the same database record twice if both generateMetadata() and the page component need it?
Next Lesson

Production Optimization, Dockerization & Vercel Cloud Deployment

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Authentication with NextAuth / Auth.js & JWT Session ManagementProduction Optimization, Dockerization & Vercel Cloud Deployment

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext