AI 크롤러 자바스크립트 못 읽는다: CSR 사이트 GEO 점검 5단계

AI 크롤러 자바스크립트 핵심: AI는 서버가 처음 보낸 HTML만 읽습니다

GPTBot·ClaudeBot·PerplexityBot 같은 AI 크롤러는 대부분 자바스크립트를 실행하지 않고 서버가 첫 응답으로 보낸 HTML만 읽습니다. 그래서 AI 크롤러 자바스크립트 문제는 GEO(생성형 AI 검색 최적화)에서 콘텐츠가 읽히느냐를 가르는 첫 관문인데요. robots.txt로 봇을 열어 뒀는데도 인용되지 않는다면 CSR(클라이언트 사이드 렌더링)이 원인일 수 있습니다. 구글에서는 1페이지인데 ChatGPT에게는 빈 페이지로 보이는 역설이 여기서 생깁니다.

• Vercel·MERJ 분석에서 OpenAI·Anthropic·Perplexity의 주요 AI 크롤러 가운데 JS를 렌더링한 곳은 없었습니다
• 2026년 실험에서 ChatGPT-User는 JS 파일을 아예 불러오지 않았고 5초가 지나면 연결을 끊었습니다
• 미국 대형 리테일 상품 페이지는 화면 텍스트의 49~89%가 원본 HTML에 없었습니다
• 구글 AI 기능은 JS를 처리하지만 ChatGPT·Claude·Perplexity 인용이 목표라면 본문·가격·스키마를 첫 HTML에 넣어야 합니다

목차

• AI 크롤러 자바스크립트 핵심
• AI 크롤러 자바스크립트 렌더링의 의미와 플랫폼별 차이
• GEO 렌더링 점검 5단계
• 협업툴 SaaS C사 사례
• SSR·SSG·프리렌더링 비교와 수정 우선순위
• AI 크롤러 자바스크립트 FAQ
• 함께 읽으면 좋은 글
• 출처

AI 크롤러 자바스크립트 렌더링의 의미와 플랫폼별 차이

렌더링은 자바스크립트를 실행해 화면을 완성하는 과정인데 구글을 뺀 주요 AI 크롤러는 이 단계를 건너뜁니다. 이때 React·Vue로 만든 CSR 사이트는 <div id="root"></div>와 스크립트 태그만 남은 빈 껍데기로 읽힙니다. 사람 눈에는 멀쩡한 페이지라 오류 메시지도 뜨지 않습니다.

Google Search Central의 자바스크립트 SEO 문서를 보면 Googlebot은 200 응답을 받은 페이지를 렌더링 큐에 넣고 헤드리스 Chromium으로 JS를 실행합니다. 그런 구글도 "모든 봇이 자바스크립트를 실행할 수 있는 것은 아니다"라며 서버 렌더링이나 프리렌더링을 권합니다.

Vercel과 MERJ가 Vercel 네트워크 한 달 치 트래픽을 분석한 결과 주요 AI 크롤러 요청은 Googlebot(45억 건)의 약 28%에 달했습니다. ChatGPT 크롤러 요청의 11.50%, Claude 크롤러 요청의 23.84%가 JS 파일이었는데 실행 흔적은 없었습니다. 코드를 텍스트처럼 내려받기만 한 셈입니다. 2026년 EdgeComet의 OpenSeoTest에서도 학습용 GPTBot이 AJAX를 실행한 경우는 수백 건 중 1건뿐이었습니다. 실시간 방문용 ChatGPT-User는 HTML만 가져가 5초가 지나면 연결을 끊고 HTTP 499를 남겼으며 페이지 안의 스키마 마크업도 쓰지 않았습니다.

봇이 렌더링하든 아니든 첫 HTML에 핵심 내용을 넣는 쪽이 가장 확실합니다. OpenAI 공식 문서에 따르면 OAI-SearchBot을 막으면 ChatGPT 검색 답변에 나오지 않고 봇별 IP 목록은 JSON으로 공개돼 있어 로그 검증에 쓸 수 있습니다. 플랫폼마다 정보를 가져오는 경로가 갈리는 구조는 LLM 3계층 가시성 GEO 전략에서 더 자세히 볼 수 있습니다.

