JavaScript SEO는 JavaScript로 만들어지는 URL, 본문, 링크와 검색 설정을 검색엔진이 제대로 처리하는지 확인하고 고치는 기술 SEO 작업입니다. React나 Vue 사이트는 브라우저에서 코드를 실행한 뒤 본문이 나타날 수 있어 초기 HTML과 렌더링 결과를 함께 봐야 합니다. JavaScript 문법 개선이나 분석 태그 설치 자체를 뜻하지는 않습니다.
이 글은 Google 공식 문서와 네이버 공식 문서를 기준으로 작성했습니다.
초기 HTML과 렌더링의 두 단계 처리
Google은 먼저 서버가 보낸 HTML을 읽고, 이후 JavaScript를 실행해 완성된 화면을 다시 확인할 수 있습니다. 처음 받은 문서와 실행 후 화면이 다를 수 있으므로 두 결과를 함께 봐야 합니다.
- Googlebot이 URL에 접속해 서버가 보낸 HTML을 가져옵니다.
- HTML에 들어 있는 링크와 검색 설정을 먼저 확인합니다.
- JavaScript를 실행해 사용자가 보는 화면을 만듭니다.
- 실행 후 나타난 본문과 링크를 다시 확인합니다.
- 확인한 내용을 바탕으로 색인 여부를 판단합니다.
Google이 JavaScript를 실행할 수 있어도 모든 페이지를 사용자와 똑같이 본다고 장담할 수는 없습니다. 필요한 파일이 차단됐거나 API 오류가 나면 렌더링 결과에서 본문이 빠질 수 있습니다.
초기 HTML과 렌더링 결과의 차이 점검
다음 상황을 우선 점검합니다.
- 초기 HTML에는 제목과 본문이 없고 API 호출 후에만 나타나는 경우
- robots.txt가 필요한 JavaScript나 CSS 파일을 막는 경우
- 메뉴와 내부 링크가
a href없이 클릭 이벤트로만 작동하는 경우 - URL의
#뒤 값만 바꿔 서로 다른 콘텐츠를 보여주는 경우 - 오류 페이지가 실제 404가 아니라 200 상태 코드를 반환하는 경우
- JavaScript가 canonical이나 noindex 값을 예상과 다르게 바꾸는 경우
페이지가 브라우저에서 열린다는 사실만으로 검색엔진의 렌더링 결과를 확인한 것은 아닙니다.
서버 렌더링의 위치와 효용
Google은 클라이언트 렌더링 페이지도 처리할 수 있습니다. 따라서 JavaScript 사이트라면 무조건 서버 사이드 렌더링을 써야 한다는 절대 규칙은 없습니다.
서버 렌더링이나 정적 생성을 사용하면 서버가 처음 보내는 HTML에 핵심 내용이 들어갑니다.
사용자에게도 첫 화면이 빠르게 보일 수 있고, JavaScript 실행 능력이 다른 크롤러에도 안정적으로 정보를 제공할 수 있습니다.
AVCD는 검색 유입에 꼭 필요한 제목, 본문과 링크를 초기 HTML에서도 확인할 수 있게 만드는 방식을 권합니다. Google의 절대 요건은 아니지만 크롤러마다 JavaScript 처리 범위가 다른 상황에서 생길 수 있는 위험을 줄일 수 있습니다.
본문을 만드는 방식은 CSR, SSR, SSG로 나눠 볼 수 있습니다.
| 방식 | 처음 전달되는 내용 | 확인할 위험 |
|---|---|---|
| CSR | 빈 틀이나 일부 HTML 뒤에 브라우저가 본문 생성 | API 실패, 실행 지연, 링크와 메타 정보 누락 |
| SSR | 요청할 때 서버가 완성 HTML 생성 | 서버 오류와 느린 응답, 하이드레이션 뒤 값 변경 |
| SSG | 빌드할 때 페이지별 HTML 생성 | 새 데이터가 빌드 전까지 반영되지 않음 |
하이드레이션은 별도의 렌더링 방식이라기보다 SSR이나 SSG로 받은 HTML에 JavaScript 기능을 연결하는 후속 과정입니다. SSR과 SSG를 썼다는 이름만으로 안전한 것은 아닙니다. 하이드레이션 오류가 화면을 지우거나 다른 robots 지시로 바꿀 수 있으므로 실행 전후 값을 대조해야 합니다.
렌더링 결과 비교 점검법
구글 서치 콘솔의 URL 검사에서 실시간 URL을 테스트하고 Google이 본 HTML과 로드된 리소스를 확인합니다.
- 브라우저에서 JavaScript를 끄거나 페이지 소스를 열어 초기 HTML을 확인합니다.
- URL 검사에서 렌더링된 HTML과 화면을 확인합니다.
- H1, 본문, 내부 링크, canonical, robots meta 값을 비교합니다.
- 로드 실패한 JavaScript와 API, 콘솔 오류를 확인합니다.
- 서버 로그에서 Googlebot의 요청과 응답 상태를 살펴봅니다.
오류가 보이면 어느 층에서 생겼는지 나눠 봅니다. CSR은 설계상 페이지 소스에 본문이 없을 수 있으므로 그 사실만으로 오류라고 판단하지 않습니다. 렌더링 결과에도 본문이 없을 때 API와 실행 오류를 확인합니다. 소스에는 있는데 렌더링 결과에서 사라지면 JavaScript 실행이나 하이드레이션 문제일 수 있습니다. 일반 브라우저의 최종 DOM은 정상인데 Google 테스트의 렌더링 HTML에서 빠졌다면 Googlebot이 불러온 API와 리소스의 상태 코드와 robots 차단을 확인합니다. 주소를 직접 열면 정상인데 새로고침에서 404가 난다면 클라이언트 라우팅과 서버 라우팅이 맞지 않는 경우가 많습니다.
초기 HTML의 noindex는 특히 주의해야 합니다. Google은 원본에서 noindex를 발견하면 렌더링을 건너뛸 수 있으므로 JavaScript로 나중에 제거하는 방식은 안전하지 않습니다. 색인할 페이지라면 서버가 보내는 HTML부터 noindex가 없어야 합니다.
배포 전 자동 검사는 대표 템플릿마다 다음 값을 초기 HTML과 렌더링 DOM에서 뽑아 비교하는 방식이 실용적입니다.
- HTTP 상태 코드와 최종 URL
- title, H1, canonical과 robots meta
- 핵심 본문 길이와 내부
a href링크 수 - 구조화 데이터 유형과 필수 값
- 이미지 주소와 alt 텍스트
값이 달라야 하는 페이지와 달라지면 안 되는 항목을 먼저 정해 두면 정상적인 동적 변경을 오류로 잡는 일을 줄일 수 있습니다.
Naver의 SPA 확인 범위와 권장 사항
Naver는 JavaScript가 검색결과에 미치는 영향을 측정하고 해석한다고 안내합니다. 다만 주요 본문은 서버가 보내는 HTML에도 넣도록 권장합니다.
Naver 검색로봇은 주소의 # 뒤를 제외하고 URL을 수집합니다. #/product처럼 # 뒤 값에 따라 다른 내용을 보여 준다면 각 페이지에 고유한 URL을 만드는 편이 좋습니다.
AI 크롤러까지 확인할 때
Googlebot과 네이버 검색로봇이 JavaScript를 처리한다고 해서 모든 AI 서비스의 크롤러도 같은 방식으로 렌더링한다고 볼 수는 없습니다. OpenAI, Anthropic과 Perplexity는 크롤러 이름과 접근 제어 범위를 공개하지만 Google과 같은 렌더링 방식을 보장하지 않습니다. AVCD는 로그인 없이 읽어야 하는 핵심 제목, 본문, 출처와 내부 링크를 초기 HTML에도 제공하는 편을 권합니다.
서버 로그에서는 사용자 에이전트별 요청 URL과 응답 코드를 확인할 수 있지만, 로그만으로 JavaScript 실행 뒤 본문까지 읽었다고 판정할 수는 없습니다. 각 서비스의 공식 크롤러 문서와 실제 인용 결과를 나눠 봅니다.
Google과 Naver가 렌더링에 필요한 JavaScript와 CSS 리소스도 robots.txt로 막지 않아야 합니다.
자주 묻는 질문
React 사이트는 Google에 노출되지 않나요?
React를 사용했다는 이유만으로 제외되지는 않습니다. Google이 URL을 발견하고 렌더링했을 때 핵심 콘텐츠와 링크, 상태 코드를 정상적으로 확인할 수 있는지가 중요합니다.
CSR과 SSR 중 어느 방식이 SEO에 더 좋은가요?
구현 품질과 사이트 요구사항에 따라 다릅니다. 검색 유입이 중요한 콘텐츠를 초기 HTML로 제공하면 여러 크롤러에 안정적이고 사용자 첫 화면에도 도움이 될 수 있습니다.
동적 렌더링을 사용하면 해결되나요?
일부 환경에서 임시 대응이 될 수 있지만 사용자와 크롤러에게 다른 결과를 관리해야 하는 복잡성이 생깁니다. 가능하다면 서버 렌더링이나 정적 생성 같은 장기적인 구조를 먼저 검토하세요.
함께 알아두면 좋은 용어
- 렌더링: HTML과 CSS, JavaScript를 처리해 최종 페이지를 만드는 과정
- CSR: 사용자의 브라우저에서 JavaScript로 화면을 만드는 방식
- SSR: 서버에서 HTML을 만들어 전달하는 방식
- SPA: 한 페이지에서 화면을 동적으로 바꾸는 웹 애플리케이션 구조
- 크롤링: 검색로봇이 URL과 리소스를 가져오는 과정