JavaScript·SPA 사이트 SEO — “되긴 되지만 비싸다”
목차
React·Vue·Angular로 만든 SPA(Single Page Application)는 검색엔진에 색인되긴 합니다. 단, 일반 HTML보다 훨씬 비쌉니다. 검색로봇이 자바스크립트를 실행하는 데 리소스가 많이 들어 우선순위에서 밀리거나 색인이 늦어질 수 있습니다. 핵심은 가능하면 SSR/SSG, 안 되면 적어도 핵심 콘텐츠는 정적 HTML입니다.
핵심 메시지
- 네이버·구글 모두 SPA 색인을 지원은 합니다.
- 하지만 일반 HTML보다 수 배의 리소스가 들고, 색인이 보장되지 않습니다.
- 검색로봇이 자바스크립트 수집을 뒤로 미루거나 거를 수 있습니다.
→ 결론: 가능하면 서버 렌더링(SSR) 또는 정적 생성(SSG)을 쓰고, 그게 안 되면 핵심 콘텐츠만이라도 첫 HTML 응답에 담으세요.
권장 아키텍처 (안전한 순서)
| 순위 | 방식 | 설명 |
|---|---|---|
| 1 | 정적 HTML | 전통 사이트·정적 사이트 생성기. 가장 안전 |
| 2 | SSR (서버 렌더링) | Next.js·Nuxt·Astro 등. SPA 경험 + 색인 안전성 |
| 3 | SSG (정적 생성) | 빌드 시 HTML 미리 생성 |
| 4 | 하이브리드 | 핵심 페이지만 SSR/SSG, 인터랙션만 클라이언트 |
| 5 | 순수 CSR SPA | 마지막 선택지. 색인을 운에 맡김 |
일반 소개형 홈페이지(기업·병원 등)는 SPA 자체가 오버엔지니어링인 경우가 많습니다. 정적 사이트나 서버 렌더링이면 이 고민에서 거의 자유롭습니다. 워드프레스(PHP 서버 렌더링)도 이미 SSR이라 안전합니다.
색인 안전 체크리스트
라우팅
- [ ] History API 기반 permalink 사용 (
/about,/products/foo) - [ ] Fragment 라우팅 금지 (
#/about) - [ ] 해시뱅 금지 (
#!/about) - [ ] 각 라우트가 독립 URL로 직접 접근 가능
콘텐츠
- [ ] 핵심 콘텐츠가 첫 HTML 응답에 포함 (SSR/프리렌더)
- [ ] 메타 정보(title·description·OG·schema)를 라우트별로 다르게 출력
- [ ] 자바스크립트 실행 전에도 fallback 콘텐츠 노출
robots·리소스
- [ ]
robots.txt에서 JS·CSS를 막지 말 것 — 검색로봇 렌더링에 필요 - [ ] 외부 도메인 JS도 robots 허용
- [ ] JS 파일 URL에 매번 바뀌는 해시 강제 X (로봇 캐시 무력화)
링크
- [ ] 내부 이동은
<a href>사용 (Next.js<Link>등도 결국<a>출력) - [ ]
<span onClick>같은 JS 전용 이동 금지
검색로봇이 SPA를 처리하는 흐름
네이버 Yeti 봇 기준으로, 검색로봇은 이렇게 동작합니다:
- 자바스크립트 사용 페이지 발견 → JS 수집 여부 판단
- JS 미수집 시 → 정적 HTML만 먼저 색인 (1차 색인)
- JS를 별도 수집해 렌더링 서버에 저장
- 재방문 시 JS 포함 렌더링 → 콘텐츠 변경 분석
- 색인 업데이트 여부 결정 (보장 안 됨)
핵심: 정적 HTML이 색인의 1차 자원입니다. 그래서 SSR이 가장 안전한 것입니다. 콘텐츠가 JS 실행 후에야 나타나면, 1차 색인에서 빈 페이지로 잡힐 수 있습니다.
어떤 경우에 신경 써야 하나
- 워드프레스·정적 사이트: 이미 서버/정적 렌더링이라 거의 자유로움
- React/Vue로 만든 SPA: 본 가이드 전체가 해당
- 헤드리스 구성 (WP REST API + Next.js 등): SSR 설정 필수
- 일반 소개형 사이트: SPA 도입 자체를 재고. 정적/SSR이 더 적합
자주 하는 실수
- 순수 CSR SPA로 소개형 사이트 제작: 색인 위험을 자초
- robots.txt에서 JS·CSS 차단: 검색로봇이 렌더링 못 함 → 빈 페이지로 색인
- 라우트별 메타가 동일: 모든 페이지 title이 같으면 개별 색인 약화
- 해시 라우팅(
#/): 검색엔진이 한 페이지로 인식 - JS 실행 후에만 콘텐츠 등장: 1차 색인에서 누락
FAQ
Q. 우리는 워드프레스인데 이 가이드가 필요한가요?
A. 거의 필요 없습니다. 워드프레스는 PHP 서버 렌더링이라 이미 색인에 안전합니다. 다만 헤드리스(WP + React)로 가거나, 무거운 JS 페이지 빌더를 쓸 때는 일부 점검이 필요합니다.
Q. 구글은 JS를 잘 읽는다던데 사실인가요?
A. 구글은 비교적 잘 읽지만 렌더링이 지연될 수 있고, 네이버는 더 보수적입니다. 국내 사이트라면 네이버 기준으로 안전하게 가는 게 좋습니다.
Q. SSR이 꼭 필요한가요?
A. 콘텐츠가 검색에 중요하다면 강력 권장합니다. 사내 관리도구처럼 검색 노출이 필요 없는 앱이라면 순수 SPA도 괜찮습니다. 검색이 중요하면 SSR/SSG입니다.
Q. 정적 사이트 생성기(Astro 등)도 SEO에 좋나요?
A. 매우 좋습니다. 빌드 시 HTML을 미리 만들어두므로 검색로봇이 1차 색인에서 바로 완전한 콘텐츠를 읽습니다. 속도도 빨라 유리합니다.
관련 가이드
- 검색 친화적 URL 설계
- 기술 SEO 체크리스트
- Core Web Vitals + 모바일
- 구조화 데이터(schema) 입문
- 홈페이지 제작 서비스 안내 — 제작 단계에서 SEO 기본 구성이 어떻게 반영되는지 확인할 수 있습니다