핵심 답변
자바스크립트로 만든 사이트가 그 자체로 불리한 것은 아니지만, 본문이 자바스크립트 실행 뒤에만 나타나는 구조라면 색인이 늦어지거나 일부 크롤러가 내용을 읽지 못할 수 있습니다. 구글은 자바스크립트 웹 앱을 크롤링, 렌더링, 색인의 3단계로 처리하며 렌더링은 나중에 처리될 수 있습니다. 구글 외의 크롤러(일부 AI 크롤러 포함)는 자바스크립트를 실행하지 않을 수 있어, 중요한 본문은 서버가 보내는 HTML에 담는 편이 안전합니다.
핵심 포인트
- 구글은 자바스크립트를 크롤링, 렌더링, 색인 3단계로 처리합니다
- 렌더링은 대기열에서 나중에 처리될 수 있습니다
- 일부 AI 크롤러는 자바스크립트를 실행하지 않을 수 있습니다
- 중요한 본문과 링크는 서버가 보내는 HTML에 담는 편이 안전합니다
구글은 자바스크립트 사이트를 어떻게 처리하나요?
구글은 자바스크립트 웹 앱을 크롤링, 렌더링, 색인의 3단계로 처리합니다.
일반 HTML 페이지는 크롤러(검색로봇)가 내려받은 문서에 본문이 이미 들어 있어 바로 분석할 수 있습니다. 반면 브라우저에서 자바스크립트가 실행되어야 본문이 만들어지는 페이지는 구글이 페이지를 실행해 보는 렌더링 단계를 거쳐야 내용을 볼 수 있습니다. 이 렌더링은 대기열에 들어가 나중에 처리될 수 있습니다.
구글은 HTTP 응답 HTML에 콘텐츠가 모두 들어 있는 서버 렌더링 페이지는 잘 처리된다고 설명합니다. 또한 구글은 페이지의 크롤링이나 색인을 보장하지 않으므로, 처리 단계가 하나 더 있다는 것은 확인할 지점이 그만큼 늘어난다는 뜻입니다.
AI 크롤러도 자바스크립트를 실행하나요?
크롤러마다 다르며, 구글 외의 크롤러(일부 AI 크롤러 포함)는 자바스크립트를 실행하지 않을 수 있습니다.
ChatGPT 검색을 위한 OAI-SearchBot, 클로드(Claude)의 Claude-SearchBot, 퍼플렉시티(Perplexity)의 PerplexityBot처럼 AI 서비스마다 별도의 크롤러가 있습니다. 각 회사의 공식 문서는 봇의 역할과 robots.txt 제어 방법을 중심으로 설명하므로, 자바스크립트 처리 범위는 작성 시점(2026년) 기준으로 단정하기 어렵고 변경될 수도 있습니다.
그래서 생성형엔진최적화(GEO) 관점에서는 '어떤 크롤러가 와도 첫 응답 HTML만으로 핵심 내용을 읽을 수 있는가'를 기준으로 삼는 편이 안전합니다. 구글도 AI 개요(AI Overviews)와 AI 모드에 적용되는 기본기로 중요한 내용을 텍스트 형태로 제공하라고 안내합니다.
어떤 경우에 자바스크립트가 문제가 되나요?
본문, 링크, 제목 같은 핵심 요소가 자바스크립트 실행 뒤에만 생기는 경우에 문제가 될 수 있습니다.
구글은 일반적으로 href 속성이 있는 a 태그 링크만 크롤링할 수 있습니다. 클릭 이벤트로만 동작하는 링크는 사람에게는 문제없이 보여도 크롤러에게는 길이 끊긴 것과 같을 수 있습니다.
또한 구글은 모바일 우선 색인을 쓰므로 스마트폰 크롤러가 본 모바일 버전의 콘텐츠가 기준이 됩니다. 모바일 화면에서만 내용이 생략되는 구조도 함께 점검해야 합니다.
- 첫 응답 HTML에는 빈 틀만 있고 본문은 실행 후에 채워지는 경우
- 메뉴와 목록이 a 태그의 href 없이 클릭 이벤트로만 이동하는 경우
- 제목과 메타 설명, 구조화 데이터가 실행 후에만 삽입되는 경우
- 버튼을 누르거나 스크롤해야 불러오는 영역에 핵심 정보가 있는 경우
자바스크립트 사이트는 어떻게 대응하면 되나요?
서버 렌더링이나 사전 렌더링으로 핵심 콘텐츠를 첫 응답 HTML에 포함하는 것이 기본 대응입니다.
서버 렌더링은 서버가 완성된 HTML을 만들어 보내는 방식이고, 사전 렌더링은 미리 만들어 둔 HTML 파일을 보내는 방식입니다. 두 방식 모두 크롤러가 자바스크립트를 실행하지 않아도 본문을 읽을 수 있게 합니다. 사이트 전체를 바꾸기 어렵다면 검색 유입이 중요한 페이지부터 적용하는 방법도 있습니다.
자바스크립트를 쓰지 말라는 뜻은 아닙니다. 화면 전환이나 상호작용은 자바스크립트로 처리하되, 검색엔진최적화(SEO)와 답변엔진최적화(AEO)에 필요한 본문, 제목, 링크는 HTML에 먼저 담아 두는 구성이 일반적입니다.
본문이 HTML에 들어 있는지 어떻게 확인하나요?
브라우저의 페이지 소스 보기와 서치 콘솔의 URL 검사 도구로 확인할 수 있습니다.
페이지 소스 보기는 서버가 처음 보낸 HTML을 보여 줍니다. 여기에서 본문의 핵심 문장을 찾았을 때 나오지 않는다면 그 내용은 자바스크립트 실행 뒤에 만들어지는 것입니다. 서치 콘솔의 URL 검사 도구에서는 구글이 받은 HTML과 색인 상태를 확인할 수 있습니다.
자주 묻는 질문
싱글 페이지 애플리케이션(SPA)은 SEO가 불가능한가요?
불가능하지 않습니다. 구글은 자바스크립트를 렌더링해 색인할 수 있고, 서버 렌더링을 함께 쓰면 다른 크롤러도 본문을 읽을 수 있습니다. 다만 구글은 색인을 보장하지 않으므로 URL 검사 도구로 실제 처리 결과를 확인하는 것이 좋습니다.
렌더링 대기 때문에 색인이 얼마나 늦어지나요?
정해진 시간은 이 글에서 단정할 수 없습니다. 구글은 렌더링이 대기열에서 나중에 처리될 수 있다고 설명합니다. 새 글이 빨리 반영되어야 하는 사이트라면 본문을 첫 응답 HTML에 담아 렌더링 단계에 의존하지 않는 편이 좋습니다.
이미지 안에 넣은 글자도 읽히나요?
구글은 중요한 내용을 텍스트 형태로 제공하고 고품질 이미지와 동영상은 이를 보완하는 용도로 쓰라고 안내합니다. 이미지 속 글자에만 핵심 정보가 있으면 크롤러가 놓칠 수 있으므로 같은 내용을 본문 텍스트로도 적어 두는 것이 좋습니다.
이 글의 핵심 엔티티
- 검색엔진최적화(SEO) ( 개념·서비스 )
- 검색엔진이 콘텐츠를 이해하도록 돕고 사용자가 검색으로 사이트를 찾도록 돕는 작업입니다. 공식 자료: 검색엔진최적화(SEO)
- 구글(Google) ( 조직 )
- 구글 검색과 AI 개요·AI 모드를 운영하는 기업으로, 검색 센터에서 공식 SEO 가이드를 제공합니다. 공식 자료: 구글(Google)
- ChatGPT ( 개념·서비스 )
- OpenAI가 만든 대화형 AI 서비스로, 웹 검색 결과를 인용해 답하는 검색 기능을 제공합니다. 공식 자료: ChatGPT
- 클로드(Claude) ( 개념·서비스 )
- Anthropic이 만든 대화형 AI 서비스입니다. 공식 자료: 클로드(Claude)
- 퍼플렉시티(Perplexity) ( 조직 )
- 출처를 함께 보여 주는 AI 검색 서비스를 운영하는 기업으로, PerplexityBot과 Perplexity-User를 운영합니다. 공식 자료: 퍼플렉시티(Perplexity)
- robots.txt ( 개념·서비스 )
- 크롤러가 사이트의 어떤 주소에 접근할 수 있는지 알려 주는 파일로, RFC 9309로 표준화되었습니다. 공식 자료: robots.txt
- 생성형엔진최적화(GEO) ( 개념·서비스 )
- 생성형 AI가 여러 출처를 종합해 만드는 답변에서 콘텐츠와 브랜드가 더 잘 보이고 인용되도록 하는 작업입니다. 공식 자료: 생성형엔진최적화(GEO)
- AI 개요(AI Overviews) ( 개념·서비스 )
- 구글 검색 결과에서 AI가 여러 출처를 요약해 링크와 함께 보여 주는 기능입니다. 공식 자료: AI 개요(AI Overviews)
- AI 모드(AI Mode) ( 개념·서비스 )
- 구글 검색에서 후속 질문과 복잡한 비교를 대화형으로 처리하는 AI 검색 기능입니다. 공식 자료: AI 모드(AI Mode)
- 구조화 데이터 ( 개념·서비스 )
- 페이지 내용을 표준 형식으로 분류해 검색엔진에 알려 주는 데이터로, 대부분 schema.org 어휘를 씁니다. 공식 자료: 구조화 데이터
- 답변엔진최적화(AEO) ( 개념·서비스 )
- 질문에 검색엔진과 AI가 하나의 답으로 제시할 수 있도록 콘텐츠와 정보 구조를 설계하는 작업입니다.
- 구글 서치 콘솔 ( 개념·서비스 )
- 구글 검색에서의 클릭수·노출수·색인 상태를 확인하는 구글의 무료 도구입니다. 공식 자료: 구글 서치 콘솔