남들 다 한다는 최신 기술인 리액트(React)나 뷰(Vue.js)로 홈페이지를 멋지게 리뉴얼했는데, 정작 네이버 검색 결과에는 코빼기도 비치지 않아 당황하신 적 있으신가요? 개발자는 "기술적으로 완벽하다"라고 하는데 마케팅 담당자는 "검색 로봇이 사이트를 못 읽는다"며 발을 동동 구르는 상황 말이죠.
오늘은 제 지인이 야심 차게 쇼핑몰을 SPA(싱글 페이지 애플리케이션) 방식으로 만들었다가, 아주 기본적인 설정 실수로 몇 달간 검색 유입 '0'을 기록했던 뼈아픈 실패담을 들려드리려 해요. 화려한 디자인 뒤에 숨겨진 검색 로봇의 눈물겨운 사정을 이해하신다면, 이웃님의 사이트도 금방 검색 1페이지에 오를 수 있답니다.
🛠️ 자바스크립트 사이트 심폐소생술 3단계
STEP 1. URL에 '#'을 제거하세요. 로봇은 샵(#) 뒤를 읽지 못합니다.
STEP 2. robots.txt에서 .js, .css 파일 접근을 '허용(Allow)'해주세요.
STEP 3. 가능하다면 서버 사이드 렌더링(SSR)을 도입해 미리 완성된 HTML을 보여주세요.
💡 이웃님을 위한 용어 해설!
SPA(Single Page Application)는 마치 스마트폰 앱처럼 페이지 이동 없이 화면이 부드럽게 바뀌는 웹사이트 기술이에요. 사용자에게는 정말 편리하지만, 설정이 꼬이면 검색 로봇에게는 '백지장'처럼 보일 수 있다는 치명적인 단점이 있죠.
"사이트가 백지로 보여요" 검색 로봇의 절규
제 친구인 박 대표는 스타트업을 운영하면서 큰맘 먹고 개발자를 채용해 사이트를 전면 개편했어요. 클릭할 때마다 깜빡임 없이 넘어가는 부드러운 화면 전환, 화려한 애니메이션까지 정말 완벽해 보였죠. 그런데 오픈 한 달이 지나도록 네이버 웹마스터도구의 수집 현황은 처참했습니다. 수집은 해가는데 색인이 안 되거나, 제목이 엉뚱하게 나오는 경우가 태반이었거든요.
원인을 파헤쳐 보니 범인은 바로 '자바스크립트 차단'이었어요. 박 대표네 개발팀이 보안을 이유로 robots.txt 파일에 자바스크립트(.js)와 스타일시트(.css) 파일 접근을 막아버린 거죠(Disallow). 옛날 방식의 HTML 사이트라면 텍스트만 긁어가면 되니 상관없지만, 최신 SPA 사이트는 자바스크립트가 실행되어야만 비로소 화면에 글자가 나타나는 구조거든요.
로봇 입장에서는 사이트에 들어갔는데 뼈대(HTML)만 있고 살(콘텐츠)을 붙여줄 도구(JS)를 못 쓰게 하니, 아무런 내용이 없는 하얀 화면만 보고 돌아올 수밖에 없었던 거예요. 이웃님, 혹시 지금 robots.txt를 열어보세요. 만약 JS나 CSS 경로가 Disallow 되어 있다면 당장 지우시거나 Allow로 바꿔주셔야 해요.
주소창의 샵(#), 검색 로봇에게는 '통곡의 벽'입니다
박 대표의 실수 두 번째는 바로 URL 구조였어요. 사이트 주소를 자세히 보니 mysite.com/#/about, mysite.com/#/product 처럼 중간에 샵(#) 기호가 들어가 있더라고요. 이걸 전문 용어로 '해시뱅(Hashbang)' 또는 '프래그먼트(Fragment)'라고 부르는데요. 개발할 때는 편하지만 검색 최적화에는 최악의 선택이에요.
왜냐고요? 네이버 검색 로봇은 URL에서 # 뒤에 나오는 모든 글자를 무시하고 버려버리기 때문이에요. 로봇의 눈에는 위의 두 주소가 모두 그냥 mysite.com/이라는 똑같은 페이지로 보여요. 수백 개의 상품 페이지를 만들었는데 로봇은 메인 페이지 하나만 인식하는 꼴이죠. 이걸 해결하려면 주소에서 #을 뺀 깔끔한 형태, 즉 '퍼머링크(Permalink)' 구조로 변경해야 해요.
🚫 나쁜 예 vs ✅ 좋은 예
· 나쁜 예 (Fragment): site.com/#/faq
-> 로봇 인식: site.com/ (메인 페이지와 중복 취급)
· 좋은 예 (Permalink): site.com/faq
-> 로봇 인식: site.com/faq (독립된 페이지로 수집 성공!)
로봇을 배려하는 친절한 밥상, SSR(서버 사이드 렌더링)
마지막으로 제가 박 대표에게 가장 강력하게 조언했던 건 바로 '렌더링 방식'의 변화였어요. 쉽게 비유하자면, 기존 SPA 방식(CSR)은 손님(로봇)에게 밀키트를 던져주고 "알아서 조리해 드세요"라고 하는 것과 같아요. 요리 실력이 뛰어난 구글 봇은 어떻게든 해 먹겠지만, 아직 자바스크립트 소화력이 상대적으로 약하거나 바쁜 네이버 봇에게는 부담스러운 식사죠.
그래서 우리는 SSR(Server Side Rendering)이라는 방식을 써야 해요. 이건 주방(서버)에서 이미 요리를 다 끝내서 완성된 접시(HTML)를 손님에게 내어주는 거예요. 로봇이 사이트에 도착하자마자 완성된 텍스트와 이미지를 바로 볼 수 있으니 수집 속도도 빠르고 점수도 후하게 줄 수밖에 없겠죠? 요즘 많이 쓰는 Next.js나 Nuxt.js 같은 도구를 쓰면 이 SSR을 훨씬 쉽게 구현할 수 있답니다.
자주 묻는 질문: SPA는 검색 노출이 불가능한가요?
많은 분이 오해하시는 부분인데, 결론부터 말씀드리면 "절대 그렇지 않다"예요. 네이버 검색 로봇도 계속 진화하고 있어서 자바스크립트를 해석할 줄 알아요. 다만, 일반 HTML 페이지보다 해석하는 데 시간과 에너지(리소스)가 몇 배 더 들 뿐이죠.
문제는 로봇이 하루에 방문할 수 있는 체력이 정해져 있다는 점이에요. 자바스크립트로 떡칠 된 사이트를 해석하느라 힘을 다 써버리면, 정작 중요한 다른 페이지들은 수집하지 못하고 떠나버릴 수 있어요. 그러니 SPA로 사이트를 만드셨다면, 로봇이 최소한의 힘으로 최대한 많은 정보를 가져갈 수 있도록 앞서 말씀드린 설정들을 꼼꼼하게 챙겨주셔야 해요.
📌 개발자에게 이것만 요청하세요!
1. "robots.txt 파일에서 .js, .css 파일 차단(Disallow) 풀어주세요."
2. "URL에 샵(#) 들어가는 거 빼고, 일반 주소(Permalink)로 바꿔주세요."
3. "서버 사이드 렌더링(SSR) 적용이 가능한지 검토해 주세요."
4. "자바스크립트 파일명에 타임스탬프 너무 자주 바꾸지 말아 주세요."
최신 기술로 만든 내 사이트, 검색엔진과 친해질 준비 되셨나요?
오늘 내용이 조금 기술적이라 어렵게 느껴지신다면, 댓글로 사이트 주소나 궁금한 점을 남겨주세요. 제가 직접 들어가서 로봇이 좋아할 만한 상태인지 살짝 봐드릴게요. 이웃님의 성공적인 웹사이트 운영을 늘 응원합니다!
도움이 되셨다면 공감 꾹! ❤️