🚀 Your SEO Tool Is Lying to You (If You Ship React, Next.js, or TanStack)

#seo #ai #webdev #productivity

I kept hitting the same wall building client sites for Sohnics: every "SEO audit" tool I ran told me my pages were fine green checkmarks across the board and then a client's WhatsApp link preview would show up blank, or Google Search Console would quietly flag a page as "Discovered not indexed" with zero explanation.

The problem wasn't my code. It was the auditing tools. They were built for static HTML, and they were reading my JavaScript rendered apps completely wrong.

So I built Sohnics SEO Crawler 🔍 a framework aware technical SEO engine for React, Next.js, and TanStack apps. It's 100% free, there's no paywall, and it exists because generic crawlers genuinely cannot see what your app is doing.

⚙️ The core problem: two different internets

Here's the thing most SEO tools gloss over your site doesn't look the same to every visitor.

Social bots (Facebook, X/Twitter, LinkedIn, WhatsApp) and a chunk of search indexers never run JavaScript. They read your raw server HTML and nothing else. Meanwhile, a real browser hydrates your app, runs your client side code, and injects metadata after the fact.

If your OpenGraph tags get set client-side (extremely common in Next.js and React apps), here's what Twitterbot actually sees:

<title>My Next.js App</title>
<!-- Missing og:image — it was injected client-side -->
<div id="root"></div>

A generic crawler won't catch this, because it either skips JS entirely or renders it and only checks the final DOM. You end up with broken link previews and indexation issues that silently tank your reach and no tool tells you why.

🛠️ How Sohnics SEO Crawler actually works

Instead of a single pass, it runs two, and diffs them:

Pass 1 — Raw HTTP Crawler 📡 — fetches your page exactly like Googlebot's first pass or a social bot would, with zero JS execution.
Pass 2 — Headless Browser DOM (Playwright) 🧪 — loads your page in real Chromium, waits for hydration, listens to console errors, and captures what actually ends up in the DOM.

Comparing the two is where the real bugs surface hydration mismatches, client injected meta tags, DOM drift, and silent console errors that never show up in a normal audit.

🔎 What it actually catches

Hydration Mismatch Engine — invalid HTML nesting (<p><div>), non-deterministic renders (Date.now(), Math.random()), browser-extension attribute pollution — the stuff that throws React error codes #418 and #425 and quietly degrades UX.
Dynamic OpenGraph Previews — flags any OG/Twitter tag that only exists after client-side JS runs, and renders a live preview card from the raw HTML, so you see exactly what Facebook, X, and LinkedIn actually see.
Indexation Blocker Shield — robots.txt rules per user-agent, client-injected noindex, canonical mismatches between server and client, redirect loops, soft 404s.
Framework Intelligence — tells Next.js App Router (RSC payloads) apart from Pages Router, Vite SPAs, and TanStack Start/Router, and tailors recommendations accordingly instead of giving generic advice that doesn't apply.
Console Error Listener — captures runtime exceptions and failed network requests during page load, not just after the fact.

Every detector returns a plain-English explanation plus a copy-paste fix — not just a red ❌.

💡 Why not just use Screaming Frog, Ahrefs, or Search Console?

Those are good tools — genuinely, I still use Search Console myself. But none of them are built around a simple fact: modern frameworks render differently depending on who's asking. A generic crawler either skips JS entirely (missing client-injected content) or treats the final DOM as ground truth (missing what bots and social crawlers actually receive). Neither approach surfaces the mismatch itself — which is usually where the real bug lives.

And the practical stuff matters too:

✅ 100% free — no trial, no credit card, no feature wall.
✅ No signup friction — paste a URL, scan it, get your report.
✅ Embeddable SVG score badge for your README or site footer.
✅ A polite, documented bot — SohnicsSEOBot/1.0 respects robots.txt, caps concurrency at 2 requests/host, and has a one-click opt-out at /bot.

👉 Try it

If you've ever shipped a Next.js or React app and had a social preview come back blank, or watched Search Console flag pages for no obvious reason — run a scan and see what the raw pass actually looks like. It usually explains itself fast.

sohnicsseocrawler.sohnics.tech

Built and maintained by the engineering team at Sohnics. If you hit an edge case it doesn't catch, I'd genuinely like to hear about it in the comments 💬 — this is the kind of tool that gets better from real framework configs in the wild, not from a roadmap doc.

DEV Community