자바스크립트로 그린 본문을 크롤러가 못 읽는 경우와 확인법
화면에는 멀쩡히 보이는데 검색엔진에는 빈 페이지인 사이트가 있습니다. 최신 방식으로 만든 홈페이지에서 자주 생기는 문제와, 개발 지식 없이 확인하는 방법을 적었습니다.
사장님 눈에 이상이 없는데 검색엔진에는 백지인 홈페이지가 있습니다. 원인은 대개 페이지를 그리는 방식이고, 우리 사이트가 여기 해당하는지 보는 데는 소스 보기 한 번이면 됩니다. 디자인도 좋고 속도도 빠른 새 홈페이지일수록 오히려 이 문제를 자주 만납니다.
예전 방식은 서버가 완성된 문서를 보내줬습니다. 요즘 유행하는 방식은 빈 틀만 먼저 보내고, 방문자의 브라우저에서 자바스크립트라는 프로그램이 돌면서 내용을 그립니다. 사람의 브라우저에서는 아무 문제가 없는데, 프로그램을 돌려주지 않는 로봇에게는 빈 틀만 보입니다.
누가 못 읽나
구글은 자바스크립트를 돌려 보는 능력이 있지만, 두 단계로 나눠 처리하기 때문에 색인이 늦어지고 일부는 누락됩니다. 문제는 구글 밖입니다. 네이버는 이 처리가 구글보다 훨씬 보수적이고, 챗GPT 같은 AI 의 크롤러는 상당수가 자바스크립트를 아예 안 돌립니다. 즉 이 방식의 사이트는 구글에서 늦고, 네이버에서 자주 빠지고, AI 에게는 안 보일 확률이 높습니다.
개발 지식 없이 확인하는 법 2가지
소스 보기 검색. 문제의 페이지에서 마우스 오른쪽 버튼 → "페이지 소스 보기". 화면에 보이는 본문 문장 하나를 복사해서 이 소스 화면에서 Ctrl+F 로 찾아보세요. 있으면 정상이고, 없으면 본문이 나중에 그려지는 구조입니다.
서치콘솔 URL 검사. 해당 주소를 URL 검사에 넣고 "크롤링된 페이지 보기"를 열면 구글이 실제로 받아 간 내용이 나옵니다. 여기에 본문이 없다면 구글 기준으로도 문제가 확정된 겁니다.
두 가지 다 1분짜리 확인입니다. 그런데 이 1분을 안 해서, 글을 100편 쌓고도 색인이 안 되는 이유를 다른 데서 찾는 경우가 많습니다.
문장을 고를 때 요령이 하나 있습니다. 제목이나 회사 이름처럼 여기저기 쓰이는 말 말고, 그 페이지에만 있는 긴 문장의 가운데 토막을 잡으세요. 짧은 낱말은 메뉴나 스크립트 안에도 들어 있어서, 소스에서 걸렸는데도 정작 본문은 비어 있는 착시가 생깁니다.
검색엔진마다 얼마나 차이가 나나요
같은 페이지라도 읽는 쪽에 따라 결과가 갈립니다. 아래 세 줄이 이 글의 요지이기도 합니다.
| 읽는 쪽 | 자바스크립트 처리 | 이때 벌어지는 일 |
|---|---|---|
| 구글 검색 | 두 단계로 나눠 처리합니다 | 색인이 늦고 일부가 빠집니다 |
| 네이버 검색 | 구글보다 보수적입니다 | 본문이 자주 누락됩니다 |
| AI 크롤러 | 상당수가 실행하지 않습니다 | 빈 틀만 수집해 갑니다 |
그래서 판단 기준은 "구글에 색인됐는가"가 아니라 "어디까지 잃고 있는가"가 됩니다. 구글 유입만 보고 문제없다고 정리하면, 네이버와 AI 답변 쪽에서 새는 몫은 계속 보이지 않는 상태로 남습니다.
고치는 방향
전면 재제작이 아니라 부분 수리로 됩니다. 검색으로 들어와야 하는 페이지, 그러니까 글 목록과 글 본문과 서비스 소개만 서버에서 완성된 문서로 내려주게 바꾸는 겁니다. 개발사에는 "검색 필요한 페이지에 서버 사이드 렌더링(SSR)이나 사전 렌더링을 적용해 달라"고 요청하면 됩니다. 관리자 화면이나 예약 기능처럼 검색과 무관한 페이지는 지금 방식 그대로 둬도 아무 문제 없습니다.
새로 홈페이지를 계약할 때라면 계약 전에 물어볼 한 문장도 이겁니다. "본문이 소스 보기에서 바로 보이나요?" 이 질문 하나가 리뉴얼 뒤 유입 반토막과는 다른 종류의, 처음부터 유입이 안 생기는 사고를 막아 줍니다.
개발사에 무엇을 요청하나요
말을 정확히 옮기는 것이 절반입니다. "검색이 안 돼요"라고만 전하면 원인이 다른 곳에서 찾아지고, 견적도 사이트 전체로 커집니다. 아래 네 줄을 그대로 전달해도 됩니다.
| 요청 문장 | 적용할 곳 | 받은 뒤 확인 방법 |
|---|---|---|
| 서버에서 완성된 HTML 로 내려 주세요 | 글 목록과 글 본문 | 소스 보기에서 본문 문장 검색 |
| 사전 렌더링이라도 적용해 주세요 | 서비스 소개, 안내 페이지 | 같은 방법으로 문장 한 줄 확인 |
| 주소는 그대로 두고 방식만 바꿔 주세요 | 이미 색인된 페이지 전부 | 바뀐 주소가 없는지 목록 대조 |
| 관리자와 예약 화면은 손대지 마세요 | 검색과 무관한 기능 | 기존 동작이 그대로인지 점검 |
세 번째 줄이 빠지면 고치면서 주소가 바뀌고, 그동안 쌓아 둔 색인을 함께 잃는 일이 생깁니다. 방식만 바꾸고 주소는 유지한다는 조건을 먼저 못 박아 두십시오.
고친 뒤에는 어떻게 확인하나요
적용이 끝났다는 말을 들었다고 끝이 아닙니다. 같은 순서로 다시 봐야 확인이 됩니다.
- 소스 보기에서 본문 문장이 잡히는지 유형마다 한 장씩 봅니다
- URL 검사 도구에서 크롤링된 페이지에 본문이 들어왔는지 확인합니다
- 리치 결과 테스트에 주소를 넣어 렌더링된 결과와 오류를 함께 살핍니다
- 네이버 서치어드바이저에서 수집과 반영 상태를 따로 점검합니다
- 며칠 뒤 실적 보고서에서 해당 페이지의 노출이 생기는지 지켜봅니다
반영에는 시간이 걸립니다. 고친 날 바로 순위가 움직이지 않는다고 되돌리면, 원인과 결과가 뒤엉켜 다음 판단이 더 어려워집니다. 적용한 날짜를 어딘가에 적어 두고 그 앞뒤 기간을 나눠 보는 것이 안전한 방법입니다.
이 방식으로 해결되지 않는 것은 무엇인가요
다만 서버에서 문서를 내려주게 바꿨다고 검색 유입이 저절로 생기지는 않습니다. 이 작업이 없애는 것은 "읽히지 않는 상태"이지, 읽힌 뒤에 고를 이유까지 만들어 주지는 못합니다. 빈 틀 문제를 고친 사이트가 그다음에 부딪히는 것은 대개 내용의 문제입니다.
구글 문서가 자바스크립트 사이트에 요구하는 것도 특별한 기술이 아니라 같은 원칙입니다. 크롤러가 사람과 같은 것을 볼 수 있게 해 두라는 것. 그 조건이 갖춰진 뒤에야 내용이 평가받을 자리에 섭니다.
사장님들께 가장 자주 받는 질문부터 다룹니다. 답이 갈리는 자리는 추측으로 넘기지 않고, 직접 확인한 만큼만 적습니다.