AI 크롤러는 JavaScript를 실행하지 않습니다. 실제로 무엇을 보는지 확인하세요.
페이지가 브라우저에서 렌더링된다면 ChatGPT, Claude, Perplexity는 빈 껍데기만 읽고 있을 수 있습니다. 확인하는 방법과 Next.js, React 등 프레임워크별 해결 방법을 정리했습니다.
대부분의 AI 크롤러는 서버가 보내는 HTML만 읽고 그 이상은 하지 않습니다. 제품 페이지가 로드된 뒤 JavaScript로 콘텐츠를 만든다면, GPTBot이나 ClaudeBot 같은 크롤러는 헤더와 푸터, 로딩 스피너만 있는 페이지를 받을 수 있습니다. 읽을 수 없는 제품은 추천할 수도 없습니다.
렌더링하는 크롤러와 하지 않는 크롤러
Googlebot은 JavaScript를 실행합니다. 페이지를 렌더링 대기열에 넣고 브라우저가 보여 줄 화면을 기준으로 색인하기 때문에, 클라이언트 렌더링 사이트도 Google에서는 순위에 오를 수 있습니다. Gemini와 Google AI Overviews는 Google 색인을 바탕으로 하므로 이 특성을 그대로 물려받습니다.
ChatGPT, Claude, Perplexity의 크롤러는 다릅니다. Vercel과 MERJ가 2024년에 크롤러 트래픽을 분석한 결과, OpenAI와 Anthropic의 크롤러는 JavaScript 파일을 내려받기는 했지만 실행하지는 않았습니다. 각 업체가 달리 문서화하기 전까지는 이 크롤러들이 원본 HTML만 본다고 가정하세요.
이 차이가 흔한 수수께끼를 설명해 줍니다. Google에서는 순위가 높은데, 정작 자기 카테고리에 대한 ChatGPT 답변에는 한 번도 나오지 않는 사이트 말입니다.
내 페이지를 확인하는 방법
제품 페이지를 열고 요소 검사가 아니라 "페이지 소스 보기"를 사용하세요. 요소 검사는 JavaScript가 실행된 뒤의 페이지를 보여 줍니다. 소스는 렌더링하지 않는 크롤러가 받는 내용을 그대로 보여 줍니다.
헤드라인이나 가격처럼 화면에 보이는 문장을 소스에서 검색해 보세요. 있다면 크롤러도 읽을 수 있습니다. 소스에 루트 <div>와 script 태그만 있다면 콘텐츠가 브라우저에서 렌더링되고 있는 것입니다.
터미널에서 페이지를 가져와 확인할 수도 있습니다.
curl -s https://yourdomain.com/pricing | grep -i "per month"일치하는 결과가 없다면, JavaScript를 건너뛰는 크롤러에게 가격 텍스트가 전혀 전달되지 않는다는 뜻입니다.
Promptvane의 무료 AI 준비도 진단은 홈페이지와 사이트맵에서 샘플링한 페이지를 대상으로 이 확인을 대신 해 주고, HTML에 텍스트가 거의 없는 페이지를 표시합니다.
프레임워크별 해결 방법
목표는 어디서나 같습니다. 첫 HTML 응답에 콘텐츠를 담아 보내는 것입니다.
App Router를 쓰는 Next.js에서는 페이지가 기본적으로 Server Component이며 서버에서 렌더링됩니다. 문제는 페이지 전체를 'use client'로 지정하고 useEffect에서 데이터를 가져올 때 생깁니다. 데이터 가져오기를 Server Component로 옮기고(정적 페이지라면 generateStaticParams), 'use client'는 상호작용이 필요한 부분에만 쓰세요.
Next.js Pages Router에서는 콘텐츠 페이지에 클라이언트에서 데이터를 가져오는 대신 getStaticProps나 getServerSideProps를 쓰세요.
Vite로 만든 React나 Vue 싱글 페이지 앱이라면 공개 페이지에 사전 렌더링을 추가하거나, 마케팅 페이지를 Next.js, Nuxt, Astro, Remix처럼 서버에서 렌더링하는 프레임워크로 옮기세요.
WordPress, Webflow 등 대부분의 호스팅형 사이트 빌더는 이미 서버에서 렌더링합니다. 리뷰 캐러셀이나 요금표처럼 JavaScript 위젯으로 콘텐츠를 불러오는 페이지 빌더와 플러그인을 확인하세요.
다른 방식으로 숨는 콘텐츠
함정은 서버 렌더링만이 아닙니다. 탭과 아코디언 안의 콘텐츠는 HTML에 들어 있다면 괜찮지만, 탭을 클릭할 때만 불러오는 콘텐츠는 그렇지 않습니다. 이미지 속 텍스트는 OCR을 하지 않는 크롤러에게 보이지 않습니다. 외부 결제 스크립트가 삽입하는 가격은 소스에 아예 나타나지 않는 경우가 많습니다.
FAQ
Googlebot이 JavaScript를 렌더링하니 괜찮은 것 아닌가요?
Google 검색에서는 대체로 괜찮습니다. ChatGPT, Claude, Perplexity에서는 그렇지 않습니다. 이들의 크롤러가 JavaScript를 실행한다는 사실은 확인된 바가 없으므로, 렌더링 후에만 존재하는 콘텐츠는 보이지 않을 가능성이 높습니다.
홈페이지만 서버에서 렌더링하면 충분한가요?
아니요. 어시스턴트는 보통 질문에 답하는 페이지를 인용합니다. 요금제 페이지, 비교 페이지, 기능 페이지 같은 곳입니다. 인용되기를 원하는 모든 페이지의 콘텐츠가 HTML에 있어야 합니다.
서버 렌더링을 하면 성능이 떨어지나요?
대개는 반대입니다. 서버 렌더링 페이지와 정적 페이지는 콘텐츠를 더 빨리 보여 주며, Core Web Vitals에도 도움이 됩니다.