# React처럼 자바스크립트로 만든 사이트도 AI 크롤러가 읽을 수 있나요? | GEOcare.ai

> React처럼 자바스크립트로 만든 사이트도 AI 크롤러가 읽을 수 있나요? GEOcare.ai React처럼 자바스크립트로 만든 사이트도 AI 크롤러가 읽을 수 있나요? 발행일 2026-10-09 · 비즈스프링(BizSpring Inc.) 사람은 브라우저가 완성한 화면을 보

## 핵심 요약
- ChatGPT·Claude·Perplexity 등 AI 크롤러는 대부분 자바스크립트를 실행하지 않고 서버가 처음 보낸 HTML 원본만 읽습니다.
- React·Vue 등으로 화면을 자바스크립트로 그리는 사이트는 원본이 비어 있어 본문과 JSON-LD가 AI 크롤러에 전달되지 않을 수 있습니다.
- 서버 렌더링, 미리 렌더링, 웹서버/CDN 삽입, 동적 렌더링 등 JSON-LD를 넣는 방법에 따라 AI 크롤러가 읽을 수 있는지가 달라집니다.
- 크롬에서 view-source로 원본 HTML을 열어 회사 정보와 application/ld+json 포함 여부를 직접 확인할 수 있습니다.
- GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하여 서버 원본에 포함시켜, 자바스크립트를 실행하지 않는 AI 크롤러도 읽을 수 있게 합니다.

React처럼 자바스크립트로 만든 사이트도 AI 크롤러가 읽을 수 있나요? | GEOcare.ai

# React처럼 자바스크립트로 만든 사이트도 AI 크롤러가 읽을 수 있나요?

발행일 2026-10-09 · 비즈스프링(BizSpring Inc.)

사람은 브라우저가 완성한 화면을 보지만, ChatGPT·Claude·Perplexity 같은 AI 서비스의 크롤러는 대부분 서버가 처음 보낸 HTML 원본 만 읽습니다. 화면을 자바스크립트로 그리는 사이트는 이 원본이 거의 비어 있어, 사람에게 보이는 회사 소개와 JSON-LD(구조화 데이터)가 AI 크롤러에게는 전달되지 않을 수 있습니다. 서버 렌더링이나 미리 렌더링처럼 완성된 HTML을 처음부터 보내는 방식 을 쓰면 AI 크롤러도 본문과 JSON-LD를 읽을 수 있습니다.

## 같은 주소, 서로 다른 내용

아래는 가상의 빵집 사이트를 예로 든 비교입니다. 두 사이트는 사람에게 똑같은 화면을 표시하지만, AI 크롤러가 받는 HTML 원본은 다릅니다. 원본에서 AI가 읽을 수 있는 내용은 노란색으로 표시했습니다.

자바스크립트로 화면을 그리는 사이트
완성된 HTML을 보내는 사이트

### 가. 자바스크립트로 화면을 그리는 사이트

React·Vue 등으로 만든 사이트를 별도 설정 없이 배포하면 이 형태가 됩니다. 서버는 빈 틀과 스크립트 파일만 보내고, 화면은 방문자의 브라우저가 스크립트를 실행해 완성합니다.

사람이 보는 화면 내용 표시

가나다 베이커리

매일 굽는 우리밀 빵

영업시간: 월~토 08:00~20:00 대표 메뉴: 우리밀 식빵, 단팥빵

AI 크롤러가 받는 HTML 본문·JSON-LD 없음

가나다 베이커리

AI 크롤러는 스크립트를 실행하지 않으므로 빈
만 읽습니다. 화면을 그린 뒤 스크립트로 추가한 JSON-LD도 원본에는 없습니다.

### 나. 완성된 HTML을 보내는 사이트

서버 렌더링이나 미리 렌더링을 적용한 사이트입니다. 같은 React 사이트라도 서버가 본문과 JSON-LD를 채운 HTML을 보내고, 스크립트는 그 뒤에 버튼·메뉴 같은 동작만 추가합니다.

사람이 보는 화면 내용 표시

가나다 베이커리

매일 굽는 우리밀 빵

영업시간: 월~토 08:00~20:00 대표 메뉴: 우리밀 식빵, 단팥빵

