현대 웹 개발은 React, Vue, Angular와 같은 자바스크립트 프레임워크로 크게 이동했습니다. 이러한 프레임워크는 환상적이고 앱과 같은 사용자 경험을 제공하지만, 올바르게 구성되지 않으면 검색 엔진에 상당한 장벽을 만들 수 있습니다.
핵심 문제는 렌더링(Rendering)입니다. Googlebot은 똑똑하지만 인간 사용자는 아닙니다. 콘텐츠가 브라우저의 자바스크립트 실행에 전적으로 의존하는 경우 보이지 않을 위험이 있습니다.
1. 문제: 클라이언트 사이드 렌더링 (CSR)
기본적으로 대부분의 단일 페이지 애플리케이션(SPA)은 클라이언트 사이드 렌더링을 사용합니다.
작동 방식:
서버는 거의 비어 있는 HTML 파일(종종 <div id="root">만 있음)을 보냅니다. 그런 다음 브라우저는 대용량 자바스크립트 번들을 다운로드하고 실행하여 페이지에 콘텐츠를 채웁니다.
Google이 보는 것:
Googlebot이 URL을 처음 크롤링할 때 빈 HTML 껍데기만 봅니다.
위험:
Google은 자바스크립트를 실행할 수 있지만 엄청난 처리 능력이 필요합니다. 따라서 Google은 이 프로세스를 연기합니다.
- 첫 번째 물결 (크롤링): Google은 빈 껍데기를 봅니다.
- 대기열: 페이지는 몇 시간 또는 며칠 동안 "렌더링 대기열"에 있습니다.
- 두 번째 물결 (렌더링): Google은 마침내 JS를 실행하여 콘텐츠를 봅니다.
결론: 순수 CSR은 렌더링 시간이 초과되면 인덱싱이 지연되고 콘텐츠가 누락될 수 있습니다.
2. 해결책: 서버 사이드 렌더링 (SSR) 및 SSG
Google이 콘텐츠를 즉시 볼 수 있도록 하려면 렌더링 프로세스를 사용자의 브라우저에서 서버(또는 빌드 시간)로 이동해야 합니다.
A. 서버 사이드 렌더링 (SSR)
작동 방식: 봇(또는 사용자)이 페이지를 요청하면 서버가 자바스크립트를 실행하고 전체 HTML 문자열을 빌드하여 완전히 채워진 페이지를 브라우저로 보냅니다.
- 이점: Googlebot은 초기 HTML 응답에서 전체 콘텐츠(텍스트, 링크, 메타데이터)를 봅니다. 인덱싱은 즉시 이루어집니다.
- 프레임워크:
- React: Next.js 또는 Remix를 사용하세요.
- Vue: Nuxt.js를 사용하세요.
- Angular: Angular Universal을 사용하세요.
B. 정적 사이트 생성 (SSG)
작동 방식: 빌드 시간(배포 전)에 모든 HTML 페이지를 생성합니다. 서버는 간단한 정적 HTML 파일을 제공합니다.
- 이점: 매우 빠른 성능(코어 웹 바이탈에 적합)과 완벽한 SEO.
- 사용 사례: 블로그, 마케팅 사이트 및 pSEO 프로젝트("pSEO Wizard"와 같은).
- 프레임워크: Next.js, Gatsby, Astro.
비교: CSR vs. SSR vs. SSG
| 기능 | CSR (클라이언트 사이드) | SSR (서버 사이드) | SSG (정적) |
|---|---|---|---|
| 초기 HTML | 비어 있음 (로딩 중...) | 전체 콘텐츠 | 전체 콘텐츠 |
| SEO 친화성 | 낮음 / 위험함 | 높음 | 높음 |
| 서버 부하 | 낮음 | 높음 | 낮음 |
| 가장 적합함 | 대시보드, 비공개 앱 | 동적 피드, 소셜 네트워크 | 블로그, 문서, 랜딩 페이지 |
3. JS SEO를 위한 중요한 모범 사례
SSR을 사용하더라도 개발자는 종종 인덱싱에 해를 끼치는 실수를 저지릅니다.
A. 실제 링크 사용 (<a href>)
Googlebot은 링크를 따라 새로운 페이지를 발견합니다.
- 나쁨:
<div onClick={goToPage}>제품</div>(Googlebot은 클릭하지 않음). - 좋음:
<a href="/product">제품</a>(Googlebot은 이를 따름).
참고: Next.js와 같은 프레임워크에서는 기본 <a> 태그를 렌더링하는 <Link> 컴포넌트를 사용하세요.
B. 메타데이터 관리 (<head>)
단일 페이지 앱에서 <title> 및 <meta> 태그는 종종 모든 페이지에서 정적으로 유지됩니다(예: "내 앱").
해결책: 각 경로에 대해 동적 메타데이터를 주입해야 합니다.
- React: react-helmet 또는 Next.js Metadata API를 사용하세요.
- Vue: vue-meta를 사용하세요.
확인: 페이지 간을 이동할 때 브라우저 탭에서 제목이 변경되는지 확인하세요.
C. 리소스를 차단하지 마세요
robots.txt 파일이 자바스크립트(.js) 또는 CSS(.css) 파일을 차단하지 않도록 하세요. Google은 페이지를 올바르게 렌더링하기 위해 이러한 파일에 액세스해야 합니다.
4. JS 앱 테스트 방법
절대 추측하지 마세요. 항상 Google이 보는 것을 확인하세요.
- Google Search Console (URL 검사): URL을 입력하고 "Test Live URL"을 클릭하세요. "View Tested Page" > "Screenshot"을 클릭하세요. 결과: 스크린샷이 비어 있거나 로딩 스피너가 표시되면 Google이 콘텐츠를 볼 수 없습니다. 텍스트가 보이면 안전합니다.
- 리치 결과 테스트 (Rich Results Test): 이 도구는 실제 Google 렌더링 엔진을 실행합니다. 스키마 마크업을 감지할 수 있다면 일반적으로 페이지를 성공적으로 렌더링했음을 의미합니다.
- Chrome에서 자바스크립트 비활성화: 브라우저 확장 프로그램을 사용하여 JS를 끄세요. 페이지를 새로 고칩니다. 화면이 비어 있으면 전적으로 CSR에 의존하는 것입니다.
결론
현대 SEO의 경우 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG)이 표준입니다. Google은 클라이언트 사이드 렌더링 앱을 인덱싱할 수 있지만, 이에 의존하는 것은 순위를 놓고 룰렛을 하는 것과 같습니다. Next.js 또는 Nuxt와 같은 프레임워크를 사용하면 검색 엔진에 원하는 것, 즉 빠르고 액세스 가능하며 완전히 렌더링된 HTML을 정확하게 제공할 수 있습니다.