SEO
Metadata API
Learn Next.js Metadata API for page titles, descriptions, canonical URLs, dynamic metadata, and SEO-safe Server Component usage.
## 1. Learning Objectives
By the end of this lesson, you will be able to define static metadata, generate dynamic metadata, add canonical URLs, and avoid using metadata exports in Client Components.
Difficulty: Beginner.
## 2. Prerequisites
- Server Components.
- Layouts and pages.
- Basic SEO tags.
## 3. Overview
The Metadata API lets App Router routes declare SEO and sharing metadata through `metadata` exports, `generateMetadata()`, and special metadata files. Next.js turns those declarations into `` tags.
## 4. Why This Topic Matters
Good metadata helps search engines, link previews, browser tabs, bookmarks, and social sharing. Next.js gives metadata a typed, route-aware structure instead of hand-editing `` manually.
## 5. Real-World Analogy
Metadata is a book's catalog card: title, summary, author, and cover image. The content is the book, but metadata helps people discover and recognize it.
## 6. Core Concepts
| Concept | Meaning |
|---|---|
| `metadata` | Static route metadata object. |
| `generateMetadata` | Async function for data-driven metadata. |
| Canonical URL | Preferred URL for duplicate or similar pages. |
| Open Graph | Social sharing metadata. |
| File metadata | Special files such as `opengraph-image` or `sitemap`. |
## 7. Syntax & API Reference
## 8. Visual Diagram
## 9. Live Example - Full Working Code
What just happened? The route generates metadata from the same slug used by the page.
## 10. Interactive Playground
Try this:
- Add static title and description to a route.
- Add canonical URLs.
- Generate metadata from route params.
## 11. Common Mistakes
| Mistake | Why It Happens | Correct Approach |
|---|---|---|
| Exporting metadata from a Client Component | Metadata runs server-side. | Keep metadata exports in Server Components. |
| Missing unique descriptions | Titles get priority, descriptions are forgotten. | Write route-specific descriptions. |
| Forgetting canonical URLs | Duplicate content is easy to create. | Add canonical alternates for indexable pages. |
## 12. Best Practices
- Use route-specific titles and descriptions.
- Use `generateMetadata` for dynamic content.
- Memoize shared data fetches used by metadata and page content.
- Define canonical URLs for public pages.
- Keep metadata accurate and human-readable.
## 13. Browser Compatibility
| Feature | Browser Impact | Notes |
|---|---|---|
| `