공들여 만든 웹사이트가 모바일 검색 결과에서 뒷전으로 밀려나 있다면, 가장 먼저 의심해야 할 것은 디자인이 아니라 단 한 줄의 코드 설정입니다. 반응형 웹이라고 철석같이 믿고 있었는데 정작 스마트폰으로 접속했을 때 글씨가 깨알처럼 작게 보여 당황했던 경험, 누구나 한 번쯤은 있을 거예요.
· head 태그 내 viewport 메타 태그 삽입 여부 확인
· 모바일 전용 URL 운영 시 canonical 태그로 원본 주소 명시
· 자바스크립트 대신 HTTP redirect를 이용한 자동 이동 구현
분명 반응형인데 왜 내 폰에선 개미 글씨처럼 보일까요?
얼마 전 제 가까운 지인이 야심 차게 의류 쇼핑몰을 열었습니다. 비용을 꽤 들여서 최신 트렌드라는 반응형 웹으로 제작했죠. 근데 오픈 첫날부터 문제가 터졌습니다. 지인이 다급하게 연락이 와서는 "모바일에서 접속하면 화면이 너무 작아서 상품명이 아예 안 보여!"라고 소리를 지르더라고요.
사실 반응형 웹이라는 게 말이죠, 단순히 레이아웃이 유동적이라고 해서 다 해결되는 게 아닙니다. 기기의 화면 크기를 브라우저가 인지하게 해주는 이른바 '안경'을 씌워줘야 하거든요. 솔직히 말씀드리면 이게 안 되어 있으면 검색 로봇은 이 사이트가 모바일에 부적합하다고 판단해버립니다.
그게 바로 viewport 메타 태그입니다. HTML 문서 상단에 있는 head 영역에 단 한 줄만 넣으면 되는 작업인데, 이걸 놓치는 경우가 의외로 많습니다. 진짜로요. 지인의 사이트도 확인해보니 이 코드가 빠져있었습니다.
단 한 줄의 코드가 가르는 검색 순위의 운명
반응형 웹은 웹 브라우저가 웹문서의 가로폭을 기기의 스크린 크기에 맞게 자동적으로 조절하는 기법입니다. 이때 핵심은 브라우저에게 "이 기기의 가로폭에 맞춰서 콘텐츠를 보여줘"라고 명령을 내리는 것입니다. 그 명령어가 바로 아래와 같습니다.
<meta name="viewport" content="width=device-width">
이 코드 한 줄 덕분에 사용자는 페이지를 억지로 확대하거나 축소할 필요 없이 콘텐츠를 편하게 소비할 수 있게 됩니다. 네이버나 구글 같은 검색 엔진은 이런 모바일 사용성이 확보된 페이지에 더 높은 점수를 줍니다. 그러니까 당연히 순위가 올라갈 수밖에 없겠죠.
지인은 이 코드를 넣자마자 모바일 화면이 시원시원하게 정렬되는 걸 보고 안도의 한숨을 내쉬었습니다. 근데 문제는 여기서 끝이 아니었습니다. 검색 결과에서 중복 문서 문제가 발생하기 시작했거든요. 이건 또 다른 이야기입니다.
별도의 모바일 주소를 쓰고 있다면 이것만큼은 꼭
요즘은 반응형 웹이 대세지만, 여전히 데스크톱용 주소와 모바일용 주소(m.으로 시작하는 주소)를 따로 운영하는 곳들이 많습니다. 제 지인도 처음에는 반응형으로 시작했다가, 나중에 모바일 전용 기능을 강화하고 싶어서 별도의 모바일 URL을 생성했는데요.
여기서 아주 치명적인 실수를 저질렀습니다. 똑같은 내용의 글이 두 개의 URL에 존재하게 된 것이죠. 네이버 검색로봇이 방문했을 때, "어? 이거 아까 본 글인데 왜 주소가 다르지? 혹시 베낀 건가?"라고 오해를 할 여지가 충분했습니다.
이럴 때는 네이버 검색로봇에게 어느 주소가 진짜 원본인지 명확하게 알려줘야 합니다. 바로 canonical(대표 주소) 설정입니다. 모바일 사이트의 개별 웹 페이지 상단에 데스크톱 사이트의 원본 URL을 명시적으로 적어두는 것이죠. 결과적으루 검색 로봇이 중복 처리를 하지 않게 도와주는 셈입니다.
· 모바일 페이지 head 영역에 <link rel="canonical" href="데스크톱URL"> 삽입
· 데스크톱과 모바일 사이트 모두 네이버 웹마스터도구에 등록
· 콘텐츠가 1:1로 대응되도록 주소 체계 관리
검색 로봇이 길을 잃지 않게 만드는 이정표
지인의 사례를 계속해볼게요. 친구는 canonical 설정을 마치고 나서야 검색 결과에서 자신의 글이 하나로 합쳐져 노출되는 걸 확인할 수 있었습니다. 근데 뭐랄까, 웹사이트 운영이라는 게 하나를 해결하면 또 다른 게 튀어나오더라고요.
이번에는 방문자 이탈이 문제였습니다. 데스크톱 사용자가 모바일 전용 주소로 들어오거나, 그 반대의 경우에 사용자는 굉장히 불편함을 느낍니다. 그래서 우리는 기기에 맞는 주소로 자동으로 보내주는 '리다이렉트' 처리를 고민하게 됩니다.
여기서 중요한 포인트가 하나 더 나옵니다. "어떻게 이동시키느냐"의 기술적인 선택이죠. 보통 초보 개발자나 블로거들은 구현이 쉬운 자바스크립트를 사용하곤 합니다. 하지만 이건 네이버 검색로봇이 가장 싫어하는 방식 중 하나예요.
리다이렉트, 자바스크립트에 맡기면 위험한 이유
네이버 검색로봇은 기본적으로 HTML 코드를 읽습니다. 하지만 자바스크립트는 경우에 따라서 감지를 못 하거나 무시해버리는 경우가 많습니다. 만약 자바스크립트로 리다이렉트를 걸어두면 검색 로봇은 페이지의 내용을 제대로 수집하지 못한 채 텅 빈 페이지만 보게 될 수도 있어요.
그래서 반드시 HTTP redirect를 사용하라고 권장하는 겁니다. 서버 단에서 "이 사람은 모바일 기기니까 m. 주소로 보내"라고 즉각적으로 신호를 주는 방식이죠. 기술적인 문제로 도저히 HTTP 리다이렉트가 어렵다면, 차선책으로 자바스크립트를 쓰되 본문 내용은 비워두는 게 낫습니다. 하지만 어디까지나 차선책일 뿐이죠.
사실 저도 처음 공부할 때는 이런 세세한 설정이 무슨 의미가 있나 싶었습니다. 근데 사이트를 운영해보니까 알겠더라고요. 이런 작은 디테일이 쌓여서 결국 검색 결과 상단에 내 글이 걸리느냐 마느냐를 결정합니다.
지인은 결국 모든 설정을 정석대로 고쳤고, 다행히도 지금은 모바일 검색에서 꽤 괜찮은 위치에 쇼핑몰이 노출되고 있습니다. 설정했는대도 순위가 안 나온다고 고민하던 시간이 아까울 정도였죠. 결국 기본이 제일 중요합니다.
모바일 검색 상위 노출은 단순히 운이 아닙니다. 뷰포트 메타 태그로 시인성을 확보하고, 대표 주소(canonical) 설정으로 중복 문서를 방지하며, 올바른 리다이렉트 방식으로 검색 로봇의 수집 효율을 높이는 것. 이 세 가지만 제대로 해도 여러분의 사이트는 이미 상위 1%의 모바일 사용성을 갖춘 셈입니다.
내 사이트가 왜 모바일에서 성과가 안 나오는지 답답하셨다면 지금 바로 head 태그 안을 들여다보세요. 답은 의외로 아주 가까운 곳에 숨어 있을지도 모릅니다. 잘 해결되길 응원할게요.