- 01현실
Vercel·MERJ 조사에서 주요 AI 크롤러는 자바스크립트를 실행하지 않는 것으로 나타났습니다.
- 02위험
본문을 자바스크립트로만 그리면 AI 크롤러에게는 내용이 빈 페이지로 보일 수 있습니다.
- 03대응
본문·제목·메타 정보·주요 링크는 서버에서 완성된 HTML로 내보내야 합니다.
목차
홈페이지를 열면 화면이 멋지게 나오는데, 정작 AI 답변에는 우리 서비스 설명이 한 줄도 인용되지 않는 경우가 있습니다. 원인 중 하나가 화면을 그리는 방식입니다. 이 글은 구글 검색 센터 문서와 Vercel·MERJ의 AI 크롤러 조사 결과를 근거로, 자바스크립트로 그리는 홈페이지가 AI에게 어떻게 보이는지 정리합니다.
홈페이지 화면은 어떤 방식으로 만들어지나요?
크게 두 가지입니다. 서버가 문장까지 다 채운 HTML을 보내는 방식과, 빈 틀을 보낸 뒤 브라우저에서 자바스크립트가 내용을 채우는 방식입니다.
| 방식 | 서버가 보내는 것 | 사람이 보는 화면 | 자바스크립트를 실행하지 않는 로봇이 보는 것 |
|---|---|---|---|
| 서버 렌더링·정적 생성 | 본문이 채워진 HTML | 완성된 화면 | 본문 전체 |
| 브라우저 렌더링 (CSR) | 빈 틀 + 스크립트 | 스크립트 실행 후 완성 | 거의 빈 페이지 |
렌더링은 코드를 실제 화면으로 그려 내는 과정을 말합니다. 사람의 브라우저는 자바스크립트를 실행하니 두 방식의 차이를 느끼기 어렵지만, 로봇은 실행 여부에 따라 전혀 다른 페이지를 보게 됩니다.
구글과 AI 크롤러는 어떻게 다르게 읽나요?
구글은 자바스크립트를 실행해 페이지를 읽지만, 여러 AI 크롤러는 실행하지 않는 것으로 조사됐습니다. 구글 검색 센터 문서는 구글이 크롤링 후 페이지를 렌더링해 자바스크립트로 만든 내용도 처리한다고 설명합니다.
반면 Vercel과 MERJ가 2024년 12월에 공개한 조사에서는, 조사한 주요 AI 크롤러가 자바스크립트를 렌더링하지 않는 것으로 나타났습니다. 여기에는 OpenAI의 GPTBot·OAI-SearchBot·ChatGPT-User, Anthropic의 ClaudeBot, Perplexity의 PerplexityBot이 포함됩니다. 같은 글은 중요한 내용을 서버에서 렌더링하라고 권합니다.
우리 홈페이지가 AI에게 어떻게 보이는지 어떻게 확인하나요?
자바스크립트를 끈 상태에서 본문 문장이 보이는지 확인하면 됩니다. 가장 쉬운 방법은 브라우저의 "페이지 소스 보기"입니다.
- 확인할 페이지를 열고 마우스 오른쪽 버튼 → 페이지 소스 보기를 누릅니다.
- 소스 화면에서 Ctrl+F로 본문의 한 문장(예: 서비스 설명 첫 줄)을 검색합니다.
- 문장이 그대로 있으면 HTML에 본문이 들어 있는 것입니다.
- 빈 div와 스크립트 주소만 있고 문장이 없다면, 자바스크립트로 그리는 방식입니다.
- 제목(title), 설명(meta description), 구조화 데이터도 같은 방법으로 소스에 있는지 봅니다.
개발자 도구에서 자바스크립트를 끄고 새로 고침해 보는 방법도 있습니다. 화면이 하얗게 비거나 메뉴만 남는다면 AI 크롤러도 비슷하게 볼 가능성이 큽니다.
무엇을 HTML로 내보내야 하나요?
검색과 AI 답변에 쓰일 내용은 모두 서버에서 완성된 HTML로 내보내야 합니다. Vercel 조사 글도 본문, 메타 정보, 내비게이션 구조를 서버에서 렌더링하라고 권합니다.
- 본문: 서비스 설명, 칼럼, 가격 안내, FAQ 답변
- 메타 정보: title, meta description, canonical, 구조화 데이터(JSON-LD)
- 링크: 메뉴와 본문 속 링크가 a 태그와 실제 주소로 들어 있는가
- 이미지 설명: 중요한 이미지의 alt 텍스트
- 404·301 같은 응답 코드: 없는 페이지는 실제로 404를 돌려주는가
탭을 눌러야 열리는 내용, 스크롤해야 불러오는 내용도 HTML 안에 미리 들어 있는지 확인합니다. 눈에 보이는 연출은 자바스크립트로 하되, 내용 자체는 처음부터 HTML에 있도록 나누는 것이 원칙입니다.
자주 놓치는 부분은 어디인가요?
본문은 HTML에 있는데, 링크와 숨긴 내용이 자바스크립트에 묶여 있는 경우가 많습니다. 사람은 문제없이 쓰지만 로봇은 다음 페이지를 찾지 못하거나 일부 내용을 놓칩니다.
| 놓치는 부분 | 사람에게는 | 자바스크립트를 실행하지 않는 로봇에게는 |
|---|---|---|
| 클릭 이벤트로만 이동하는 메뉴 | 정상 이동 | 링크가 없어 다음 페이지를 못 찾음 |
| 탭·아코디언 안의 내용을 클릭 후 불러옴 | 클릭하면 보임 | 내용이 HTML에 없음 |
| "더 보기"로 불러오는 칼럼 목록 | 버튼으로 이어 봄 | 첫 몇 개만 보임 |
| 스크립트가 바꾸는 제목·설명 | 바뀐 제목이 보임 | 바뀌기 전 제목을 읽음 |
메뉴와 목록은 실제 주소가 들어간 a 태그로 만들고, 접히는 FAQ도 내용은 처음부터 HTML에 넣은 뒤 화면에서만 접어 두면 됩니다. 이렇게 하면 화면 연출은 그대로 두면서 로봇도 전체 내용을 읽을 수 있습니다.
이미 만든 홈페이지는 어떻게 고치나요?
전부 새로 만들지 않아도 됩니다. 사용 중인 도구에 맞는 방법으로, 중요한 페이지부터 HTML로 내보내면 됩니다.
| 상황 | 고치는 방법 |
|---|---|
| React·Vue 등 프레임워크로 만든 사이트 | 서버 렌더링(SSR)이나 정적 생성(SSG) 기능 사용 |
| 내용이 자주 바뀌지 않는 소개·칼럼 페이지 | 미리 HTML 파일로 만들어 두는 정적 생성 |
| 일부 영역만 스크립트로 불러오는 경우 | 핵심 문장은 HTML에 두고, 부가 기능만 스크립트로 |
| 빌더·플랫폼으로 만든 사이트 | 플랫폼이 서버에서 HTML을 내보내는지 소스 보기로 확인 |
퍼스트초이스는 홈페이지를 만들 때 본문을 서버에서 HTML로 내보내는 것을 기본으로 하고, 이 칼럼 페이지도 같은 방식으로 만듭니다. 오픈 전에는 SEO 31개 항목과 AI 크롤러 접근 진단을 통과해야 오픈합니다. 지금 홈페이지가 AI에게 어떻게 보이는지 궁금하다면 무료 진단으로 먼저 확인해 보세요.
참고 자료
- The rise of the AI crawler Vercel · 2024.12.17
- Understand JavaScript SEO Basics Google Search Central
- Overview of OpenAI Crawlers OpenAI
자주 묻는 질문
Q.구글은 자바스크립트를 실행한다는데 문제가 없지 않나요?
구글은 페이지를 렌더링해 자바스크립트로 만든 내용도 읽습니다. 하지만 AI 서비스의 크롤러가 모두 같은 방식으로 읽는 것은 아니어서, AI 답변까지 생각하면 본문은 HTML에 바로 들어 있는 편이 안전합니다.
Q.우리 홈페이지가 어떤 방식인지 어떻게 알 수 있나요?
브라우저에서 페이지 소스 보기를 열어 본문 문장이 그대로 보이는지 확인하면 됩니다. 소스에는 빈 틀과 스크립트만 있고 문장이 없다면 자바스크립트로 그리는 방식입니다.
Q.이미 만든 홈페이지를 전부 다시 만들어야 하나요?
꼭 그렇지는 않습니다. 사용 중인 프레임워크의 서버 렌더링이나 정적 생성 기능을 켜거나, 검색과 AI에 중요한 페이지부터 HTML로 내보내는 방식으로 고칠 수 있습니다.
AI 6곳의 브랜드 언급률을 매주 측정하고, 그 데이터로 AI가 인용하는 글을 쓰는 팀입니다. 칼럼은 직접 측정하고 확인한 내용만 씁니다.
홈페이지 제작
AI 측정
GEO