ReviseAlgo Logo

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

    ConceptMeaning
    metadataStatic route metadata object.
    generateMetadataAsync function for data-driven metadata.
    Canonical URLPreferred URL for duplicate or similar pages.
    Open GraphSocial sharing metadata.
    File metadataSpecial 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

    MistakeWhy It HappensCorrect Approach
    Exporting metadata from a Client ComponentMetadata runs server-side.Keep metadata exports in Server Components.
    Missing unique descriptionsTitles get priority, descriptions are forgotten.Write route-specific descriptions.
    Forgetting canonical URLsDuplicate 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

    FeatureBrowser ImpactNotes