많은 기업의 웹사이트가 React로 만들어졌지만, AI 검색 엔진은 이를 제대로 읽지 못합니다.
귀사 웹사이트가 React, Vue, Angular 같은 SPA(Single Page Application)로 구축되어 있다면 이 글을 주의 깊게 읽어야 합니다. AI 검색 크롤러가 귀사 사이트를 거의 읽지 못하고 있을 가능성이 높습니다.
GPTBot(ChatGPT), PerplexityBot, Claude-Web 같은 AI 크롤러는 기본적으로 URL에 HTTP 요청을 보내고 반환된 HTML을 읽습니다. JavaScript를 실행하지 않습니다 — 또는 실행하더라도 시간 제한이 있어 SPA의 동적 렌더링을 기다리지 않습니다.
React SPA로 만들어진 사이트에 크롤러가 접근하면 이런 HTML을 받습니다.
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
<div id="root"></div>
<script src="/static/js/main.abc123.js"></script>
</body>
</html>
콘텐츠가 없습니다. 모든 텍스트, 서비스 설명, 성공사례, 블로그 포스트는 JavaScript 번들 안에 들어 있습니다. AI 크롤러는 이 번들을 실행하지 않으니 콘텐츠를 읽을 수 없습니다.
인테솔코리아가 진단한 기업 사이트의 약 60%가 SPA 구조로 AI 크롤러에 비가시 상태였습니다. IT·스타트업 섹터는 이 비율이 80%까지 올라갑니다. "SEO를 신경 쓰고 있다"고 하는 경우에도 기존 구글 크롤러(Googlebot)는 JavaScript 렌더링을 지원하므로 이 문제를 인식하지 못하는 경우가 많습니다.
Astro, Next.js(SSG 모드), Gatsby 등으로 전환해 모든 페이지를 빌드 타임에 정적 HTML로 생성합니다. 가장 완전한 해결책이며, 페이지 로드 속도도 크게 향상됩니다.
Next.js의 getServerSideProps, Nuxt.js 등을 활용해 서버에서 HTML을 렌더링해 내려줍니다. 실시간 데이터가 필요한 경우 적합합니다.
Prerender.io 같은 서비스를 사용해 봇에게만 사전 렌더링된 HTML을 제공합니다. 임시방편으로 쓸 수 있지만 완전한 해결책은 아닙니다.
Next.js라도 설정에 따라 다릅니다. getStaticProps 또는 generateStaticParams를 사용한 SSG 모드라면 안전합니다. 그러나 클라이언트 사이드 데이터 페칭(useEffect + fetch)에 의존한다면 동일한 문제가 발생합니다.
브라우저에서 귀사 사이트를 열고 JavaScript를 비활성화해 보십시오(Chrome: 개발자도구 → Settings → Disable JavaScript). 콘텐츠가 보이지 않는다면 AI 크롤러도 같은 경험을 하고 있습니다.
curl -s https://yoursite.com | grep -o '<p[^>]*>[^<]*</p>' | head -5
결과가 비어 있다면 SPA 문제가 있습니다.
{{ post.lede }}
{{ b.v }}
{{ b.v }}