GEO 렌더링 점검 5단계

우리 사이트를 AI 크롤러 눈으로 보려면 원본 HTML, 봇 요청, 비교표, 로그, 실제 답변 순으로 확인합니다. 1단계는 개발 지식 없이 5분이면 해 볼 수 있습니다. 지오랭크도 AI 가시성 진단을 시작할 때 콘텐츠보다 원본 HTML을 먼저 봅니다.

1. 소스 보기와 JS 끄기: Ctrl+U로 연 소스에서 Ctrl+F로 핵심 문장·가격·FAQ 질문을 찾습니다. 검사(Elements) 탭은 렌더링이 끝난 화면이라 기준이 되지 않습니다. DevTools에서 'Disable JavaScript'를 켜고 새로고침하면 AI 크롤러가 받는 내용과 거의 같은 화면이 남습니다.

2. 봇 User-Agent로 curl 요청: 봇 UA로 받은 결과를 일반 UA 결과와 크기·문구로 비교합니다. OAI-SearchBot UA는 OpenAI 공식 문서의 문자열을 그대로 복사해 씁니다.

   curl -s -A "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; GPTBot/1.4; +https://openai.com/gptbot" https://example.com/pricing | grep -c "월 요금"
   

   WAF·CDN이 UA와 IP를 함께 검증하면 UA만 바꾼 내 PC 요청은 403으로 막힐 수 있으니 실제 봇의 상태는 4단계 로그로 확인합니다.

3. 원본 HTML과 렌더링 DOM 비교표: 페이지별 원본·렌더링 글자 수, 핵심 문장 5개 포함 여부, JSON-LD·canonical·meta description이 원본에 있는지, 내부 링크 수를 적습니다.

4. 서버·CDN 로그 분석: GA처럼 JS로 작동하는 도구는 봇을 기록하지 못합니다. UA로 거른 요청을 공식 IP 목록(gptbot.json, searchbot.json, chatgpt-user.json)과 대조하고 404·3xx 비율, .js 요청 비중, 후속 XHR 요청, 499 발생을 봅니다.

5. 실제 AI 답변 확인: 가격·요금제 차이·사양처럼 그 페이지에만 있는 사실을 묻는 질문 10~20개를 ChatGPT 검색·Perplexity·Claude·Google AI Mode에 똑같이 던집니다. 틀린 답이 1~3단계에서 원본 HTML에 없던 항목과 겹치는지 대조합니다.

협업툴 SaaS C사 사례: SSR 전환 3개월 만에 AI 가시성 73%

국내 협업툴 SaaS C사의 AI 인용을 가로막은 것은 콘텐츠가 아니라 봇이 받아 간 빈 HTML이었습니다. 마케팅 영역만 SSR로 옮기자 4개월 넘게 0이던 ChatGPT·Claude·Perplexity 인용이 배포 7주 안에 모두 시작됐습니다.

React CSR로 만든 C사 마케팅 사이트는 요금제·기능 비교표·FAQ·도입 사례를 모두 API로 불러왔습니다. 구글에서는 '협업툴 추천' 같은 핵심 키워드로 1페이지에 있었지만 ChatGPT·Claude·Perplexity에는 4개월 넘게 한 번도 인용되지 않았습니다. 구글 색인을 쓰는 Gemini 언급도 18% 정도였습니다. ChatGPT는 1년 전 요금을 답했고 요금 질문 오답 비율은 35%였습니다.

서버 로그를 보니 GPTBot·OAI-SearchBot·ClaudeBot·PerplexityBot은 매일 방문하고 있었습니다. 문제는 봇이 받아 간 HTML에 <div id="root"></div>와 스크립트 태그만 있었다는 점입니다. JSON-LD는 GTM으로 넣고 있었습니다. ChatGPT-User 응답 시간 중앙값이 3.8초여서 AI 봇 요청의 37%가 499로 끝났습니다.

