ReviseAlgo Logo

SEO

Sitemap

Learn how to generate static and dynamic sitemaps in Next.js so search engines can discover important public routes.

1. Learning Objectives

By the end of this lesson, you will be able to create sitemap.ts, list static and dynamic URLs, include last modified dates, and avoid leaking private routes.

Difficulty: Beginner.

2. Prerequisites

  • File routing.
  • Public vs private route distinction.
  • Metadata file conventions.

    • 3. Overview

    A sitemap is an XML document that lists important URLs for crawlers. In Next.js App Router, you can generate it with an app/sitemap.ts metadata route.

    4. Why This Topic Matters

    Search engines can discover links naturally, but sitemaps help large sites, fresh content, and deeply nested pages become easier to crawl.

    5. Real-World Analogy

    A sitemap is a building directory in the lobby. Visitors may find rooms by walking around, but a directory tells them what matters and where to go.

    6. Core Concepts

    ConceptMeaning
    sitemap.tsApp Router metadata route for sitemap output.
    urlAbsolute page URL.
    lastModifiedLast content update time.
    changeFrequencyCrawl hint, not a guarantee.
    priorityRelative importance hint.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Static and dynamic URLs are combined into one sitemap.

    10. Interactive Playground

    Try this:

  • Add app/sitemap.ts.
  • Include your homepage and blog routes.
  • Visit /sitemap.xml.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Listing private URLsSitemap feels like route inventory.Include only indexable public pages.
    Using relative URLsXML consumers expect absolute URLs.Use full canonical URLs.
    Forgetting dynamic contentStatic pages are easier to list.Pull public slugs from CMS/data source.

    12. Best Practices

  • Include canonical public URLs only.
  • Keep lastModified accurate.
  • Split very large sitemaps when needed.
  • Do not include dashboard, account, or admin URLs.
  • Keep sitemap generation fast and reliable.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    XML sitemapCrawler-facingBrowser can display XML.
    Dynamic generationServer/framework featureReturned at /sitemap.xml.
    Absolute URLsRequired by consumersUse production origin.

    14. Interview Questions

    Easy: What file creates a sitemap in App Router?

    Answer: app/sitemap.ts.

    Medium: Should private dashboard routes appear in a sitemap?

    Answer: No.

    Hard: How do you handle millions of URLs?

    Answer: Generate multiple sitemaps or sitemap indexes and keep generation partitioned and cache-friendly.

    15. Debugging Exercise

    Bug report: "Search Console says sitemap URLs are invalid."

    Solution

    Check that URLs are absolute, canonical, publicly accessible, and return successful indexable responses.

    16. Practice Exercises

  • Easy: Add homepage to sitemap.
  • Medium: Add blog posts from data.
  • Hard: Generate separate sitemap groups for products and docs.

    • 17. Scenario-Based Challenge

    A course site has public lessons and private progress pages. What belongs in the sitemap?

    Walkthrough

    Include public course and lesson URLs. Exclude private progress, account, billing, and admin pages.

    18. Quick Quiz

    1. Sitemap file name? Answer: sitemap.ts. 2. Output URL? Answer: /sitemap.xml. 3. Should URLs be absolute? Answer: Yes. 4. Are sitemap priorities guarantees? Answer: No. 5. Should private pages be listed? Answer: No.

    19. Summary & Key Takeaways

  • Sitemaps help crawlers discover public URLs.
  • Next.js supports app/sitemap.ts.
  • Use absolute canonical URLs.
  • Include dynamic public content.
  • Exclude private and non-indexable routes.

    • 20. Cheat Sheet

    NeedSitemap Field
    Page URLurl
    Update datelastModified
    Crawl hintchangeFrequency
    Relative importancepriority
    Dynamic URLsMap over data source

    21. Further Reading

  • Next.js Docs: sitemap.xml.
  • Google Search Central: Build and submit a sitemap.
  • sitemaps.org protocol.

    • 22. Next Lesson Preview

    Next, you will learn robots.txt, which tells crawlers what they may crawl.