I launched a Next.js project, waited three weeks for Google traffic, and got nothing. Not "slow growth" nothing completely invisible nothing. The Search Console showed Googlebot visiting but not indexing. The culprit? I had metadata in the wrong place, and my <title> tag was rendering client-side, after Googlebot had already moved on.
If you're building with Next.js (App Router or Pages Router), this article will walk you through setting meta tags correctly including dynamic tags per page, Open Graph for social sharing, and canonical URLs. No fluff, just working code.
Why Next.js Meta Tags Break More Than You'd Expect
The core problem is rendering timing. In a traditional React SPA, everything renders in the browser which means Googlebot often crawls your page before JavaScript runs, sees a blank <head>, and either defers indexing or skips it.
Next.js solves this with server-side rendering, but only if you use the right APIs. A lot of developers (myself included, initially) reach for react-helmet or manually insert <head> tags in components. That works on the client but not reliably during SSR.
