React, Next.js 또는 TanStack을 사용하는 경우, 당신의 SEO 도구는 거짓말하고 있습니다

저는 Sohnics 클라이언트 사이트를 구축하면서 계속 같은 벽에 부딪혔습니다. 제가 실행하는 모든 "SEO 감사" 도구들은 제 페이지들이 전반적으로 괜찮다고 녹색 체크 표시를 보여주었고, 그러다가 고객의 WhatsApp 링크 미리보기가 비어 있거나, Google Search Console에서 아무 설명 없이 조용히 페이지를 _"Discovered not indexed"_로 플래그 지정하는 일이 있었습니다.

문제는 제 코드가 아니었습니다. 감사 도구들이 문제였습니다. 그들은 정적 HTML을 위해 만들어졌고, 제가 JavaScript로 렌더링한 앱들을 완전히 잘못 읽고 있었던 것입니다.

그래서 저는 React, Next.js 및 TanStack 앱을 위한 프레임워크 인식 기술 SEO 엔진인 Sohnics SEO Crawler 🔍를 만들었습니다. 이것은 100% 무료이며, 결제 장벽이 없고, 일반적인 크롤러들이 실제로 앱이 무엇을 하고 있는지 볼 수 없기 때문에 존재합니다.

⚙️ 핵심 문제: 두 개의 다른 인터넷

대부분의 SEO 도구들이 간과하는 것이 있습니다. 당신의 사이트는 모든 방문자에게 똑같이 보이지 않습니다.

소셜 봇(Facebook, X/Twitter, LinkedIn, WhatsApp)과 상당수의 검색 인덱서는 JavaScript를 실행하지 않습니다. 그들은 당신의 원시 서버 HTML만을 읽고 그 외에는 아무것도 읽지 못합니다. 한편, 실제 브라우저는 앱을 하이드레이션(hydrate)하고, 클라이언트 측 코드를 실행하며, 사후에 메타데이터를 주입합니다.

만약 OpenGraph 태그가 클라이언트 측에서 설정된다면 (Next.js 및 React 앱에서 매우 흔함), Twitterbot이 실제로 보는 것은 다음과 같습니다:

<title>My Next.js App</title>
<!-- og:image 누락 — 클라이언트 측에 주입됨 -->
<div id="root"></div>

일반적인 크롤러는 이것을 포착하지 못합니다. 왜냐하면 JS를 완전히 건너뛰거나, 렌더링하더라도 최종 DOM만 확인하기 때문입니다. 그 결과 깨진 링크 미리보기와 인덱싱 문제가 발생하며, 이는 당신의 도달 범위를 조용히 떨어뜨리지만 어떤 도구도 이유를 알려주지 않습니다.

🛠️ Sohnics SEO Crawler가 실제로 작동하는 방식

단일 패스 대신, 두 개의 패스를 실행하고 그 차이점(diff)을 비교합니다:

• Pass 1 — Raw HTTP Crawler 📡 — Googlebot의 첫 번째 패스나 소셜 봇이 접근하는 방식 그대로, JavaScript 실행 없이 페이지를 가져옵니다.
• Pass 2 — Headless Browser DOM (Playwright) 🧪 — 실제 Chromium에서 페이지를 로드하고, Hydration을 기다리며, 콘솔 오류를 감지하고, 최종적으로 DOM에 남는 내용을 포착합니다.

이 둘을 비교할 때 실제 버그가 드러납니다. 바로 Hydration 불일치(mismatches), 클라이언트 주입 메타 태그(client injected meta tags), DOM 드리프트(DOM drift), 그리고 일반적인 감사에서는 절대 나타나지 않는 조용한 콘솔 오류들입니다.

🔎 실제로 포착하는 것들

• Hydration Mismatch Engine — 유효하지 않은 HTML 중첩(<p><div>), 비결정적 렌더링(Date.now(), Math.random()), 브라우저 확장 프로그램 속성 오염 등— React 오류 코드 #418과 #425를 발생시키고 사용자 경험(UX)을 조용히 저하시키는 요소들입니다.
• Dynamic OpenGraph Previews — 클라이언트 측 JavaScript 실행 후에만 존재하는 모든 OG/Twitter 태그를 플래그 지정하고, 원시 HTML로부터 실시간 미리보기 카드를 렌더링하여 Facebook, X, LinkedIn이 실제로 보는 것을 정확히 볼 수 있게 합니다.
• Indexation Blocker Shield — 사용자 에이전트별(user-agent) robots.txt 규칙, 클라이언트 주입 noindex, 서버와 클라이언트 간의 canonical 불일치, 리디렉션 루프, 소프트 404 등을 감지합니다.
• Framework Intelligence — Next.js App Router (RSC 페이로드), Pages Router, Vite SPA, TanStack Start/Router를 구분하고, 일반적인 적용되지 않는 조언을 제공하는 대신 상황에 맞는 추천을 합니다.
• Console Error Listener — 페이지 로드 도중 발생하는 런타임 예외 및 실패한 네트워크 요청을 사후가 아닌 실시간으로 포착합니다.

모든 감지기는 단순한 빨간색 ❌ 표시만 하는 것이 아니라, 일반 언어로 된 설명과 복사-붙여넣기 가능한 수정 방안을 제공합니다.

💡 Screaming Frog, Ahrefs 또는 Search Console을 사용하지 않는 이유?

이러한 도구들은 좋은 도구들입니다. 진심으로 말씀드리자면, 저 역시 Search Console을 사용합니다. 하지만 이 도구들 중 어느 것도 하나의 간단한 사실을 기반으로 구축되지 않았습니다. 바로 현대적인 프레임워크는 누가 요청하느냐에 따라 다르게 렌더링된다는 것입니다. 일반적인 크롤러는 JS를 아예 건너뛰거나(클라이언트가 주입한 콘텐츠 누락), 최종 DOM을 진실로 간주합니다(봇과 소셜 크롤러가 실제로 받는 것을 누락). 어느 쪽 접근 방식도 _불일치 자체_를 드러내지 못하는데, 보통 실제 버그는 바로 그 불일치 지점에 존재합니다.

그리고 실질적인 부분도 중요합니다:

• ✅ 100% 무료 — 체험판, 신용카드, 기능 제한이 없습니다.
• ✅ 가입 마찰 없음 — URL을 붙여넣고 스캔한 후 보고서를 받으세요.
• ✅ README나 사이트 푸터에 삽입 가능한 SVG 점수 배지.
• ✅ 예의 바르고 문서화된 봇 — SohnicsSEOBot/1.0은 robots.txt를 준수하고, 호스트당 동시 요청을 2개로 제한하며, /bot에서 원클릭으로 옵트아웃할 수 있습니다.

👉 사용해 보세요

Next.js나 React 앱을 배포했는데 소셜 미리보기가 비어 나왔거나, Search Console이 명확한 이유 없이 페이지를 플래그 지정한 적이 있다면 — 스캔을 실행하여 실제 결과가 어떤 모습인지 확인해 보세요. 보통은 금방 원인을 알 수 있습니다.

sohnicsseocrawler.sohnics.tech

Sohnics의 엔지니어링 팀에서 구축하고 유지 관리합니다. 혹시 놓치는 엣지 케이스를 발견하셨다면, 커멘트 💬에 알려주시면 정말 감사하겠습니다. 이 도구는 로드맵 문서가 아니라 실제 현장의 다양한 프레임워크 설정으로부터 더 좋아지는 종류의 도구입니다.