Vibe coding으로 만든 사이트가 구글과 AI에게 안 보이는 이유와 해결법
so apparently all our vibe coded sites are invisible to google and AI. that's why we don't' get recommended or seeing because of CSR. But I've found a simple fix we can do to prevent that. Maybe I'm late but is super cool and simple to implement to our pages. Took me 10 min to do.
핵심 요약
Vibe coding으로 만든 사이트가 CSR 방식이라 검색 엔진과 AI 봇에게 노출되지 않는 문제를 해결하는 방법 공유.
- CSR의 한계 — 브라우저에서 JS가 실행되어야 콘텐츠가 보여 검색 엔진과 AI 봇이 빈 페이지로 인식함.
- 해결책 제시 — SSR, SSG, 또는 prerendering을 통해 서버에서 미리 렌더링된 HTML을 제공해야 함.
- AI 봇의 특성 — GPTBot 등은 JS를 실행하지 않고 raw HTML만 긁어가므로 콘텐츠가 검색되지 않음.
- 간단한 확인법 — 페이지 소스 보기에서 텍스트가 보이지 않고 <div id="root"></div>만 있다면 수정이 필요함.
Claude Code와 Claude Design을 가지고 놀다가 개인 랜딩 페이지를 만들었는데, 전문적인 느낌으로 잘 나왔음.
첫 버전은 React/Vite로 만들었는데, 검색이 되는지 테스트해보니 결과가 아주 안 좋았음. 진짜 최악이었음.
둘 다 JS가 실행되기 전 HTML에 실제 콘텐츠가 있어야 크롤러가 읽을 수 있는데, 그게 안 됐던 것임.
- 나쁜 예 (대부분의 Vibe-coded 사이트가 기본값으로 사용)
- CSR (Client Side Rendering): 브라우저가 빈 HTML을 받고 JS가 내용을 채우는 방식. React/Vite/Lovable이 기본으로 사용하는 방식임. 크롤러는 <div id="root"></div>만 보고 그냥 나가버림. 아주 안 좋음.
- 좋은 예 (다음 중 하나로 해결 가능)
- SSR (Server Side Rendering): 서버가 요청마다 HTML을 빌드해서 준비된 상태로 보냄.
- SSG / Prerendering (Static Site Generation): 빌드 시점에 HTML을 한 번만 만들어서 모두에게 같은 파일을 제공함. 랜딩 페이지의 95%는 이걸로 충분함.
Lovable이 새로운 기능을 출시했다는 걸 기억하고 파고들어 봤는데, 유용할 것 같아서 공유함.
- 세 가지를 발견함
- 대부분의 Vibe-coded 사이트는 React나 비슷한 걸 사용함. 브라우저가 열리고 JS가 실행되어야 내용이 보임. 우리 눈엔 괜찮아 보여도 크롤러에겐 아님.
- 구글이 JS를 렌더링할 수는 있지만 2단계 과정임. 먼저 HTML을 가져가고 나중에 렌더링함. 작은 사이트일수록 중간에 실패하는 경우가 많음. 좋은 스키마를 써도(https://search.google.com/test/rich-results 확인) 처음에 보는 HTML이 비어있으면 실패할 수 있음.
- AI에겐 더 치명적임. GPTBot, ClaudeBot, PerplexityBot은 JS를 아예 실행하지 않음.
Vercel이 GPTBot의 크롤링 5억 건을 분석했는데, JS 실행은 0건이었음. 그냥 Raw HTML을 가져가서 빈 div와 스크립트만 보고 나감. 그래서 콘텐츠가 학습 데이터에 들어가지도 않고, ChatGPT 답변에 인용되지도 않음. 사실상 AI에겐 존재하지 않는 사이트임.
이제 사이트는 인간만을 위한 게 아니기 때문에 이게 중요함.
누군가 ChatGPT에게 "Y를 위한 최고의 X"를 물어볼 때, 읽을 수 있는 사이트에서 정보를 가져옴. 만약 당신 사이트가 React 껍데기뿐이라면 그 풀에 들어가지 못함.
해결책은 어렵지 않음
- A - Prerendering, 빌드 시점에 사이트를 정적 HTML로 만듦. 가장 쉬움. Lovable이 최근에 추가함.
- B - SSR, 서버가 전체 HTML을 보냄.
- C - 정적 사이트 생성기, Astro, Tanstack Start, Next.js 설정 등.
내가 한 건, Claude Code에게 Vite SPA에서 Tanstack Start로 마이그레이션해달라고 한 것임.
같은 React, 같은 디자인, 같은 속도인데 이제 모든 페이지가 Cloudflare Pages에서 Prerendering된 HTML임. 10분 걸렸음.
간단한 테스트: 사이트에서 우클릭하고 '페이지 소스 보기'를 해보셈. 텍스트가 보이면 잘 된 거임. <div id="root"></div>와 스크립트만 보이면 투명 인간임.
