5개 대형 JavaScript 기반 사이트 SEO 감시로 구조화된 데이터 부재·메타 설명 누락·내부 링크 부족 같은 공통 패턴 발견

Context

개발팀은 Server-Side Rendering(SSR)을 적용하거나 내부 링크를 체계적으로 설계하지 않고 있었다. 결과적으로 react.dev(74/100)부터 shopify.com(39/100)까지 광범위한 SEO 점수 편차가 발생했다. Googlebot이 JavaScript를 렌더링하더라도 AI 크롤러(ChatGPT, Perplexity)는 원본 HTML만 읽기 때문에 클라이언트 렌더링 기반 사이트는 AI 검색 인덱싱에서 거의 노출되지 않았다.

Technical Solution

• 원본 HTML에 필수 콘텐츠 배치: 우측 클릭 → 페이지 소스 보기에서 컨텐츠가 보여야 AI 크롤러가 감지 가능
• Schema.org 구조화된 데이터 추가: 페이지 타입당 20~30분 투자로 Rich Snippet 제공
• 메타 설명 최적화: 문자 150~160으로 고유한 설명 작성
• 이미지 alt 텍스트 추가: 이미지당 2분 소요로 접근성 및 SEO 동시 개선
• 내부 링크 구조 강화: 중요 페이지마다 2~3개 실제 <a href> 태그 배치 (JavaScript 클릭 핸들러 대신)
• 중요 페이지 SSR 적용: 클라이언트 렌더링 기반 사이트는 AI 크롤러 노출 불가능하므로 우선도 높은 페이지부터 전환

Impact

react.dev가 강한 내부 링크(평균 3.5개/페이지)와 인덱싱 가능성으로 최고 점수(74/100) 달성했다. Shopify는 고아 페이지 8/10에 구조화된 데이터 없음(8/10)으로 최저 점수(39/100)를 기록했다. Vercel과 Linear는 0.0~0.5개/페이지 내부 링크로 SPA 아키텍처의 약점을 드러냈다.

Key Takeaway

AI 크롤러가 JavaScript를 렌더링하지 않으므로 초기 HTML에 콘텐츠와 구조화된 데이터를 포함하는 것이 필수다. 마찬가지로 페이지 로딩 속도, 내부 링크 일관성, 메타 요소의 완성도는 Googlebot과 AI 크롤러 모두에게 동일한 영향을 미친다.