지오랭크는 1~2주 차에 주요 URL 120개를 봇 UA로 요청해 원본 HTML과 렌더링 DOM 비교표를 만들고 경쟁 협업툴 4곳을 같은 기준으로 비교했습니다. 3주 차부터는 로그인 이후 앱 화면을 CSR로 두고 마케팅 영역만 Next.js 서버 컴포넌트로 옮겼습니다. 요금제·기능 비교·FAQ는 SSR로, 블로그·도입 사례·가이드는 SSG·ISR로 바꿨습니다. 스키마는 서버 템플릿에서 Organization·SoftwareApplication·FAQPage·Article을 @graph로 묶어 출력하고 canonical·meta description은 원본 HTML에 고정했습니다. TTFB를 1초 안으로 줄였고 배포 파이프라인에는 요금제 이름과 application/ld+json을 grep으로 확인하는 검사를 넣었습니다. 비교형·비용형·방법형 질의 30개도 함께 설계했습니다.

SSR 배포 5주 만에 Perplexity와 Gemini에서, 7주 차에는 ChatGPT와 Claude에서도 인용이 시작됐습니다. 착수 3개월 시점에 하루 5회 새 세션으로 측정한 결과입니다.

• 4개 LLM 평균 AI 가시성 73%(ChatGPT 71%, Gemini 79%, Claude 66%, Perplexity 76%)
• 경쟁 4곳 대비 인용 점유율 약 2.6배, 'Notion 대안 협업툴' 질의 평균 추천 순위 1위
• AI 봇 499 비율 37% → 2%대, 요금 오답 비율 35% → 12%
• AI 경유 데모 신청 월 3건 → 12건

C사 그로스 리드는 "화면에서는 멀쩡하던 요금제 페이지가 AI에게는 빈 페이지였다는 걸 진단에서 처음 알았다"고 말했습니다.

SSR·SSG·프리렌더링 비교와 수정 우선순위

장기적인 해결책은 SSR·SSG처럼 서버가 완성된 HTML을 보내는 방식입니다. 프리렌더링은 당장 전환이 어려운 SPA를 위한 임시방편에 가깝습니다. Google Search Central도 봇에게만 미리 렌더링한 HTML을 주는 동적 렌더링을 장기 해결책으로 보지 않고 서버 사이드 렌더링·정적 렌더링·하이드레이션을 권합니다.

본문 전체가 비지 않아도 가격 한 줄이 첫 HTML에서 빠지면 AI는 그 사실을 다른 출처에서 가져옵니다. MarketerFirst가 2026년 8월 Best Buy·Home Depot·Wayfair·Target 상품 페이지를 비교했더니 원본 HTML에서 읽히는 텍스트 블록은 Target 11%(1,043자), Wayfair 29%(16,763자), Best Buy 33%, Home Depot 51%에 그쳤습니다. Target은 가격이 HTML에 아예 없었고 JSON-LD도 0개였습니다. 이 밖에 자주 빠지는 것은 GTM으로 넣은 JSON-LD·canonical·meta description, 클릭해야 API로 불러오는 탭·아코디언·더보기, href 없는 무한 스크롤 링크, 로그인 벽·쿠키 동의 모달만 담긴 첫 응답입니다. TTFB가 길면 서버 렌더링을 해도 ChatGPT-User의 5초 제한에 걸립니다.

고칠 순서는 AI가 사실을 그대로 인용하는 페이지부터 정합니다. 가격·요금제, 제품 상세, 회사 소개, FAQ가 먼저이고 비교·가이드, 고객 사례, 제품 문서, 블로그가 그다음입니다. 로그인 이후 대시보드나 장바구니는 인용 대상이 아니어서 CSR을 유지해도 됩니다. AI가 잘못된 가격을 말한다면 그 값이 원본 HTML에 있는지부터 봅니다. 없으면 렌더링 문제이고 있으면 오래된 캐시나 외부 출처를 의심합니다. 구글 순위는 AI 크롤러 접근성을 증명해 주지 못합니다.

