JavaScript SEO: 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을 전송하세요 — 그러면 렌더러의 대기열이 아니라 내 일정에 맞춰 수정된 버전이 반영됩니다.

프레임워크별 참고 사항

• 클라이언트 측 React 앱: 일반적인 싱글 페이지 앱은 거의 비어 있는 HTML 셸만 전송합니다. 순위에 올라야 하는 페이지에는 서버 렌더링이나 정적 생성을 지원하는 프레임워크를 사용하세요.
• Next.js와 Nuxt: 서버 렌더링과 정적 생성은 기본적으로 콘텐츠를 초기 HTML에 포함합니다. 클라이언트 측 effect에서만 로드되는 중요한 콘텐츠가 없는지 주의하세요.
• Angular와 Vue: Angular의 서버 측 렌더링이나 Vue용 Nuxt를 사용해, 페이지가 HTML에 콘텐츠를 이미 담은 상태로 전달되도록 하세요.
• 무한 스크롤: 크롤러가 첫 화면 이후의 항목에도 도달할 수 있도록, 독립적으로 로드되는 페이지별 URL과 함께 사용하세요.

오늘 바로 해 볼 수 있는 간단한 테스트

페이지를 열고 '검사'가 아닌 '페이지 소스 보기'를 선택한 다음, 주요 콘텐츠의 문장 하나와 내부 링크 URL 몇 개를 검색해 보세요. 소스에 없다면 JavaScript에 의존하고 있는 것입니다. 그런 다음 무료 색인 가능성 검사를 실행해 페이지가 200을 반환하는지, noindex로 설정되어 있지 않은지, 캐노니컬이 올바른지 확인하세요.