The Next.js Anomaly That Almost Killed My SEO
01The Setup
I spent two days fighting Facebook's crawler. Not because my code was broken, but because I misunderstood how Next.js renders pages. I had built a beautiful blog with perfect meta tags using next/head. I tested everything locally using React DevTools. The og:image was there. The title was there. The description was there. I was confident. So I deployed.
02The Failure
Then came the gut punch. I shared my blog post on Facebook. Nothing. No image. No title. Just a dead, blank link staring back at me. I ran to the Facebook Sharing Debugger. 'Inferred Property.' 'Missing og:image.' I couldn't believe it. The meta tags were RIGHT THERE in my code. I used getServerSideProps. I passed the data correctly. I added fallbacks. I tried every trick in the book. But Facebook kept shoving my homepage image down the crawler's throat instead of my dynamic OG image. Deployment after deployment. Nothing changed. That's when the doubt crept in. Maybe I was too old for this. Maybe the machine had finally won. But I wasn't ready to raise the white flag. I can still stand against the machine. I just needed to figure out how.
03The Discovery
My tandem partner kept saying, 'Bro, it's gonna work, just push it.' So I pushed. And pushed. And pushed again. Hundred of deployments. Same result. Nothing. We tried every combination of meta tags, every header trick, every fallback. Still nothing. The crawler refused to see our tags. We were stuck in deployment hell. Then, at 4 AM, while staring at the screen with bloodshot eyes, I finally saw it. The rooster crowed outside my window. And in that moment, I realized the truth: I was using 'use client' at the top of my page. Facebook's crawler doesn't execute JavaScript. It only reads the initial HTML response. All those beautiful meta tags? They only appeared after React hydrated. The crawler saw an empty shell. No og:image. No og:title. Nothing.
04The Lesson
The fix was simple but painful. I removed 'use client', moved my meta tags into getServerSideProps, and used Next.js's native Head component from next/head. The moment I deployed, Facebook finally saw the correct image. The lesson is brutal but essential: Always check your actual page source (Ctrl+U), not just the Elements tab. If your meta tags aren't in the initial HTML, crawlers will never see them. Server Components for SEO. Client Components for interactivity. Don't learn this the hard way like I did. And if your tandem says 'it's gonna work' for the hundredth time? Maybe listen to the rooster instead.