Metadata API & SEO in App Router
Export static and dynamic metadata objects to set page titles, descriptions, and OG tags.
Why Metadata Matters
Good metadata (title, description, OG tags) improves SEO rankings and social share previews. Next.js App Router provides a type-safe Metadata API that generates <head> tags server-side.
Static Metadata Export
Export a metadata object from any page.tsx or layout.tsx to set static tags for that segment.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'My App',
description: 'The best app ever built',
keywords: ['react', 'nextjs', 'typescript'],
};
export default function Page() { return <main>Hello</main>; }All lessons in this course
- App Router File Conventions
- Server vs Client Components in Next.js
- Dynamic Routes & Route Groups
- Metadata API & SEO in App Router