JavaScript SEO(자바스크립트 SEO)란? | SEO 용어집

자바스크립트 SEO(JavaScript SEO)는 JavaScript로 렌더링되는 웹사이트가 검색 엔진에 올바르게 크롤링·렌더링·인덱싱되도록 최적화하는 기술 SEO의 한 분야입니다. React·Vue·Next.js 같은 SPA/프레임워크가 보편화되면서 중요성이 커졌습니다.

왜 중요한가

구글봇은 JavaScript를 실행할 수 있지만, HTML만 처리하는 것에 비해 렌더링 단계가 추가되어 지연되고 리소스도 더 많이 소비합니다. Ahrefs 조사에 따르면 JS로 렌더링된 콘텐츠의 약 10~25%가 검색 결과에서 누락되거나 지연 인덱싱됩니다. 빙(Bing)과 일부 AI 검색 크롤러는 JS 실행 능력이 더 제한적이어서, JS 의존도가 높은 사이트일수록 GEO 시대에 가시성 손실을 겪기 쉽습니다.

구글의 2단계 인덱싱

크롤링 큐: 구글봇이 HTML만 먼저 가져옵니다. 이 단계에서는 JS로 생성된 콘텐츠를 보지 못합니다.
렌더링 큐: 이후 Web Rendering Service(WRS)가 Chromium으로 페이지를 렌더링해 최종 DOM을 생성합니다. 이 두 단계 사이에는 수초~수일의 지연이 발생할 수 있습니다.

결과적으로 JS로만 삽입된 핵심 콘텐츠나 링크는 "보이지만 늦게 보이는" 상태가 됩니다.

핵심 체크리스트

렌더링 전략: SSR(Server-Side Rendering), SSG(Static Site Generation), 또는 Hybrid가 CSR보다 검색 엔진에 훨씬 안전합니다. Next.js의 getStaticProps, getServerSideProps는 대표적인 해법입니다.

내부 링크는 <a href>로: JS onClick으로만 이동하는 링크는 크롤러가 따라가지 못합니다. 실제 href를 반드시 포함합니다.

중요 콘텐츠는 초기 HTML에: 제목, 본문, 메타 태그, 구조화 데이터는 최초 HTML 응답에 포함되어야 합니다. JS로만 주입하는 구조는 피합니다.

Lazy loading 주의: 스크롤 기반 lazy load는 괜찮지만, 클릭 기반(탭 전환 등)으로만 노출되는 콘텐츠는 크롤러가 보지 못할 수 있습니다.

robots.txt로 JS/CSS 차단 금지: 구글봇이 렌더링하려면 JS/CSS 파일에 접근할 수 있어야 합니다.

검증 도구: Google Search Console의 URL 검사, 모바일 친화성 테스트, Rich Results Test로 실제 렌더링 결과를 확인합니다.

Sources:

inblog에서 활용하기

inblog는 Next.js 기반 SSR/SSG 아키텍처로 블로그 포스트를 제공하므로, 콘텐츠와 메타 태그가 최초 HTML 응답에 포함되어 구글봇이 렌더링 지연 없이 즉시 인덱싱할 수 있습니다. 자체 React 프레임워크로 블로그를 구축한 사용자가 겪는 JS SEO 이슈를 기본적으로 회피할 수 있다는 점이 inblog의 기술적 우위입니다.

자바스크립트 SEO

왜 중요한가

구글의 2단계 인덱싱

핵심 체크리스트

관련 인블로그 게시물

inblog에서 활용하기