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

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

같은 주소, 서로 다른 내용

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>가나다 베이커리</title>
  <script src="/assets/app.js"></script>
</head>
<body>
  <div id="root"></div>
  <!-- 본문과 JSON-LD는 app.js가 실행된 뒤에 만들어집니다 -->
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>가나다 베이커리 | 매일 굽는 우리밀 빵</title>
  <script type="application/ld+json">
  {"@type": "Bakery",
   "name": "가나다 베이커리",
   "openingHours": "Mo-Sa 08:00-20:00",
   "telephone": "02-000-0000"}
  </script>
</head>
<body>
  <h1>매일 굽는 우리밀 빵</h1>
  <p>영업시간 월~토 08:00~20:00</p>
  <script src="/assets/app.js"></script>
</body>
</html>

차이가 생기는 이유

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

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

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

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

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

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

1. 원본 열기: 크롬 주소창에서 사이트 주소 앞에 view-source:를 입력해 엽니다. 개발자 도구의 요소 탭은 스크립트가 실행된 뒤의 결과라서 확인용으로 맞지 않습니다.
2. 회사 정보 찾기: 원본에서 회사 이름, 대표 제품명, 연락처를 검색합니다. 화면에는 보이는데 원본에서 찾을 수 없다면 AI 크롤러도 읽지 못할 가능성이 높습니다.
3. JSON-LD 찾기: 원본에서 application/ld+json을 검색합니다. 원본에 없고 개발자 도구에만 있다면 ① 브라우저 삽입 방식입니다.

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

GEOcare.ai의 적용 방식

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

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