자바스크립트로 그리는 페이지는 AI에게 어떻게 보이나 — 본문 노출 확인법

브라우저에서는 제품 설명이 잘 보이는데, 페이지 소스를 열면 그 문장이 없는 경우가 있습니다. 화면을 자바스크립트로 그리는 구조에서 흔합니다.

이 상태가 문제가 되는 이유는, 페이지를 수집하는 쪽이 자바스크립트를 실행해 준다고 보장하지 않기 때문입니다. 실행하는 경우도 있고 HTML만 받아 가는 경우도 있습니다. 후자라면 그 페이지는 본문이 없는 문서로 취급됩니다.

확인하는 세 가지 방법

1. 소스 보기에서 문장을 검색합니다(1분). 페이지에서 오른쪽 클릭 → 페이지 소스 보기를 열고, 화면에 보이는 문장 한 토막을 그대로 검색합니다. 개발자 도구의 요소 탭이 아니라 소스 보기여야 합니다. 요소 탭은 자바스크립트 실행 후의 결과를 보여 주기 때문에 항상 문장이 있습니다.

2. 자바스크립트를 끄고 다시 엽니다(3분). 브라우저 설정에서 해당 사이트의 자바스크립트를 차단한 뒤 새로 고칩니다. 이때 남는 것이 대략 HTML만 받아 가는 쪽이 보는 화면입니다.

3. 명령줄로 HTML을 받아 검색합니다(2분).

curl -s https://example.com/product | grep "화면에 보이는 문장"

결과가 비어 있으면 그 문장은 HTML에 없습니다. 세 방법 중 가장 정확하고, 리다이렉트나 봇 차단이 함께 걸려 있는지도 응답으로 드러납니다.

어디부터 손보는가

전면 재구축을 하지 않고도 순서대로 줄일 수 있습니다.

1. 핵심 페이지의 본문을 서버 응답에 포함합니다. 전체 사이트가 아니라 제품·가격·자주 묻는 질문 페이지처럼 인용됐으면 하는 페이지 몇 개로 시작합니다. 서버 렌더링이나 정적 생성으로 처리합니다.
2. 탭과 아코디언 안의 텍스트를 HTML에 둡니다. 접혀 있어도 HTML에 있으면 읽힙니다. 클릭한 뒤에 내용을 가져오는 구조라면 그 텍스트는 HTML에 없습니다. 자주 묻는 질문 영역이 이 형태인 경우가 많습니다.
3. 링크를 a href로 만듭니다. 클릭 이벤트로만 이동하는 요소는 링크로 읽히지 않아 그 뒤 페이지가 발견되지 않습니다.
4. 무한 스크롤 목록에 페이지 주소를 부여합니다. 스크롤로만 불러오는 항목은 주소가 없어 개별 페이지가 수집 후보에 들어가지 못합니다.

이 판단을 할 때 헷갈리는 것

핵심 페이지 3개를 curl로 받아 문장 하나씩 검색해 보시면 됩니다. 결과가 비면 콘텐츠 작업보다 이 문제가 먼저입니다.