SPA도 구글 검색에 잘 노출될 수 있나요?
SPA도 검색에 노출될 수 있지만, 구글봇이 콘텐츠와 링크를 안정적으로 발견하고 렌더링할 수 있어야 합니다. 문제는 브라우저에서는 정상으로 보여도 검색엔진이 보는 HTML에는 본문·링크·메타 정보가 부족한 경우가 있다는 점입니다.
SPA란 하나의 HTML 진입점에서 자바스크립트가 화면 전환과 콘텐츠 표시를 처리하는 웹 애플리케이션 구조입니다.
SPA에서 색인이 새는 대표 패턴
SPA 색인 문제는 ‘보이는 것’과 ‘크롤러가 수집하는 것’의 차이에서 발생합니다. 특히 제품 페이지, 블로그, 문서 페이지처럼 검색 유입이 중요한 URL은 렌더링 방식 점검이 필요합니다.
| 증상 | 가능한 원인 |
|---|---|
| URL은 있는데 검색에 안 나옴 | 내부 링크를 JS 이벤트로만 처리 |
| 제목·설명이 엉뚱함 | 라우트별 meta 태그 미설정 |
| 본문 일부만 색인 | API 응답 지연 또는 렌더링 실패 |
| 중복 URL 증가 | canonical·라우팅 규칙 미정리 |
SSR, SSG, CSR은 무엇이 다른가요?
SSR은 서버가 요청 시 HTML을 생성하고, SSG는 빌드 시 HTML을 미리 생성하며, CSR은 브라우저에서 JS가 화면을 구성합니다. 검색 유입이 중요한 페이지는 크롤러가 초기 HTML에서 충분한 정보를 얻을 수 있는 SSR 또는 SSG 구성이 유리한 경우가 많습니다.
| 방식 | 특징 | SEO 점검 포인트 |
|---|---|---|
| CSR | 클라이언트에서 렌더링 | 렌더링 가능 여부, 내부 링크 노출 |
| SSR | 요청 시 서버 렌더링 | 응답 속도, 캐싱, 상태 코드 |
| SSG | 빌드 시 정적 생성 | 갱신 주기, sitemap 반영 |
개발팀이 바로 확인할 테스트 방법
먼저 브라우저에서 보이는 화면이 아니라 ‘초기 HTML’과 ‘렌더링 후 DOM’을 비교해야 합니다. 또한 구글봇이 접근 가능한 리소스인지, API 응답이 인증·지역·쿠키 조건에 묶이지 않았는지도 확인해야 합니다.
view-source:로 초기 HTML 확인- Search Console URL 검사에서 렌더링된 HTML 확인
- robots.txt로 JS·CSS 차단 여부 확인
- 라우트별 title, description, canonical 검증
- 내부 링크가 실제
<a href>로 노출되는지 확인
스택메트릭 랩은 SPA·헤드리스 환경에서 생기는 색인 누수를 렌더링, 라우팅, 로그 데이터로 분리해 진단하고 개발 이슈로 넘길 수 있게 정리합니다.
