01DEFINITION
한 줄로 말하면
검색엔진과 AI 크롤러 대부분은 자바스크립트를 실행하지 않고 서버가 내려준 HTML 만 읽습니다. 화면은 브라우저에서 그려지니 사람 눈에는 멀쩡한데, 서버가 보낸 원본에는 껍데기만 있고 본문이 한 줄도 없는 경우가 있습니다. 그러면 그 페이지는 기계에게 빈 문서입니다. 리액트나 뷰로 만든 사이트에서 흔하고, 색인은 되는데 본문이 안 잡혀서 검색결과에 제목만 나오거나 AI 답변이 회사 이름조차 못 가져가는 증상으로 나타납니다. 페이지 소스 보기로 본문 한 문장을 찾아보면 바로 확인됩니다.
02RISK
없으면 무슨 일이 생기나
검색엔진과 AI 크롤러가 자바스크립트를 실행해 주는 것은 예외이지 원칙이 아닙니다. 구글은 실행해 주지만 순서가 뒤로 밀리고, 국내 검색과 대부분의 답변엔진 크롤러는 받은 HTML 을 그대로 읽고 끝냅니다. 그래서 같은 페이지가 검색엔진마다 다르게 취급됩니다. 구글에서는 잘 나오는데 네이버에서만 안 나온다는 상담의 상당수가 이 자리에서 시작됩니다.
증상이 고장처럼 보이지 않는 것이 이 항목의 가장 큰 문제입니다. 주소는 200 으로 열리고 색인도 됩니다. 다만 검색 결과에 제목만 나오고 설명이 비거나, AI 에게 회사를 물으면 사업 내용은 모른 채 이름만 말합니다. 화면 어디에도 오류가 없으니 원인을 찾는 데 몇 달이 걸립니다.
리액트나 뷰로 만든 사이트, 또는 페이지 전체를 관리도구로 조립하는 빌더에서 자주 나옵니다. 만들 때는 화면이 잘 나오는지만 확인하고 넘어가기 때문입니다. 개발이 끝나고 마케팅이 시작될 무렵, 광고를 아무리 붙여도 자연 유입이 늘지 않는 형태로 뒤늦게 드러납니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
브라우저의 페이지 소스 보기로 본문 한 문장을 찾는다
가장 빠른 확인법입니다. 개발자도구가 아니라 소스 보기여야 합니다. 개발자도구는 자바스크립트가 다 돈 뒤의 결과를 보여 주므로 언제나 정상으로 보입니다. 소스 보기에서 화면의 첫 문단을 검색해 나오지 않으면 이 항목입니다.
브라우저에서 Ctrl+U (페이지 소스 보기) 그 창에서 Ctrl+F → 화면에 보이는 문장 한 줄을 붙여넣기 찾지 못하면 → 서버 HTML 에 그 문장이 없다는 뜻
-
02
자바스크립트 없이 받아 본다
명령 한 줄로 크롤러와 같은 조건을 만듭니다. 받은 문서에서 태그를 걷어 낸 글자 수를 세면 우리 판정과 같은 값을 볼 수 있습니다.
$ curl -s https://example.com | sed -e 's/<[^>]*>//g' | tr -s ' \n' ' ' | wc -c 340 ← 본문이 340자. 우리 기준은 500자입니다
-
03
HTML 크기와 본문 크기의 비를 본다
전체는 큰데 글자는 적은 상태가 전형적인 증상입니다. 우리 판정은 본문이 500자에 못 미치면서 HTML 대비 2% 미만일 때 실패, 그 사이는 주의로 나눕니다.
$ curl -s https://example.com > /tmp/p.html $ wc -c < /tmp/p.html # 전체 바이트 $ sed -e 's/<[^>]*>//g' /tmp/p.html | tr -s ' \n' ' ' | wc -c # 본문 글자
-
04
구글 서치콘솔의 URL 검사에서 렌더링 결과를 본다
구글이 실제로 어떤 HTML 을 받아 갔는지를 보여 줍니다. 소유확인이 돼 있어야 쓸 수 있지만, 이 항목에서는 가장 확실한 근거가 됩니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
틀을 바꾸는 조치라 가장 크지만 가장 확실합니다. 넥스트나 넉스트 같은 도구는 설정 한두 줄로 서버 렌더링과 정적 생성을 켤 수 있습니다. 페이지 수가 적고 내용이 자주 바뀌지 않는 회사 소개나 서비스 소개라면 사전 생성이 더 간단합니다.
# Next.js — 페이지 단위로 정적 생성
export async function getStaticProps() {
return { props: { … }, revalidate: 3600 };
} 전면 개편이 어려운 경우가 많습니다. 그때는 유입이 필요한 페이지, 즉 홈과 서비스 소개와 문의 안내부터 손댑니다. 나머지 관리 화면은 지금처럼 두어도 검색에서 잃을 것이 없습니다.
가장 싼 응급조치입니다. 그 페이지가 무엇에 대한 문서인지 말하는 두세 문단을 서버가 내려주는 HTML 에 직접 적어 두십시오. 자바스크립트가 나중에 같은 자리를 다시 그려도 됩니다. 크롤러는 첫 응답만 읽고 가므로 그것만으로 빈 문서 상태를 벗어납니다.
<div id="app"> <!-- 자바스크립트가 나중에 이 자리를 다시 그린다 --> <h1>서울 강남 치과 · 임플란트 전문</h1> <p>2009년 개원 이후 임플란트 시술 …</p> </div>
설정을 켜 두고 실제로는 적용되지 않은 경우가 흔합니다. 빌드 방식이나 배포 경로에 따라 개발 환경에서만 켜지는 일이 있습니다. 배포된 주소에서 확인법 1번을 다시 해 보는 것으로 끝냅니다.
05FAQ
자주 묻는 질문
구글은 자바스크립트를 실행한다는데 그래도 문제가 되나요
- 실행은 하지만 순서가 다릅니다. 먼저 HTML 만 읽어 색인하고, 렌더링은 자원이 남을 때 따로 처리합니다. 그 사이의 시차가 며칠에서 몇 주까지 벌어지고, 내용이 자주 바뀌는 페이지는 그 시차 때문에 계속 낡은 상태로 노출됩니다. 그리고 국내 검색과 답변엔진 크롤러는 대부분 그 두 번째 단계 자체가 없습니다.
워드프레스나 그누보드로 만든 사이트도 해당되나요
- 대개는 아닙니다. 그런 도구는 서버에서 HTML 을 완성해 내려보내기 때문입니다. 다만 최근 테마 중에 목록이나 본문을 자바스크립트로 불러오는 것들이 있고, 그 부분만 기계에게 비어 보일 수 있습니다. 확인법 1번을 그 페이지에서 한 번 해 보시면 됩니다.
주의로 나왔는데 그냥 두어도 되나요
- 본문은 있는데 짧은 상태입니다. 당장 색인이 끊기지는 않지만, 검색결과 설명과 AI 답변이 무엇을 인용할지 정할 재료가 부족합니다. 페이지의 목적을 설명하는 문단을 두어 개 늘리는 것으로 대개 해결되고, 그것은 사람이 읽기에도 나아지는 방향입니다.
고치면 얼마나 빨리 검색 결과가 달라지나요
- 다시 크롤될 때까지 기다려야 합니다. 보통 며칠에서 몇 주이고, 서치콘솔에서 색인을 요청하면 앞당길 수 있습니다. 다만 이 항목은 순위를 올리는 조치가 아니라 경쟁에 참가할 자격을 얻는 조치라, 효과는 순위보다 노출 문구가 제대로 나오기 시작하는 쪽에서 먼저 보입니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 39가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.