AI 크롤러가 받는 HTML 본문·JSON-LD 있음

가나다 베이커리 | 매일 굽는 우리밀 빵

{"@type": "Bakery",
"name": "가나다 베이커리",
"openingHours": "Mo-Sa 08:00-20:00",
"telephone": "(대표 전화번호)"}

매일 굽는 우리밀 빵

영업시간 월~토 08:00~20:00

원본에 회사 이름·영업시간·연락처가 글자와 JSON-LD로 들어 있어, 스크립트를 실행하지 않는 AI 크롤러도 공식 정보를 읽을 수 있습니다.

## 차이가 생기는 이유

웹 페이지는 두 단계로 완성됩니다. 서버가 HTML 원본을 보내고, 브라우저가 그 안의 자바스크립트를 실행해 화면을 마무리합니다. Vercel이 2024년 12월에 공개한 조사에 따르면 OpenAI·Anthropic 등 주요 AI 서비스의 크롤러는 자바스크립트 파일을 내려받기는 하지만 실행하지 않습니다. 따라서 두 번째 단계에서 만들어지는 내용은 AI 크롤러에게 전달되지 않습니다.

구글 검색 크롤러는 자바스크립트를 실행해 페이지를 렌더링하지만, 렌더링은 원본을 수집한 뒤 별도 단계로 처리됩니다. 검색 노출과 AI 답변 노출을 함께 고려하면 중요한 정보는 원본 HTML에 처음부터 넣는 편이 안전합니다.

## JSON-LD를 넣는 다섯 가지 방법

JSON-LD를 어느 단계에서 넣는지에 따라 AI 크롤러가 읽을 수 있는지가 달라집니다.

| 방법 | 작동 방식 | AI 크롤러 |
|---|---|---|
| ① 브라우저에서 삽입 | 화면을 그린 뒤 스크립트(GTM · 화면 코드)가 head 에 추가합니다. | 읽지 못할 수 있음 |
| ② 서버 렌더링 | 요청이 올 때마다 서버가 본문과 JSON-LD를 채운 HTML을 만들어 보냅니다(Next.js 등). | 읽음 |
| ③ 미리 렌더링 | 빌드할 때 페이지마다 완성된 HTML 파일을 만들어 둡니다(정적 렌더링). | 읽음 |
| ④ 웹 서버 · CDN에서 삽입 | 웹 서버나 CDN이 HTML을 보내기 직전에 페이지별 JSON-LD를 head 에 넣습니다. | 읽음 |
| ⑤ 동적 렌더링 | 방문자가 크롤러이면 따로 렌더링한 HTML을 보냅니다. | 읽음(구글은 임시방편으로 분류) |

⑤ 동적 렌더링은 사람과 크롤러에게 서로 다른 HTML을 보내므로, 두 버전의 내용이 서로 다르면 크롤러에게만 다른 내용을 보이는 것으로 판단될 수 있습니다. 구글 검색 센터는 동적 렌더링을 장기적인 해결책이 아닌 임시방편으로 안내하고 서버 렌더링·정적 렌더링을 권장합니다.

## 내 사이트에서 확인하는 방법

원본 열기 : 크롬 주소창에서 사이트 주소 앞에 view-source: 를 입력해 엽니다. 개발자 도구의 요소 탭은 스크립트가 실행된 뒤의 결과라서 확인용으로 맞지 않습니다.

회사 정보 찾기 : 원본에서 회사 이름, 대표 제품명, 연락처를 검색합니다. 화면에는 보이는데 원본에서 찾을 수 없다면 AI 크롤러도 읽지 못할 가능성이 높습니다.

JSON-LD 찾기 : 원본에서 application/ld+json 을 검색합니다. 원본에 없고 개발자 도구에만 있다면 ① 브라우저 삽입 방식입니다.

GEOcare.ai를 이용 중이라면 JSON-LD 센터에서 페이지별 적용 상태를 확인할 수 있습니다.

## GEOcare.ai의 적용 방식

GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 합니다. 이렇게 넣은 구조화 데이터는 서버가 보내는 원본에 처음부터 포함되므로 자바스크립트를 실행하지 않는 AI 크롤러도 읽을 수 있고, 사람과 크롤러가 같은 HTML을 받습니다. 사이트 구조에 따라 웹 서버나 CDN 단계에서 넣는 방법도 함께 검토합니다.

