Curated comparison
Next.js metadata vs client-only document.title
Why App Router generateMetadata wins over hydration-time title swaps for crawlability and SERP quality.
The comparison
| Approach | Crawler sees title? | Hydration risk | Maintenance |
| --- | --- | --- | --- |
| `generateMetadata` / `metadata` export | Yes — in initial HTML | None for head tags | Per-route server functions |
| `useEffect(() => { document.title = … })` | Often no | Extra client work | Easy to drift from H1 |
Takeaway
Treat missing server metadata as a Money Gap™ on money pages. Fix Paths™ start with View Source — not the post-hydrate DOM. Impact of CTR lifts should be labeled an **AI Estimate**, not guaranteed ROI.
Try it
Run `npx moneygap-scan https://yoursite.com` or publish a snapshot to [Open Audits](/labs). Read the deep dive: [Next.js metadata guide](/guides/nextjs/metadata).