GPTBot과 PerplexityBot은 당신의 원시 HTML을 읽고 JavaScript를 완전히 건너뜁니다. Beacon은 진짜 헤드리스 브라우저에서 당신의 페이지를 렌더링하고, AI 엔진이 결코 보지 못하는 콘텐츠 — 그리고 키워드 — 를 정확히 보여줍니다.
GPTBot(OpenAI / ChatGPT), PerplexityBot, ClaudeBot, Amazonbot 같은 AI 크롤러는 당신의 URL을 요청하고 돌아오는 원시 HTML을 파싱합니다 — "소스 보기"로 보는 것과 같은 바이트입니다. 그들은 브라우저 엔진을 실행하거나 당신의 스크립트를 돌리지 않습니다. 그래서 거의 빈 루트 div를 보내고 모든 실제 콘텐츠를 JavaScript로 주입하는 싱글 페이지 앱은 사람에게는 완전해 보이고 봇에게는 비어 보입니다. Google에서 랭크하고, 방문자에게 완벽해 보이면서도, 당신의 구매자가 추천을 묻는 AI 엔진에는 보이지 않을 수 있습니다.
우리는 렌더링하지 않는 크롤러가 하듯 페이지의 정적 HTML을 가져오고, 같은 URL을 진짜 헤드리스 브라우저에 로드하여 렌더링된 DOM을 캡처한 뒤, 둘을 diff합니다 — JavaScript 실행 후에만 존재하는 콘텐츠의 비율, 정적 버전에 없는 정확한 키워드, 그리고 노출 정도를 즉시 알 수 있도록 렌더 모드(서버 렌더링, 하이브리드, 클라이언트 렌더링)를 보고합니다.
개선책은 항상 같은 원칙입니다: 어떤 JavaScript가 실행되기 전에 서버가 보내는 HTML에 중요한 콘텐츠를 넣으세요 — 서버 사이드 렌더링, 정적 생성, 또는 봇을 위한 동적 렌더링을 통해. 최소한 헤딩, 본문 카피, 가격, FAQ 답변이 클라이언트 JavaScript로 가져와 주입되는 대신 정적 HTML에 있도록 하세요.
거의 아무도 하지 않습니다. GPTBot(ChatGPT/OpenAI), PerplexityBot, ClaudeBot, Amazonbot과 대부분의 다른 AI 크롤러는 당신의 원시 HTML을 가져와 그대로 파싱합니다. 그들은 JavaScript를 실행하기 위해 브라우저 엔진을 띄우지 않으므로, 로드 후 JS로 주입된 콘텐츠는 사실상 그들에게 보이지 않습니다.
렌더 갭은 당신의 정적 HTML(AI 크롤러가 다운로드하는 것)과 JavaScript로 렌더링된 DOM(브라우저의 사람이 보는 것)의 차이입니다. Beacon은 이를 보이는 콘텐츠의 비율과 JavaScript 실행 후에만 존재하는 키워드 집합으로 표현합니다. 큰 렌더 갭은 AI 엔진이 거의 빈 페이지를 읽고 있다는 뜻입니다.
어떻게 렌더링하느냐에 따라 다릅니다. 순수 클라이언트 사이드 React 앱(예: Vite SPA 또는 create-react-app)은 거의 빈 HTML 껍데기를 보내고 모든 것을 JS로 구축합니다 — 그것이 최대 렌더 갭입니다. Next.js, Remix, Astro 및 유사한 프레임워크는 페이지를 서버 렌더링하거나 정적 생성할 수 있어 갭을 메우지만 — 당신이 실제로 그렇게 구성한 라우트에 한해서입니다. Beacon은 가정하는 대신 실제 출력을 확인합니다.
중요한 콘텐츠를 서버가 보내는 HTML로 옮기세요. 주요 옵션은 서버 사이드 렌더링(SSR), 정적 사이트 생성(빌드 시 SSG / 프리렌더링), 그리고 봇에게 프리렌더링된 HTML 스냅샷을 제공하는 동적 렌더링입니다. 최소한 헤딩, 본문 카피, 가격, FAQ 답변이 클라이언트 JavaScript로 가져와 주입되는 대신 정적 HTML에 있도록 하세요.
대체로 네 — Googlebot은 현대적인 렌더링 엔진을 실행하며 두 번째 패스에서 당신의 JavaScript를 실행하므로, 클라이언트 렌더링 콘텐츠도 랭크할 수 있습니다(렌더링은 더 느리고 지연될 수 있지만). 결정적 차이는 AI 검색입니다: GPTBot, PerplexityBot 및 대부분의 LLM 크롤러는 JavaScript를 전혀 렌더링하지 않습니다. 그래서 Google JS-SEO 체크를 통과하면서도 ChatGPT와 Perplexity에는 보이지 않을 수 있습니다.