Problem Statement
How do you manage metadata and SEO in Next.js Pages Router vs App Router?
Explanation
In Pages Router, you use the Head component from next/head to add meta tags, title, and other head elements per page, and you can use it in multiple components where the last rendered value takes precedence. In App Router, you export a metadata object or generateMetadata function from page.js or layout.js files, which provides type-safe metadata that Next.js automatically merges and optimizes. App Router's approach is more powerful with support for dynamic metadata, automatic Open Graph and Twitter card generation, and better type safety, while Pages Router's Head component is simpler but requires manual management. Both approaches ensure proper SEO with customizable title, description, keywords, Open Graph tags, canonical URLs, and structured data.