AI 크롤러는 JavaScript로 렌더링된 콘텐츠를 읽을 수 있을까?
대개는 읽지 못합니다. Googlebot은 이후 단계에서 JavaScript를 렌더링하지만, 대부분의 AI 크롤러는 그렇게 한다고 문서화하지 않으며 Google 스스로도 모든 봇이 JavaScript를 실행할 수 있는 것은 아니라고 밝힙니다. 텍스트가 스크립트 실행 후에만 나타난다면 AI 크롤러는 빈 페이지를 받을 수 있습니다. 서버 사이드 렌더링이나 정적 페이지로 주요 콘텐츠를 처음 받는 HTML에 담으세요.
싱글 페이지 앱과 클라이언트 사이드 프레임워크는 어디에나 있고 브라우저에서는 멀쩡해 보입니다. 하지만 서버가 보내는 HTML만 읽는 크롤러는 다른 것을 봅니다. <div id="root"></div>와 스크립트 태그 몇 개, 텍스트는 거의 또는 전혀 없는 페이지입니다. AI 답변에게 그 페이지는 인용할 것이 없습니다.
이 글의 목차
AI 크롤러는 왜 JavaScript 콘텐츠를 놓치나요?
JavaScript를 실행하는 데는 비용이 큽니다. 크롤러는 스크립트를 내려받아 브라우저 엔진에서 실행하고 데이터가 로드될 때까지 기다려야 합니다. Google은 검색을 위해 이를 합니다. 크롤링하고, 페이지를 렌더링 대기열에 넣고, 자원이 허락할 때 헤드리스 Chromium으로 렌더링합니다. 그럼에도 Google은 사용자와 크롤러 모두에게 더 빠르다는 이유로 서버 사이드 렌더링이나 프리렌더링을 권장하며, 모든 봇이 JavaScript를 실행할 수 있는 것은 아니라고 밝힙니다.
OpenAI, Anthropic, Perplexity는 크롤러 문서에서 자사 에이전트가 JavaScript를 실행한다고 밝히지 않습니다. Apple은 Applebot이 페이지를 브라우저에서 렌더링할 수 있다고 밝힙니다. 명확한 언급이 없으니, AI 크롤러는 처음 받는 HTML만 읽는다고 가정하는 것이 안전합니다.
크롤러가 받는 내용은 어떻게 확인하나요?
렌더링된 페이지가 아니라 원본 HTML을 보세요. 브라우저 개발자 도구는 스크립트가 실행된 뒤의 DOM을 보여주며, 이는 크롤러가 받는 것이 아닙니다. 소스 보기를 쓰거나, 명령줄에서 원본 HTML을 저장해 검색하세요.
curl -s -o page.html \
-A "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko); compatible; GPTBot/1.4; +https://openai.com/gptbot" \
https://example.com/page
# Is a sentence from your main text in the raw HTML?
grep -c "a sentence from your main content" page.html결과가 0이면 그 문장은 서버가 보낸 HTML에 없다는 뜻이므로, 스크립트를 실행하지 않는 크롤러는 찾지 못합니다. 파일을 한 번 훑어보면 나머지도 알 수 있습니다. 서버에서 렌더링된 글은 전체 텍스트가 그 안에 있고, 클라이언트 사이드 껍데기는 빈 루트 요소와 스크립트 목록만 있습니다.
어떤 페이지가 가장 위험한가요?
- 모든 것을 브라우저에서 렌더링하는 React, Vue, Angular, Svelte로 만든 싱글 페이지 앱.
- 제품 상세, 가격, 리뷰처럼 로드 후 API에서 주요 텍스트를 가져오는 페이지.
- 탭, 아코디언, "더 보기" 섹션 안에 있어 클릭할 때만 요청되는 콘텐츠.
- 크롤러가 통과할 수 없는 로그인, 유료 구독벽, 동의 화면 뒤에 있는 페이지.
noindex나 정규(canonical) URL을 JavaScript로만 설정하는 페이지. Google은 원본 HTML에서noindex를 보면 렌더링을 아예 건너뛸 수 있다고 경고합니다.
JavaScript 전용 콘텐츠는 어떻게 고치나요?
해결책은 중요한 콘텐츠를 첫 응답에 담아 보내는 것입니다. 사용 중인 스택이 허용하는 가장 가벼운 방법을 고르세요.
- 서버 사이드 렌더링(SSR): Next.js, Nuxt, SvelteKit, Angular SSR 같은 프레임워크는 서버에서 페이지를 렌더링하고 브라우저에서 하이드레이션합니다.
- 정적 생성 또는 프리렌더링: 글, 문서, 랜딩 페이지처럼 거의 바뀌지 않는 페이지는 배포 시점에 HTML을 빌드합니다.
- 점진적 향상: 텍스트, 제목, 링크, 가격, JSON-LD를 HTML에 넣고 JavaScript는 상호작용에만 사용합니다.
- 중요한 것은 인라인으로: 탭이 콘텐츠를 숨기고 있다면 클릭할 때 가져오지 말고, 모두 HTML에 넣은 다음 CSS나 스크립트로 표시 여부를 전환하세요.
앱 전체를 한 번에 바꿀 필요는 없습니다. 인용되기를 원하는 페이지부터 시작하세요. 글, 문서, 제품과 가격 페이지입니다. 계정 영역과 대시보드는 어차피 로그인 뒤에 있으므로 클라이언트 사이드로 두어도 됩니다.
user agent에 따라 크롤러에게 사용자와 다른 페이지를 제공하는 것은 피하세요. 모두에게 같은 HTML을 렌더링하면 유지 관리가 더 간단하고 클로킹 의혹도 없습니다.
로그인, 동의, 유료 구독벽 화면도 AI 크롤러를 막나요?
네. 크롤러는 로그인하지 않고, 쿠키 배너를 클릭하지 않고, 확인 과정을 풀지 않습니다. Anthropic은 자사 봇이 CAPTCHA를 우회하려 하지 않는다고 밝힙니다. 동의 관리 도구가 HTML에서 페이지를 전체 화면 오버레이로 대체하거나 처음 방문한 사용자를 동의 페이지로 리디렉션하면, 크롤러는 내 콘텐츠 대신 그것을 받습니다.
공개 페이지는 동의 상태와 관계없이 HTML에 콘텐츠를 렌더링하고, 배너는 대체가 아니라 오버레이로 두세요. 인용되기를 원하는 페이지는 로그인 장벽 밖에 두고, 크롤러가 로그인 페이지로 리디렉션되지 않는지 확인하세요.
AISeeWhy는 JavaScript 전용 페이지를 어떻게 탐지하나요?
AISeeWhy는 스크립트를 실행하지 않고 각 크롤러가 받는 처음 HTML을 읽습니다. 페이지에 보이는 텍스트가 거의 없고 프레임워크 루트 요소와 스크립트만 있으면, 콘텐츠에 JavaScript가 필요하다는 P1 발견 사항을 보고합니다. 또한 크롤러를 브라우저가 받는 페이지와 다른 곳으로 보내는 리디렉션도 표시합니다.
자주 묻는 질문
Googlebot은 JavaScript를 렌더링하나요?
네. Google은 HTML을 크롤링하고 페이지를 렌더링 대기열에 넣은 뒤 자원이 허락할 때 헤드리스 Chromium으로 렌더링합니다. 그래도 Google은 서버 사이드 렌더링이나 프리렌더링을 권장합니다.
ChatGPT, Claude, Perplexity 크롤러는 JavaScript를 실행하나요?
각 벤더의 크롤러 문서에는 그렇다는 언급이 없습니다. 벤더가 달리 밝히기 전까지는 크롤러가 처음 받는 HTML을 읽는다고 가정하고, 콘텐츠가 그 안에 있도록 하세요.
봇 전용 동적 렌더링은 좋은 방법인가요?
임시방편으로는 작동하지만 유지해야 할 두 번째 렌더링 경로가 생깁니다. 서버 사이드 렌더링이나 정적 HTML은 모두에게 같은 콘텐츠를 제공하므로 장기적으로 더 간단한 해결책입니다.
JavaScript로 추가한 JSON-LD도 인정되나요?
Google은 렌더링 후에 읽을 수 있지만, 스크립트를 실행하지 않는 크롤러는 보지 못합니다. JSON-LD는 처음 받는 HTML에 넣으세요.
참고 자료
- Google Search Central: JavaScript SEO 기본 사항
- Apple: Applebot 소개
- OpenAI: OpenAI 크롤러 개요
- Anthropic: Anthropic은 웹에서 데이터를 크롤링하나요? 사이트 운영자는 크롤러를 어떻게 차단할 수 있나요?
- Perplexity: Perplexity 크롤러