자바스크립트로만 그린 화면이 AI에게 빈 페이지인 이유
한 줄 요약
자바스크립트로만 화면을 그리는 웹사이트는 AI 크롤러가 방문했을 때 텅 빈 페이지로 보일 수 있다. AI 크롤러 대부분은 자바스크립트를 실행하지 않거나 제한적으로만 실행하기 때문에, HTML에 직접 담긴 내용만 읽어간다. 플레이스나 SNS로만 장사하는 소상공인이 홈페이지를 만들 때 이 점을 놓치면 AI 검색 답변에 아예 나오지 않을 수 있다.
AI 크롤러는 자바스크립트를 실행하지 않나
대부분의 AI 크롤러는 자바스크립트를 실행하지 않거나 제한적으로만 실행한다. OAI-SearchBot, ClaudeBot, PerplexityBot 같은 크롤러는 서버가 보낸 HTML 파일을 그대로 읽어간다. 화면을 그리는 코드가 자바스크립트 안에만 있으면 크롤러가 본 페이지는 빈 화면이다.
구글봇은 자바스크립트를 실행할 수 있지만 모든 경우에 실행을 보장하지 않는다. 페이지 로딩 속도가 느리거나 외부 스크립트가 많으면 실행을 건너뛸 수 있다. AI 학습용 크롤러인 Google-Extended도 마찬가지다.
자바스크립트 실행 여부는 크롤러마다, 시점마다 다르다. 확실하게 읽히려면 HTML에 내용을 직접 담아야 한다.
내 홈페이지가 자바스크립트로만 그려지는지 어떻게 확인하나
브라우저에서 페이지를 연 뒤 마우스 오른쪽 버튼을 눌러 "페이지 소스 보기"를 선택한다. 새 창에 HTML 코드가 나온다. 이 코드 안에서 Ctrl+F로 홈페이지에 보이는 문장 일부를 검색한다.
검색했을 때 문장이 나오지 않으면 그 내용은 자바스크립트로 그려진 것이다. <div id="root"></div>나 <div id="app"></div> 같은 빈 태그만 있고 그 안에 글이 없다면 화면 전체가 자바스크립트로 그려진다는 뜻이다.
홈페이지 제작 업체에 "서버 사이드 렌더링(SSR)을 지원하나요?"라고 물어볼 수도 있다. 지원하지 않는다고 답하면 HTML에 내용이 담기지 않는 구조다.
플레이스·SNS만 쓰는 소상공인이 홈페이지를 만들 때 주의할 점은 무엇인가
홈페이지 제작 도구를 고를 때 "HTML에 내용이 담기는가"를 먼저 확인해야 한다. 워드프레스, 카페24, 아임웹, 고도몰 같은 도구는 기본적으로 HTML에 내용을 담는다. 페이지 소스 보기를 했을 때 글이 그대로 보인다.
React, Vue, Next.js 같은 프레임워크로 만든 사이트는 설정에 따라 다르다. Next.js는 서버 사이드 렌더링을 지원하지만 개발자가 설정하지 않으면 자바스크립트로만 그려질 수 있다. 제작 업체에 "AI 크롤러가 읽을 수 있게 HTML에 내용을 담아달라"고 요청해야 한다.
무료 홈페이지 빌더 중 일부는 자바스크립트로만 화면을 그린다. 만들기 전에 샘플 페이지의 소스를 확인하거나, 제작사에 직접 물어보는 것이 확실하다.
AI 크롤러가 읽을 수 있게 하려면 HTML을 어떻게 구성해야 하나
페이지 제목은 <title> 태그에, 본문은 <p>나 <div> 태그 안에 직접 써야 한다. 메뉴 이름, 상품 설명, 운영 시간, 주소 같은 정보가 HTML 코드에 그대로 담겨 있어야 크롤러가 읽어간다.
이미지에는 alt 속성을 넣는다. <img src="menu.jpg" alt="아메리카노 가격표">처럼 쓰면 AI가 이미지 내용을 이해할 수 있다. 이미지만 올리고 설명을 빼면 크롤러는 그 이미지를 읽지 못한다.
링크는 <a href="/menu">메뉴 보기</a> 형태로 쓴다. 자바스크립트 클릭 이벤트로만 페이지를 이동하면 크롤러가 다른 페이지를 찾지 못한다. HTML <a> 태그를 쓰면 크롤러가 링크를 따라 다른 페이지도 수집한다.
이미 만든 홈페이지가 자바스크립트 구조라면 어떻게 하나
제작 업체에 서버 사이드 렌더링 전환을 요청할 수 있다. Next.js나 Nuxt.js 같은 프레임워크를 쓴다면 설정 변경만으로 가능할 수 있다. 비용과 기간은 사이트 구조에 따라 다르므로 견적을 받아야 한다.
전환이 어렵다면 주요 페이지만이라도 HTML로 따로 만드는 방법이 있다. 예를 들어 "/about" 페이지를 정적 HTML 파일로 만들어 사업 소개, 위치, 연락처를 담는다. AI 크롤러는 이 페이지를 읽고 정보를 가져갈 수 있다.
플레이스나 SNS 프로필에 홈페이지 링크를 걸었다면, 그 링크가 HTML로 된 페이지를 가리키는지 확인한다. AI가 프로필을 읽고 링크를 따라갔을 때 빈 페이지를 보면 인용 가능성이 낮아진다.
Check-X 무료 진단에서는 AI 크롤러가 사이트에 접근할 수 있는지 확인할 수 있다. 접근은 가능하지만 인용이 안 된다면 HTML 구조를 점검해볼 필요가 있다.
자바스크립트를 아예 쓰지 말아야 하나
자바스크립트를 쓰면 안 되는 것은 아니다. 문제는 "내용이 자바스크립트 안에만 있는가"다. HTML에 내용을 먼저 담고, 자바스크립트로 화면을 꾸미거나 기능을 추가하는 것은 괜찮다.
예를 들어 메뉴판을 HTML 표로 만들고, 자바스크립트로 정렬 기능을 추가하는 식이다. 크롤러는 HTML 표를 읽어가고, 사람은 자바스크립트 기능을 쓸 수 있다. 둘 다 만족시키는 구조다.
최근 홈페이지 빌더 대부분은 이 방식을 기본으로 지원한다. 직접 개발하거나 외주를 맡길 때만 주의하면 된다.
자주 묻는 질문
자바스크립트로 그린 페이지도 구글 검색에는 나오는데 AI 검색에는 안 나올 수 있나
구글봇은 자바스크립트를 실행할 수 있지만 AI 크롤러 대부분은 실행하지 않는다. 구글 검색 결과에 나온다고 해서 ChatGPT나 Claude 같은 AI가 그 내용을 읽었다고 보장할 수 없다. AI 검색 답변에 나오려면 HTML에 내용이 직접 담겨 있어야 한다.
홈페이지 없이 플레이스와 인스타그램만 운영하면 AI 검색에 안 나오나
플레이스 정보는 AI가 읽을 수 있지만 상세한 설명이나 블로그 글은 홈페이지에 있을 때 인용 가능성이 높아진다. 인스타그램은 AI 크롤러 접근을 제한하는 경우가 많아 게시물 내용이 AI 답변에 직접 인용되기 어렵다. 간단한 HTML 페이지라도 만들어두면 정보 전달 범위가 넓어진다.
robots.txt에서 AI 크롤러를 허용했는데도 인용이 안 되는 이유는 무엇인가
크롤러 접근 허용은 AI가 페이지를 읽을 수 있게 하는 조건일 뿐, 인용을 보장하지 않는다. HTML 구조, 내용의 명확성, 질문과의 관련성 등 여러 요소가 함께 작용한다. 자바스크립트로만 그려진 페이지라면 크롤러가 방문해도 빈 페이지로 인식해 인용할 내용이 없을 수 있다.