이 글에서 배울 수 있는 것
- ✓ JavaScript SEO 문제가 왜 생기는지
- ✓ 구글의 2단계 렌더링 구조
- ✓ SPA가 검색에서 사라지는 대표 증상 3가지
- ✓ 우리 사이트를 직접 확인하는 방법
- ✓ SSR·프리렌더링 등 해결책 4가지
① JavaScript SEO 문제란
React, Vue, Angular 같은 프레임워크로 만든 SPA(Single Page Application)는 서버가 빈 HTML 뼈대만 보내고, 실제 콘텐츠는 브라우저가 JavaScript를 실행해야만 화면에 나타나는 구조입니다. 사람의 눈에는 아무 문제 없이 잘 보이지만, 검색엔진 크롤러 입장에서는 완전히 다른 이야기입니다.
홈페이지를 화려하게 리뉴얼했는데 몇 달째 검색 유입이 늘지 않는다면, 디자인이나 콘텐츠 문제가 아니라 크롤러가 콘텐츠 자체를 보지 못하는 렌더링 문제일 가능성이 높습니다.
⚠️ 흔한 오해
“요즘 구글은 JavaScript를 다 실행하니까 문제없다”는 말은 절반만 맞습니다. 구글은 실행하지만 느리고 제한적이며, 네이버·빙 등 다른 검색엔진은 훨씬 더 취약합니다. 다음 섹션에서 구체적으로 설명합니다.
② 구글의 2단계 색인(Two-Wave Indexing) 구조
구글봇은 페이지를 두 단계로 나눠 처리합니다.
1차 크롤링(HTML 수집)
JavaScript를 실행하지 않은 채 서버가 보낸 원본 HTML만 먼저 수집합니다. SPA는 이 시점에서 빈 뼈대(<div id="root"></div>)만 존재합니다.
2차 렌더링(JavaScript 실행) — 렌더링 큐 대기
서버 자원이 여유로울 때 별도의 렌더링 큐에서 JavaScript를 실행해 실제 콘텐츠를 확인합니다. 이 대기 시간이 수 일에서 수 주까지 걸릴 수 있습니다.
즉, 콘텐츠를 아무리 자주 업데이트해도 구글이 그 변경사항을 실제로 인지하는 시점이 크게 늦어질 수 있습니다. 게다가 이건 구글 얘기고, 네이버·빙 같은 검색엔진은 JavaScript 렌더링 능력이 훨씬 제한적이라 SPA 콘텐츠를 아예 못 읽는 경우도 흔합니다.
③ SPA가 검색에서 사라지는 대표 증상 3가지
증상 1 — 모든 페이지의 제목·설명이 똑같이 나온다
검색 결과에 어떤 페이지를 클릭해도 “홈 | 회사명” 같은 동일한 제목만 표시됩니다. React Router 등으로 클라이언트에서만 라우팅이 바뀌고, <title>과 메타 태그는 최초 로드된 index.html 값 그대로 고정된 경우입니다.
증상 2 — 검색결과 스니펫(요약문)에 콘텐츠가 안 보인다
사이트를 site:도메인.com 키워드로 검색했을 때 페이지는 나오지만 설명 부분이 비어 있거나 엉뚱한 메뉴 텍스트만 나온다면, 크롤러가 실제 본문 콘텐츠까지 도달하지 못했다는 신호입니다.
증상 3 — 새 글을 올려도 몇 주째 색인이 안 된다
구글 서치 콘솔에서 새로 발행한 페이지를 URL 검사했을 때 “색인 생성됨”까지 유독 오래 걸린다면 렌더링 큐 지연이 원인일 수 있습니다. 정적 HTML 사이트는 보통 며칠 내 색인되는 반면, 렌더링 의존 사이트는 수 주가 걸리는 경우가 드물지 않습니다.
⚠️ 특히 위험한 경우
구조화 데이터(JSON-LD)를 JavaScript로 동적 삽입하는 구조라면, 2차 렌더링이 지연되는 동안 리치 스니펫·FAQ 노출 등 AEO 관련 기능이 아예 작동하지 않습니다.
④ 우리 사이트가 이 문제를 겪고 있는지 확인하는 법
방법 1 — 페이지 소스 보기
페이지에서 Ctrl+U(맥 Cmd+Option+U)를 눌러 “페이지 소스 보기”를 실행합니다. 실제로 보이는 텍스트(제목, 본문 등)가 소스 코드에 그대로 존재하면 안전하고, <div id="root"></div>처럼 빈 컨테이너만 있다면 SPA 렌더링 문제일 가능성이 높습니다.
방법 2 — JavaScript를 끄고 접속해보기
브라우저 개발자 도구(F12) → 설정에서 JavaScript를 비활성화한 뒤 사이트를 새로고침합니다. 화면이 텅 비어 있다면 검색엔진도 같은 어려움을 겪습니다.
방법 3 — 자동 진단 도구 활용
더 빠른 방법
알아서 무료 진단은 사이트 HTML을 수집할 때 본문 텍스트 분량과 SPA 전용 컨테이너 패턴을 분석해 SPA 여부를 자동으로 감지합니다. 감지되면 진단 결과 상단에 별도 경고로 표시됩니다.
⑤ 해결책 4가지
| 방식 | 동작 원리 | 적합한 경우 |
|---|---|---|
| SSR (서버사이드 렌더링) | 요청이 올 때마다 서버가 완성된 HTML을 생성해 전달 | 콘텐츠가 자주 바뀌는 사이트 (쇼핑몰, 커뮤니티) |
| SSG (정적 사이트 생성) | 빌드 시점에 모든 페이지를 미리 HTML로 생성 | 콘텐츠 변경이 적은 사이트 (기업 소개, 블로그) |
| 프리렌더링(Prerendering) | 배포 후 봇 방문 시 미리 렌더링된 스냅샷을 제공 | 기존 SPA 구조를 크게 바꾸기 어려운 경우 |
| 다이나믹 렌더링 | 일반 사용자는 SPA, 봇에게는 서버 렌더링 HTML 제공 | 레거시 SPA의 임시 응급 조치 |
가장 근본적인 해결책은 SSR 또는 SSG입니다. 프리렌더링과 다이나믹 렌더링은 구조를 크게 바꾸기 어려운 상황에서 쓰는 임시방편에 가깝고, 구글도 다이나믹 렌더링을 “장기적 해결책이 아닌 임시 대안”으로 안내하고 있습니다.
신규 제작 시 팁
새로 홈페이지를 만든다면 처음부터 SSR·SSG를 지원하는 프레임워크를 선택하는 것이 유지보수 관점에서 가장 효율적입니다. 기존 순수 CSR(Create React App 등) 사이트를 뒤늦게 SSR로 전환하는 작업은 비용과 시간이 상당히 큽니다.
⑥ 프레임워크별 권장 전략
React 기반
- Next.js — SSR·SSG를 모두 지원하는 가장 표준적인 선택. 신규 프로젝트에 우선 권장
- 순수 React(Create React App 등) — 기본적으로 CSR만 지원하므로 SEO가 중요한 페이지는 별도 대응 필요
Vue 기반
- Nuxt.js — Vue의 Next.js에 해당하는 SSR·SSG 프레임워크
- 순수 Vue(Vue CLI) — React와 마찬가지로 기본은 CSR
정적 콘텐츠 중심 사이트
- Gatsby, Astro — 블로그·기업소개 등 콘텐츠 변경이 적은 사이트에 적합한 SSG 전문 프레임워크
알아서(Alaseo)에서 제작하는 홈페이지는 기본적으로 정적 HTML 또는 SSR 구조로 제작해 이런 렌더링 문제 자체가 발생하지 않도록 합니다. 기존에 순수 React·Vue SPA로 제작된 사이트를 운영 중이라면, 전체 재구축 전에 프리렌더링 적용만으로도 상당 부분 개선이 가능합니다.
⑦ 자주 묻는 질문 (FAQ)
React나 Vue로 만든 사이트는 무조건 SEO에 불리한가요?
프레임워크 자체가 문제는 아닙니다. 클라이언트 사이드 렌더링(CSR)만 사용해 브라우저에서 JavaScript를 실행해야만 콘텐츠가 나타나는 구조가 문제입니다. Next.js·Nuxt.js처럼 서버사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 지원하는 프레임워크를 사용하면 React·Vue를 그대로 쓰면서도 SEO 문제를 해결할 수 있습니다.
구글은 JavaScript를 실행할 수 있다는데 왜 문제가 되나요?
구글봇은 JavaScript를 실행할 수 있지만 2단계 색인(Two-Wave Indexing) 방식을 씁니다. 1차로 HTML을 먼저 수집하고, 렌더링 큐에서 리소스 여유가 생길 때 2차로 JavaScript를 실행합니다. 이 2차 렌더링이 수 일에서 수 주까지 걸릴 수 있고, 네이버·빙 등 다른 검색엔진은 자바스크립트 실행 능력이 구글보다 제한적입니다.
우리 사이트가 SPA 렌더링 문제를 겪고 있는지 어떻게 확인하나요?
가장 쉬운 방법은 브라우저에서 JavaScript를 끄고 페이지를 열어보거나, 페이지 소스 보기(Ctrl+U)로 실제 HTML에 콘텐츠가 있는지 확인하는 것입니다. 또는 알아서(Alaseo) 무료 진단 도구에 URL을 입력하면 SPA 여부를 자동으로 감지해 알려줍니다.