AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 | GEOcare.ai
핵심 요약
- ChatGPT·Claude 등 AI 크롤러는 서버가 보낸 HTML 원본만 읽고 자바스크립트를 실행하지 않아, 자바스크립트로 화면을 그리는 사이트는 본문과 JSON-LD가 전달되지 않을 수 있다.
- 서버 렌더링이나 미리 렌더링처럼 완성된 HTML을 처음부터 보내면 AI 크롤러도 본문과 JSON-LD를 읽을 수 있다.
- JSON-LD를 넣는 방법에는 브라우저 삽입, 서버 렌더링, 미리 렌더링, 웹서버·CDN 삽입, 동적 렌더링 다섯 가지가 있으며 방법에 따라 AI 크롤러가 읽을 수 있는지가 달라진다.
- view-source:로 원본 HTML을 열어 회사 정보와 application/ld+json을 직접 검색하면 자사 사이트가 AI 크롤러에게 읽히는지 확인할 수 있다.
- GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 하여 사람과 크롤러가 같은 HTML을 받도록 한다.
AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 | GEOcare.ai
# AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식
발행일 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·화면 코드)가 에 추가합니다. 읽지 못할 수 있음
② 서버 렌더링 요청이 올 때마다 서버가 본문과 JSON-LD를 채운 HTML을 만들어 보냅니다(Next.js 등). 읽음
③ 미리 렌더링 빌드할 때 페이지마다 완성된 HTML 파일을 만들어 둡니다(정적 렌더링). 읽음
④ 웹 서버·CDN에서 삽입 웹 서버나 CDN이 HTML을 보내기 직전에 페이지별 JSON-LD를 에 넣습니다. 모든 방문자가 같은 HTML을 받습니다. 읽음
⑤ 동적 렌더링 방문자가 크롤러이면 따로 렌더링한 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 검색 센터: 동적 렌더링 . 예시의 빵집은 설명을 위한 가상의 회사입니다.
관련 지식
AI 답변의 할루시네이션: 잘못된 정보의 진단과 교정 방향
GEOcare.ai 시작 가이드: 도메인 등록부터 첫 진단 결과까지
관련 FAQ
JSON-LD는 어떤 방식으로 사이트에 반영되나요?
GTM(구글 태그 매니저)으로 JSON-LD를 넣어도 되나요?
← 지식 홈으로 돌아가기
같은 분류의 지식 · 기술·AI 접근성
사이트를 고칠 수 없는 기간의 AI 검색 최적화: 외부 출처 정비와 리뉴얼 요구사항
AI 크롤러가 귀사 사이트를 어떻게 읽는지 진단하십시오
도메인을 등록하면 7일 무료 체험 기간에 페이지별 구조화 데이터 상태와 4개 AI의 답변을 확인할 수 있습니다.
7일 무료로 시작하기
다른 질문 보기
최근 본 지식 문서
문서를 열어 보면 이곳에 기록되어 다시 찾기 쉽습니다.
기록 지우기
지식 문서
시작하기 1
GEO 자동화 SaaS 시작 방법
GEO·AEO 개념·용어 1
AEO·GEO·SEO 정의와 차이
AI 노출 측정·비교·리포트 6
AI 답변 유입의 전환 측정
모니터링 도구 선택 기준
AI 답변 점유율(SOV) 측정
AI 답변 노출 추적
경쟁사 AI 노출 벤치마킹
GEO 성과 리포트 자동화
쇼핑몰·커머스 2
쇼핑몰 AI 에이전트 대응 준비
쇼핑몰 GEO 가이드
브랜드 평판·정확성 3
심의 업종의 AI 답변 콘텐츠
AI 답변 속 브랜드 평판
AI 답변 할루시네이션 진단
기술·AI 접근성 2
리뉴얼 전 AI 검색 최적화
AI 크롤러가 읽는 화면
자주 묻는 질문
FAQ로 이동 →
연관 블로그글
비즈스프링 블로그에 올라온 GEOcare.ai·GEO 관련 최근 글입니다.
비즈스프링 블로그에서 더 보기 (새 창) ↗
출처: https://geocare.ai/knowledge/ai-crawler-view
자주 묻는 질문
저희 사이트는 React로 만들어졌는데 AI가 못 읽을 수도 있다는 건가요?
네, React·Vue 등으로 만든 사이트를 별도 설정 없이 배포하면 서버가 빈 틀과 스크립트만 보내고 브라우저가 화면을 완성하는 방식이 됩니다. 이 경우 AI 크롤러는 스크립트를 실행하지 않아 본문과 JSON-LD를 읽지 못할 수 있습니다. 서버 렌더링이나 미리 렌더링을 적용하면 이 문제를 해결할 수 있습니다.
GTM(구글 태그 매니저)으로 JSON-LD를 넣어도 되나요?
GTM처럼 브라우저에서 화면을 그린 뒤 스크립트로 JSON-LD를 추가하는 방식은 AI 크롤러가 읽지 못할 수 있습니다. 서버 렌더링, 미리 렌더링, 웹 서버·CDN 삽입 방식을 사용하면 원본 HTML에 JSON-LD가 포함되어 AI 크롤러도 읽을 수 있습니다.
동적 렌더링은 괜찮은 방법인가요?
동적 렌더링은 방문자가 크롤러인지 여부에 따라 다른 HTML을 보내는 방식으로 AI 크롤러도 읽을 수는 있습니다. 다만 사람과 크롤러 버전의 내용이 어긋나면 문제가 될 수 있어, 구글 검색 센터는 이를 장기적 해결책이 아닌 임시방편으로 분류하고 서버 렌더링이나 정적 렌더링을 권장합니다.
제 사이트가 AI 크롤러에게 제대로 보이는지 어떻게 확인하나요?
크롬 주소창에 view-source:를 붙여 원본 HTML을 열고, 회사 이름·대표 제품명·연락처와 application/ld+json을 직접 검색해 보면 됩니다. 화면에는 보이는데 원본에서 찾을 수 없다면 AI 크롤러도 읽지 못할 가능성이 높습니다. 개발자 도구의 요소 탭은 스크립트 실행 후 결과라 확인용으로는 맞지 않습니다.
GEOcare.ai는 JSON-LD를 어떻게 적용하나요?
GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 사용합니다. 이렇게 하면 서버가 보내는 원본에 처음부터 구조화 데이터가 포함되어 자바스크립트를 실행하지 않는 AI 크롤러도 읽을 수 있습니다. 사이트 구조에 따라 웹 서버나 CDN 단계에서 삽입하는 방법도 함께 검토합니다.