참고글: 학습·검색 수집과 대화 중 실시간 조회가 페이지를 어떻게 다르게 읽는지는 비즈스프링 블로그의 「AI 봇·에이전트 대응」 시리즈에서 실제 진단 사례와 함께 정리했습니다. AI가 웹사이트에 들어오는 세 가지 경로와 GEO의 확장 (새 창) ↗

출처: Vercel 블로그, The rise of the AI crawler(2024-12-17) · Google 검색 센터: 자바스크립트 SEO 기본사항 · Google 검색 센터: 동적 렌더링 . 예시의 빵집은 설명을 위한 가상의 회사입니다.

### 관련 질문

JSON-LD는 어떤 방식으로 사이트에 반영되나요?
GTM(구글 태그 매니저)으로 JSON-LD를 넣어도 되나요?
AI 답변의 할루시네이션을 찾아내고 바로잡아 주는 GEO 서비스가 있나요?
GEO 자동화 SaaS 플랫폼은 어떻게 시작하나요?
← GEO·AEO 지식센터 전체 보기

### AI 크롤러가 귀사 사이트를 어떻게 읽는지 진단하십시오

도메인을 등록하면 7일 무료 체험 기간에 페이지별 구조화 데이터 상태와 4개 AI의 답변을 확인할 수 있습니다.

7일 무료로 시작하기
다른 질문 보기

출처: https://geocare.ai/geo-faq/ai-crawler-view

## FAQ
**Q. 저희 사이트는 React로 만들었는데, AI 크롤러가 내용을 못 읽는 거 아닌가요?**

A. 별도 설정 없이 배포한 React 사이트는 서버가 빈 틀과 스크립트만 보내고 브라우저가 화면을 완성하는 구조라, 자바스크립트를 실행하지 않는 AI 크롤러는 본문과 JSON-LD를 읽지 못할 수 있습니다. 서버 렌더링이나 미리 렌더링을 적용하면 같은 React 사이트라도 완성된 HTML을 처음부터 보낼 수 있어 AI 크롤러도 읽을 수 있습니다.

**Q. 우리 사이트가 AI 크롤러에게 제대로 읽히는지 어떻게 확인하나요?**

A. 크롬 주소창에서 사이트 주소 앞에 view-source:를 붙여 HTML 원본을 열어보세요. 개발자 도구의 요소 탭은 스크립트 실행 후 결과라 확인용으로 적합하지 않으며, 원본에서 회사 이름·연락처와 application/ld+json 문자열을 검색해 확인하면 됩니다.

**Q. JSON-LD를 GTM(구글 태그 매니저)으로 넣어도 괜찮나요?**

A. GTM처럼 브라우저에서 화면을 그린 뒤 스크립트로 JSON-LD를 추가하는 방식은 HTML 원본에는 포함되지 않아 AI 크롤러가 읽지 못할 수 있습니다. 서버 렌더링, 미리 렌더링, 또는 웹서버·CDN 단계에서 삽입하는 방식이 더 안전합니다.

**Q. 동적 렌더링으로 크롤러에게만 다른 HTML을 보내면 되지 않나요?**

A. 동적 렌더링은 AI 크롤러가 읽을 수는 있지만, 사람과 크롤러에게 서로 다른 HTML을 보내는 방식이라 두 버전 내용이 어긋나면 문제로 판단될 수 있습니다. 구글 검색 센터도 이를 장기적 해결책이 아닌 임시방편으로 안내하며 서버 렌더링이나 정적 렌더링을 권장합니다.

**Q. GEOcare.ai는 JSON-LD를 어떻게 적용하나요?**

A. GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 하여, 서버가 보내는 원본에 처음부터 구조화 데이터가 포함되도록 합니다. 사이트 구조에 따라 웹 서버나 CDN 단계에서 넣는 방법도 함께 검토합니다.

---
출처: https://bizspring.ai/kb/ref/web/geocare-ai/react처럼-자바스크립트로-만든-사이트도-ai-크롤러가-읽을-수-있나요-geocare-ai · 최종 갱신 2026-11-09T14:28:30.634+00:00