Sitemap

## 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 | Concept | Meaning | |---|---| | `sitemap.ts` | App Router metadata route for sitemap output. | | `url` | Absolute page URL. | | `lastModified` | Last content update time. | | `changeFrequency` | Crawl hint, not a guarantee. | | `priority` | Relative 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Listing private URLs | Sitemap feels like route inventory. | Include only indexable public pages. | | Using relative URLs | XML consumers expect absolute URLs. | Use full canonical URLs. | | Forgetting dynamic content | Static 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 | Feature | Browser Impact | Notes | |---|---|---| | XML sitemap | Crawler-facing | Browser can display XML. | | Dynamic generation | Server/framework feature | Returned at `/sitemap.xml`. | | Absolute URLs | Required by consumers | Use 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 | Need | Sitemap Field | |---|---| | Page URL | `url` | | Update date | `lastModified` | | Crawl hint | `changeFrequency` | | Relative importance | `priority` | | Dynamic URLs | Map 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.