피 재승 
자바스크립트가 SEO에 불리하다는 인식은 과거의 이야기일 수 있습니다. 지금의 검색엔진들은 브라우저가 콘텐츠를 렌더링하는 방식과 동일하게 HTML을 가져오고 자바스크립트와 CSS 를 추출하여 적용하여 인덱싱하는 과정을 거칩니다. 자바스크립트로 생성된 페이지를 검색 엔진이 이해할 수 있으나, 다양한 웹사이트 기능이나 콘텐츠 구현 방식으로 인해 렌더링 문제들이 발생할 수 있습니다.
어떤 문제들이 SEO에 영향을 미치는지 문제들을 이해하고 해결하는 것이 중요합니다.
자바스크립트 주요 SEO 이슈
구글은 크게 네가지로 자바스크립트 관련 SEO 문제들을 정리했습니다.
- 콘텐츠가 HTML 로 렌더링되지 않는 이슈
- 파라미터의 잘못된 사용 (Using # – Fragment identifiers)
- 소프트 404 (Soft 404)
- 차단된 리소스
크롤러가 브라우저와 같은 방식으로 렌더링한다는 사실을 계속 기억하고 계신다면, 왜 해당 문제들이 발생하는지 금방 눈치채실 수 있습니다.
각 문제들이 발생하는 자세한 원인과 해결방안은 아래에 이어서 함께 살펴보겠습니다.
1. 콘텐츠가 HTML 로 렌더링 되지 않음
이 문제는 자바스크립트를 사용한 웹사이트에서 가장 흔하게 볼 수 있는 문제입니다. HTML로 렌더링 되지 않는 다는 의미는 곧 검색 엔진이 아무런 내용도 확인할 수 없다는 의미와 같습니다.
주요 원인
- 메인 콘텐츠 누락 : HTML 렌더링 되지 않은 메인 콘텐츠는 검색 엔진이 내용을 확인할 수 없습니다. 비어있는 콘텐츠로 인식할 수 있습니다.
- 자바스크립트가 이벤트 트리거에 의해 렌더링 되는 경우 : 특정 버튼을 클릭하거나, 페이지 하단으로 스크롤하는 등의 유저의 동작 수행으로 렌더링되는 콘텐츠는 크롤러가 확인할 수 없습니다. 구글봇을 포함은 크롤러들은 클릭하지 않으며, 스크롤하지 않습니다. 약 10,000 픽셀 높이까지 렌더링할 수 있다고 구글 관계자는 어느 정도의 범위를 이야기해주었습니다.
- 비활성화된 브라우저 API 또는 사용자 권한이 필요한 API 사용 : 결제, 위치 등의 사용자의 접근 권한이 필요한 브라우저 API는 렌더링 과정에서 정확히 작동하지 않을 수 있다고 구글은 밝혔습니다.
해결 방안
- 정적 콘텐츠 : HTML로 정적으로 브라우저에 렌더링 되는 방식은 자바스크립트를 사용하여도 문제가 되지 않습니다. 사용자의 스크롤 동작에 따라서 콘텐츠가 추가 로드 되는 방식은 문제가될 수 있기 때문에 중요한 내용들은 스크롤 없이 정적으로 렌더링될 수 있도록 갖추어야합니다.
- 브라우저 API 사용 : 구글은 대부분의 API 방식을 지원하기 때문에 API 접근이나 사용자 권한 부여 여부에따라 콘텐츠 표시를 조건부로 설정하지 않는다면 콘텐츠를 확인할 수 있다고 이야기하였습니다.
2. 잘못된 URL 파라미터 사용 (# – Fragment Identifiers)
URL 에서 해시 기호 (#) 뒤에 오는 URL 파라미터는 클라이언트 쪽에서 콘텐츠 변경에 사용될 수 있지만, 검색엔진이 콘텐츠를 구분하는 것을 방해한다고 구글은 밝혔습니다.
문제점
- 프래그먼트 (#)는 URL의 일부로 페이지 내 특정 섹션으로 이동하는 클라이언트 측 기능으로 설계되어 있습니다.
- 문제는 프래그먼트가 클라이언트 측에만 존재하고 서버 측에서는 보이지 않는다는 것입니다. 해시 기호 (#) 이후의 모든 요청은 웹 서버로 전송되지 않으므로 구글을 포함한 대부분의 검색 엔진 그리고 AI LLM 모델들은 프래그먼트가 가리키는 콘텐츠를 로드하지 않습니다.
해결 방안
- History API 사용 : 단순히 프래그먼트 (#) 대신 URL 경로 구성 요소 쿼리 문자열을 변경하면 됩니다. 예를 들면 ?path=product 와 같은 쿼리 파라미터를 사용하는것은 문제가 없습니다.
3. 소프트 404 (Soft 404)
소프트 404는 서버가 HTTP Status 응답을 200 (성공) 으로 반환했지만, 페이지 콘텐츠 자체에서 오류가 발생한 경우를 말합니다.
문제 상황
- 주로 SPA (Single Page Application) 방식에서 HTTP 상태 코드를 변경하지 못하는 경우이며, 검색 엔진에게 혼란을 주기 때문에 웹사이트가 가진 크롤링 예산을 낭비할 수 있습니다.
- 메인 콘텐츠 영역이 비어 있는 페이지, 서버 또는 CMS 설정 오류 페이지, 자바스크립트 렌더링 실패로 인한 메인콘텐츠 공백으로 인한 페이지 오류를 보이면서 200 상태 코드를 반환하는 페이지들은 소프트 404 의 흔한 문제가 되는 상황들입니다.
해결 방안
- SPA 방식에서 오류가 생긴다면 적절한 HTTP 상태 코드를 가진 실제 페이지로 리디렉션합니다. 구글은 자바스크립트의 try-and-catch와 같은 메커니즘을 사용하면 오류를 확인하고 오류 페이지로 리디렉션할 수 있다고 이야기했습니다.
- 오류 페이지이나 HTTP Status code 가 200 상태가 아닌지 확인하고 적절한 상태 코드로 변경하여 페이지를 사용하지 않는다거나 (4xx) 혹은 페이지가 이동되었음을(3xx) 검색엔진에게 알립니다.
4. 차단된 리소스
차단된 리소스는 크롤러가 콘텐츠의 자바스크립트 또는 API에 접근이 허용되지 않아서 발생하게 되는 문제를 의미합니다.
문제 상황
- 크롤러가 JavaScript에 접근할 수 없는 모든 경우
해결 방안
- Robots.txt 파일을 확인하여 경로에 크롤러 접근이 가능한지 확인
- 웹 개발에서 자바스크립트를 CDN (콘텐츠 전송 네트워크)에 호스팅 하는 경우에는 CDN측의 설정을 확인하여 웹사이트가 크롤링을 방해하지 않는지 확인해야 합니다.
SEO 친화적인 자바스크립트?
자바스크립트를 SEO 친화적으로 만든다는 것은 결국 웹사이트의 메인 콘텐츠 (Centerpiece) 내 HTML 로 렌더링되고 검색엔진이 이해할 수 있도록 환경을 갖추는 데 있습니다. 검색 엔진 크롤러는 웹 브라우저와 같은 방식으로 렌더링한다는 사실을 한번 더 강조합니다. 중요한 콘텐츠 내용들이 모두 클라이언트에 렌더링 되어 크롤봇이 콘텐츠 내용을 확인할 수 있도록 구현된 웹사이트 렌더링 방식이 즉 SEO 친화적인 자바스크립트 사용을 의미합니다.
