JavaScript SEO: Google이 JS로 렌더링되는 페이지를 확실히 색인하도록 하는 방법

색인은 두 단계로 이루어집니다

Googlebot은 먼저 원본 HTML을 가져오며, 이 초기 응답에 이미 존재하는 콘텐츠는 거의 즉시 색인할 수 있습니다. JavaScript가 실행된 후에만 나타나는 콘텐츠는 렌더링이라는 2차 처리 대기열에 들어가며, 이는 별도의 리소스를 사용하고 초기 크롤링보다 몇 초에서 크롤링 자원이 제한된 사이트에서는 훨씬 더 오래 지연될 수 있습니다. 콘텐츠나 내부 링크가 이 2차 처리 이후에만 존재한다면, 색인 자체가 더 느리고 불확실한 경로에 의존하게 되는 것입니다.

실제로 색인을 망가뜨리는 것

• 클라이언트 측 요청 이후에만 렌더링되는 주요 콘텐츠나 내부 링크로, 초기 HTML에는 의미 있는 내용이 전혀 없는 경우입니다.
• 클릭, 스크롤, 호버 등 사용자 동작 뒤에 숨겨진 콘텐츠로, Googlebot이 이런 동작을 수행할 이유가 없는 경우입니다.
• 페이지가 올바르게 렌더링되기 위해 필요한 JS나 CSS 파일이 robots.txt에 차단된 경우입니다. 차단이 어떻게 역효과를 낳는지는 robots.txt와 noindex의 차이를 참고하세요.
• 실제 HTTP 상태를 절대 바꾸지 않는 클라이언트 측 라우팅입니다 — 깨진 경로가 200을 반환하면서도 빈 화면이나 찾을 수 없음 메시지를 표시할 수 있으며, 이는 소프트 404로 나타납니다.
• 헤드리스 브라우저 환경에서만 발생해 일반적인 수동 테스트에서는 눈치채지 못하고 지나가는 하이드레이션이나 렌더링 오류입니다.

Google이 실제로 보는 것을 확인하는 방법

Search Console의 URL 검사 도구에는 원본 응답뿐 아니라 Google 렌더러가 실행된 후의 렌더링된 HTML과 스크린샷을 보여주는 "테스트된 페이지" 보기가 있습니다. 이를 소스 HTML과 비교해 보세요: 중요한 콘텐츠나 링크가 원본 응답에는 없지만 렌더링 후에는 존재한다면, 빠른 초기 크롤링이 아니라 렌더링 대기열에 전적으로 의존하고 있는 것입니다.

실제로 도움이 되는 것

• SEO에 중요한 콘텐츠와 내비게이션 링크는 로드 후 클라이언트 측에서 가져오지 말고 서버에서 렌더링하거나(또는 정적으로 생성)하세요.
• 내부 링크에는 앵커가 아닌 요소의 클릭 핸들러가 아니라 실제 <a href> 요소를 사용하세요 — Googlebot은 임의의 JavaScript 이벤트 바인딩이 아니라 href를 따라갑니다.
• 페이지 렌더링에 필요한 JS/CSS 번들을 차단하지 마세요 — Google이 페이지를 렌더링하려면 이 파일들을 가져와야 합니다.
• 페이지를 수정한 후에는 다음 렌더링 처리를 그냥 기다리지 말고, 직접 재색인을 요청하거나 IndexNow를 통해 URL을 전송하세요 — 그러면 렌더러의 대기열이 아니라 내 일정에 맞춰 수정된 버전이 반영됩니다.