어느 방식이든 JSON-LD는 서버 템플릿에서 <script type="application/ld+json">으로 출력하고 핵심 사실은 본문 문장으로도 씁니다. 수정 후에는 같은 URL 세트로 3단계 비교표를 다시 만들고 공식 IP로 검증한 AI 봇 요청의 200·404·499 비율을 주 단위로 봅니다. Copilot 인용은 Bing Webmaster Tools의 AI Performance 보고서에서, ChatGPT·Perplexity·AI Overviews는 5단계 질문 세트로 확인합니다. 봇이 200으로 받아 간 지 4~6주가 지나도 인용이 그대로라면 렌더링은 해결된 것이고 답변형 문단·엔티티 일관성·외부 언급으로 넘어갈 차례입니다.

렌더링 누락은 오류 없이 조용히 재발합니다. 프론트엔드 리팩터링 한 번에 CSR로 돌아가는 경우가 흔해서 CI에 '주요 URL을 curl로 받아 핵심 문구와 application/ld+json이 없으면 빌드 실패' 검사를 넣어 두면 안전합니다.

AI 크롤러 자바스크립트 FAQ

Next.js로 만든 사이트면 AI 크롤러가 읽을 수 있나요?

프레임워크만으로는 보장되지 않습니다. 'use client' 컴포넌트에서 useEffect나 클라이언트 fetch로 본문을 불러오면 첫 HTML에는 로딩 스피너만 들어갑니다. 데이터는 서버 컴포넌트나 getServerSideProps·getStaticProps 단계에서 불러오고 페이지마다 curl로 확인하는 것이 좋습니다.

AI 봇이 JS 파일을 요청한다면 렌더링도 하는 것 아닌가요?

요청과 실행은 다릅니다. JS 파일을 받아 간 뒤 이어지는 XHR·API 요청이 로그에 남아 있어야 실제로 실행했다고 볼 수 있습니다. 후속 요청이 없다면 코드를 내려받기만 한 것입니다.

동적 렌더링은 클로킹으로 보지 않나요?

봇에게 미리 렌더링한 HTML을 주는 것 자체가 클로킹은 아닙니다. 구글은 봇과 사용자에게 전혀 다른 내용을 주면 클로킹으로 볼 수 있다고 안내합니다. 프리렌더링을 쓴다면 캐시가 사용자 화면과 같은 내용인지 주기적으로 비교합니다.

ChatGPT-User는 robots.txt를 따르지 않는데 차단 설정이 의미가 있나요?

OpenAI 문서에 따르면 ChatGPT-User는 사용자가 직접 시킨 동작이라 robots.txt가 적용되지 않을 수 있습니다. 검색 답변 노출을 정하는 봇은 OAI-SearchBot이므로 허용·차단은 봇별로 나눠 설정합니다. 차단하지 않았다면 남은 과제는 그 봇이 읽을 수 있는 HTML을 주는 일입니다.

렌더링을 고치면 AI 답변에 언제 반영되나요?

플랫폼과 봇의 재방문 주기에 따라 다릅니다. 로그에서 주요 URL이 200으로 다시 수집됐는지 먼저 확인하고 그 뒤 질문 세트로 인용 변화를 봅니다. robots.txt를 함께 바꿨다면 OpenAI 검색에는 반영까지 약 24시간이 걸립니다.

함께 읽으면 좋은 글

• 어떤 AI 크롤러를 열고 막아야 할지 궁금하시다면? robots.txt 작성법: AI 크롤러 허용·차단 예시
• JS를 실행하지 못하는 약점을 콘텐츠 보호에 쓰는 방법이 궁금하시다면? LLM 클로킹 가이드: AI 크롤러의 콘텐츠 도용을 막는 GEO 방어 전략
• ChatGPT와 퍼플렉시티 노출이 왜 다른지 궁금하시다면? ChatGPT·퍼플렉시티는 왜 노출이 다를까? LLM 3계층 GEO 전략

출처

• Vercel, The rise of the AI crawler
• EdgeComet, OpenSeoTest: How GPTBot and ChatGPT-User handle JavaScript
• MarketerFirst, We Tested What AI Crawlers Can Read on Four Major Retail Product Pages
• Google Search Central, Understand JavaScript SEO basics
• OpenAI, Overview of OpenAI Crawlers