{
  "slug": "ref/web/geocare-ai/ai-크롤러가-읽는-화면-자바스크립트-사이트와-json-ld-적용-방식-geocare-ai",
  "doc_type": "ref",
  "title": "AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 | GEOcare.ai",
  "title_en": null,
  "one_liner": "AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 GEOcare.ai AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 발행일 2026-10-09 · 비즈스프링(BizSpring Inc.) 사람은 브라우저가 완성한 화면을 보지만",
  "summary_bullets": [
    "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을 받도록 한다."
  ],
  "body_md": "AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식 | GEOcare.ai\n\n# AI 크롤러가 읽는 화면: 자바스크립트 사이트와 JSON-LD 적용 방식\n\n발행일 2026-10-09 · 비즈스프링(BizSpring Inc.)\n\n사람은 브라우저가 완성한 화면을 보지만, ChatGPT·Claude·Perplexity 같은 AI 서비스의 크롤러는 대부분 서버가 처음 보낸 HTML 원본 만 읽습니다. 화면을 자바스크립트로 그리는 사이트는 이 원본이 거의 비어 있어, 사람에게 보이는 회사 소개와 JSON-LD(구조화 데이터)가 AI 크롤러에게는 전달되지 않을 수 있습니다. 서버 렌더링이나 미리 렌더링처럼 완성된 HTML을 처음부터 보내는 방식 을 쓰면 AI 크롤러도 본문과 JSON-LD를 읽을 수 있습니다.\n\n## 같은 주소, 서로 다른 내용\n\n아래는 가상의 빵집 사이트를 예로 든 비교입니다. 두 사이트는 사람에게 똑같은 화면을 표시하지만, AI 크롤러가 받는 HTML 원본은 다릅니다. 원본에서 AI가 읽을 수 있는 내용은 노란색으로 표시했습니다.\n\n자바스크립트로 화면을 그리는 사이트\n완성된 HTML을 보내는 사이트\n\n### 가. 자바스크립트로 화면을 그리는 사이트\n\nReact·Vue 등으로 만든 사이트를 별도 설정 없이 배포하면 이 형태가 됩니다. 서버는 빈 틀과 스크립트 파일만 보내고, 화면은 방문자의 브라우저가 스크립트를 실행해 완성합니다.\n\n사람이 보는 화면 내용 표시\n\n가나다 베이커리\n\n매일 굽는 우리밀 빵\n\n영업시간: 월~토 08:00~20:00 대표 메뉴: 우리밀 식빵, 단팥빵\n\nAI 크롤러가 받는 HTML 본문·JSON-LD 없음\n\n가나다 베이커리\n\nAI 크롤러는 스크립트를 실행하지 않으므로 빈\n만 읽습니다. 화면을 그린 뒤 스크립트로 추가한 JSON-LD도 원본에는 없습니다.\n\n### 나. 완성된 HTML을 보내는 사이트\n\n서버 렌더링이나 미리 렌더링을 적용한 사이트입니다. 같은 React 사이트라도 서버가 본문과 JSON-LD를 채운 HTML을 보내고, 스크립트는 그 뒤에 버튼·메뉴 같은 동작만 추가합니다.\n\n사람이 보는 화면 내용 표시\n\n가나다 베이커리\n\n매일 굽는 우리밀 빵\n\n영업시간: 월~토 08:00~20:00 대표 메뉴: 우리밀 식빵, 단팥빵\n\nAI 크롤러가 받는 HTML 본문·JSON-LD 있음\n\n가나다 베이커리 | 매일 굽는 우리밀 빵\n\n{\"@type\": \"Bakery\",\n\"name\": \"가나다 베이커리\",\n\"openingHours\": \"Mo-Sa 08:00-20:00\",\n\"telephone\": \"(대표 전화번호)\"}\n\n매일 굽는 우리밀 빵\n\n영업시간 월~토 08:00~20:00\n\n원본에 회사 이름·영업시간·연락처가 글자와 JSON-LD로 들어 있어, 스크립트를 실행하지 않는 AI 크롤러도 공식 정보를 읽을 수 있습니다.\n\n## 차이가 생기는 이유\n\n웹 페이지는 두 단계로 완성됩니다. 서버가 HTML 원본을 보내고, 브라우저가 그 안의 자바스크립트를 실행해 화면을 마무리합니다. Vercel이 2024년 12월에 공개한 조사에 따르면 OpenAI·Anthropic 등 주요 AI 서비스의 크롤러는 자바스크립트 파일을 내려받기는 하지만 실행하지 않습니다. 따라서 두 번째 단계에서 만들어지는 내용은 AI 크롤러에게 전달되지 않습니다.\n\n구글 검색 크롤러는 자바스크립트를 실행해 페이지를 렌더링하지만, 렌더링은 원본을 수집한 뒤 별도 단계로 처리됩니다. 검색 노출과 AI 답변 노출을 함께 고려하면 중요한 정보는 원본 HTML에 처음부터 넣는 편이 안전합니다.\n\n## JSON-LD를 넣는 다섯 가지 방법\n\nJSON-LD를 어느 단계에서 넣는지에 따라 AI 크롤러가 읽을 수 있는지가 달라집니다.\n\n방법 작동 방식 AI 크롤러\n\n① 브라우저에서 삽입 화면을 그린 뒤 스크립트(GTM·화면 코드)가 에 추가합니다. 읽지 못할 수 있음\n\n② 서버 렌더링 요청이 올 때마다 서버가 본문과 JSON-LD를 채운 HTML을 만들어 보냅니다(Next.js 등). 읽음\n\n③ 미리 렌더링 빌드할 때 페이지마다 완성된 HTML 파일을 만들어 둡니다(정적 렌더링). 읽음\n\n④ 웹 서버·CDN에서 삽입 웹 서버나 CDN이 HTML을 보내기 직전에 페이지별 JSON-LD를 에 넣습니다. 모든 방문자가 같은 HTML을 받습니다. 읽음\n\n⑤ 동적 렌더링 방문자가 크롤러이면 따로 렌더링한 HTML을 보내고, 사람에게는 기존 화면을 보냅니다. 읽음. 다만 구글은 임시방편으로 분류합니다\n\n⑤ 동적 렌더링은 사람과 크롤러에게 서로 다른 HTML을 보내므로, 두 버전의 내용이 어긋나면 크롤러에게만 다른 내용을 보이는 것으로 판단될 수 있습니다. 구글 검색 센터는 동적 렌더링을 장기적인 해결책이 아닌 임시방편으로 안내하고 서버 렌더링·정적 렌더링을 권장합니다.\n\n## 내 사이트에서 확인하는 방법\n\n원본 열기 : 크롬 주소창에서 사이트 주소 앞에 view-source: 를 입력해 엽니다. 개발자 도구의 요소 탭은 스크립트가 실행된 뒤의 결과라서 확인용으로 맞지 않습니다.\n\n회사 정보 찾기 : 원본에서 회사 이름, 대표 제품명, 연락처를 검색합니다. 화면에는 보이는데 원본에서 찾을 수 없다면 AI 크롤러도 읽지 못할 가능성이 높습니다.\n\nJSON-LD 찾기 : 원본에서 application/ld+json 을 검색합니다. 원본에 없고 개발자 도구에만 있다면 ① 브라우저 삽입 방식입니다.\n\nGEOcare.ai를 이용 중이라면 JSON-LD 센터에서 페이지별 적용 상태를 확인할 수 있습니다.\n\n## GEOcare.ai의 적용 방식\n\nGEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 합니다. 이렇게 넣은 구조화 데이터는 서버가 보내는 원본에 처음부터 포함되므로 자바스크립트를 실행하지 않는 AI 크롤러도 읽을 수 있고, 사람과 크롤러가 같은 HTML을 받습니다. 사이트 구조에 따라 웹 서버나 CDN 단계에서 넣는 방법도 함께 검토합니다.\n\n참고글: 학습·검색 수집과 대화 중 실시간 조회가 페이지를 어떻게 다르게 읽는지는 비즈스프링 블로그의 「AI 봇·에이전트 대응」 시리즈에서 실제 진단 사례와 함께 정리했습니다. AI가 웹사이트에 들어오는 세 가지 경로와 GEO의 확장 (새 창) ↗\n\n출처: Vercel 블로그, The rise of the AI crawler(2024-12-17) · Google 검색 센터: 자바스크립트 SEO 기본사항 · Google 검색 센터: 동적 렌더링 . 예시의 빵집은 설명을 위한 가상의 회사입니다.\n\n### 관련 지식\n\nAI 답변의 할루시네이션: 잘못된 정보의 진단과 교정 방향\nGEOcare.ai 시작 가이드: 도메인 등록부터 첫 진단 결과까지\n\n### 관련 FAQ\n\nJSON-LD는 어떤 방식으로 사이트에 반영되나요?\nGTM(구글 태그 매니저)으로 JSON-LD를 넣어도 되나요?\n\n← 지식 홈으로 돌아가기\n\n같은 분류의 지식 · 기술·AI 접근성\n사이트를 고칠 수 없는 기간의 AI 검색 최적화: 외부 출처 정비와 리뉴얼 요구사항\n\n### AI 크롤러가 귀사 사이트를 어떻게 읽는지 진단하십시오\n\n도메인을 등록하면 7일 무료 체험 기간에 페이지별 구조화 데이터 상태와 4개 AI의 답변을 확인할 수 있습니다.\n\n7일 무료로 시작하기\n다른 질문 보기\n\n## 최근 본 지식 문서\n\n문서를 열어 보면 이곳에 기록되어 다시 찾기 쉽습니다.\n\n기록 지우기\n\n## 지식 문서\n\n시작하기 1\n\nGEO 자동화 SaaS 시작 방법\n\nGEO·AEO 개념·용어 1\n\nAEO·GEO·SEO 정의와 차이\n\nAI 노출 측정·비교·리포트 6\n\nAI 답변 유입의 전환 측정\n\n모니터링 도구 선택 기준\n\nAI 답변 점유율(SOV) 측정\n\nAI 답변 노출 추적\n\n경쟁사 AI 노출 벤치마킹\n\nGEO 성과 리포트 자동화\n\n쇼핑몰·커머스 2\n\n쇼핑몰 AI 에이전트 대응 준비\n\n쇼핑몰 GEO 가이드\n\n브랜드 평판·정확성 3\n\n심의 업종의 AI 답변 콘텐츠\n\nAI 답변 속 브랜드 평판\n\nAI 답변 할루시네이션 진단\n\n기술·AI 접근성 2\n\n리뉴얼 전 AI 검색 최적화\n\nAI 크롤러가 읽는 화면\n\n## 자주 묻는 질문\n\nFAQ로 이동 →\n\n## 연관 블로그글\n\n비즈스프링 블로그에 올라온 GEOcare.ai·GEO 관련 최근 글입니다.\n\n\n\n\n\n\n\n\n\n\n\n비즈스프링 블로그에서 더 보기 (새 창) ↗\n\n출처: https://geocare.ai/knowledge/ai-crawler-view",
  "related_slugs": [],
  "keywords": [],
  "faq": [
    {
      "a": "네, React·Vue 등으로 만든 사이트를 별도 설정 없이 배포하면 서버가 빈 틀과 스크립트만 보내고 브라우저가 화면을 완성하는 방식이 됩니다. 이 경우 AI 크롤러는 스크립트를 실행하지 않아 본문과 JSON-LD를 읽지 못할 수 있습니다. 서버 렌더링이나 미리 렌더링을 적용하면 이 문제를 해결할 수 있습니다.",
      "q": "저희 사이트는 React로 만들어졌는데 AI가 못 읽을 수도 있다는 건가요?"
    },
    {
      "a": "GTM처럼 브라우저에서 화면을 그린 뒤 스크립트로 JSON-LD를 추가하는 방식은 AI 크롤러가 읽지 못할 수 있습니다. 서버 렌더링, 미리 렌더링, 웹 서버·CDN 삽입 방식을 사용하면 원본 HTML에 JSON-LD가 포함되어 AI 크롤러도 읽을 수 있습니다.",
      "q": "GTM(구글 태그 매니저)으로 JSON-LD를 넣어도 되나요?"
    },
    {
      "a": "동적 렌더링은 방문자가 크롤러인지 여부에 따라 다른 HTML을 보내는 방식으로 AI 크롤러도 읽을 수는 있습니다. 다만 사람과 크롤러 버전의 내용이 어긋나면 문제가 될 수 있어, 구글 검색 센터는 이를 장기적 해결책이 아닌 임시방편으로 분류하고 서버 렌더링이나 정적 렌더링을 권장합니다.",
      "q": "동적 렌더링은 괜찮은 방법인가요?"
    },
    {
      "a": "크롬 주소창에 view-source:를 붙여 원본 HTML을 열고, 회사 이름·대표 제품명·연락처와 application/ld+json을 직접 검색해 보면 됩니다. 화면에는 보이는데 원본에서 찾을 수 없다면 AI 크롤러도 읽지 못할 가능성이 높습니다. 개발자 도구의 요소 탭은 스크립트 실행 후 결과라 확인용으로는 맞지 않습니다.",
      "q": "제 사이트가 AI 크롤러에게 제대로 보이는지 어떻게 확인하나요?"
    },
    {
      "a": "GEOcare.ai는 JSON-LD를 페이지 HTML에 직접 삽입하는 방식을 기본으로 사용합니다. 이렇게 하면 서버가 보내는 원본에 처음부터 구조화 데이터가 포함되어 자바스크립트를 실행하지 않는 AI 크롤러도 읽을 수 있습니다. 사이트 구조에 따라 웹 서버나 CDN 단계에서 삽입하는 방법도 함께 검토합니다.",
      "q": "GEOcare.ai는 JSON-LD를 어떻게 적용하나요?"
    }
  ],
  "jsonld": null,
  "image_url": null,
  "caption": null,
  "width": null,
  "height": null,
  "video_url": null,
  "duration_sec": null,
  "thumbnail_url": null,
  "solution_slug": null,
  "source_id": "https://geocare.ai/knowledge/ai-crawler-view",
  "created_at": "2026-11-14T18:10:41.909867+00:00",
  "updated_at": "2026-11-14T18:20:31.947+00:00",
  "backlinks": [],
  "html_url": "https://bizspring.ai/kb/ref/web/geocare-ai/ai-크롤러가-읽는-화면-자바스크립트-사이트와-json-ld-적용-방식-geocare-ai",
  "markdown_url": "https://bizspring.ai/kb/ref/web/geocare-ai/ai-크롤러가-읽는-화면-자바스크립트-사이트와-json-ld-적용-방식-geocare-ai.md"
}