JavaScript와 SEO: 렌더링과 색인
9 min
Google은 JavaScript를 렌더링할 수 있지만 사이트 권위에 따라 몇 초에서 수 주의 지연이 있습니다. 주요 콘텐츠(메인 텍스트, 링크, 구조화 데이터)는 표시를 위해 JavaScript에 의존해서는 안 됩니다. Server-Side Rendering(SSR)이나 프리렌더링이 권장 솔루션입니다.
현대 JavaScript 프레임워크(React, Vue, Angular, Next.js)는 웹 개발을 지배합니다. 그러나 SEO와의 관계는 복잡합니다: Google이 JS 렌더링에서 발전했지만 부분적이거나 지연된 색인의 위험은 실제적이고 비용이 많이 듭니다.
Google이 JavaScript를 처리하는 방법
Googlebot은 페이지의 초기 HTML을 다운로드한 다음 JavaScript 렌더링을 대기열(WRS - Web Rendering Service)에 넣습니다. 완전한 렌더링은 사이트의 인기도와 엔진 부하에 따라 몇 초, 며칠 또는 심지어 몇 주 후에 발생할 수 있습니다.
이 렌더링 지연은 JS 전용 콘텐츠가 정적 HTML 콘텐츠보다 항상 늦게 색인됨을 의미합니다. 낮은 권위를 가진 사이트에서 일부 콘텐츠는 절대 올바르게 렌더링되지 않을 수 있습니다.
색인에 대한 구체적인 위험
사용자 상호작용(클릭, 스크롤, 탭) 이후에만 표시되는 콘텐츠는 Googlebot에게 절대 보이지 않습니다. FAQ 아코디언, 콘텐츠 탭, 마우스오버 콘텐츠가 가장 일반적인 경우입니다.
JavaScript에 의해 동적으로 생성된 링크는 Googlebot이 항상 따르지는 않습니다. 내부 링크 구조가 페이지 로드 후 생성된 링크에 의존한다면 아키텍처의 일부가 크롤러에게 보이지 않습니다.
- 클릭 또는 호버 이벤트 뒤의 콘텐츠: 색인되지 않음.
- HTML 폴백 없는 순수 JS 햄버거 메뉴의 링크: 잠재적으로 무시됨.
- JS를 통해 주입된 JSON-LD 구조화 데이터: 지연된 렌더링, 리치 결과 자격 지연.
- 클라이언트 측에서 생성된 메타 태그: 첫 번째 크롤 시 title과 description이 잠재적으로 부재.
- 전용 URL 없이 AJAX를 통해 로드된 페이지네이션 텍스트: 보이지 않는 콘텐츠.
권장 솔루션
Server-Side Rendering(SSR)은 완전한 HTML을 브라우저로 보내기 전에 서버에서 생성합니다. Googlebot은 JavaScript 렌더링을 기다리지 않고 첫 번째 크롤에서 풍부한 HTML을 받습니다. Next.js, Nuxt.js, SvelteKit은 기본적으로 SSR을 제공합니다.
Static Site Generation(SSG)은 각 빌드마다 페이지를 미리 생성합니다. SSR보다 더 빠르지만 자주 업데이트되지 않는 콘텐츠에만 적합합니다.
SSR 리팩토링이 불가능하다면 Rendertron이나 Prerender.io 같은 서비스를 통한 프리렌더링이 Googlebot을 감지하고 미리 렌더링된 정적 HTML 버전을 제공합니다.
SPA(단일 페이지 애플리케이션) 아키텍처에서 SSR로 마이그레이션한 사이트는 마이그레이션 후 60일 내에 색인된 페이지 수가 평균 20~50% 개선됩니다.
2025-2026년 SSR 마이그레이션 및 색인 부문별 연구
사이트에서 JS 렌더링 문제 진단
Search Console의 URL 검사 도구는 Googlebot이 페이지를 보는 방식의 스크린샷을 제공합니다. 이 스크린샷을 브라우저의 실제 표시와 비교하세요: 어떤 차이도 렌더링 문제를 드러냅니다.
Chrome에서 JavaScript를 비활성화하여 테스트하세요(DevTools > Settings > Debugger > Disable JavaScript): 페이지에 아무것도 표시되지 않거나 네비게이션 링크가 손실된다면 해결해야 할 중요한 SEO 문제가 있습니다.
FAQ
Google이 SPA(단일 페이지 애플리케이션)를 올바르게 색인할 수 있나요?
네, 하지만 제한과 지연이 있습니다. SPA의 콘텐츠는 JavaScript 렌더링 후 색인되며, 이는 수 주가 걸릴 수 있습니다. 경쟁적인 사이트에서 이 지연은 실제 불이익입니다. SSR이나 프리렌더링이 가장 신뢰할 수 있는 솔루션입니다.
Next.js가 SEO에 좋은 선택인가요?
네, 시장에서 가장 SEO 친화적인 프레임워크 중 하나입니다. 기본적으로 SSR, SSG, ISR(증분 정적 재생성)을 제공합니다. 메타 태그, 사이트맵, 구조화 데이터를 복잡한 설정 없이 서버 측에서 생성할 수 있습니다.
탭이나 아코디언의 콘텐츠가 색인되나요?
Google은 CSS로 숨겨진 콘텐츠(display:none 또는 visibility:hidden)를 색인할 수 있지만 가중치가 낮다고 명시합니다. JavaScript 상호작용 뒤의 콘텐츠는 더 문제적입니다. FAQ나 핵심 정보는 기본 HTML details/summary로 표시하거나 초기 HTML에 콘텐츠가 있는지 확인하세요.
모든 봇에 대해 JavaScript를 호환하게 해야 하나요, 아니면 Google만?
Google은 JavaScript를 적극적으로 렌더링하는 유일한 검색 엔진입니다. Bing은 발전하고 있지만 뒤처져 있습니다. 청중이 주로 Google에서 온다면 Googlebot 호환성에 집중하세요. SSR 아키텍처는 자동으로 모든 봇에 혜택을 줍니다.