안녕하세요. 린치핀소프트 한광희입니다.

“Ajax는 SEO에 악영향을 미치는가?”

 

Ajax(asynchronous JavaScript and XML)

SEO(Search Engine Optimization)

 

웹 서비스에 관심이 있거나 홈페이지를 이용한 마케팅에 관심있는 분들은 위의 Ajax와 SEO용어를 한번씩은 들어보셨을 겁니다.

저도 Ajax 기술을 3년전부터 접해서 꾸준히 애용하고 있는 기술입니다. 3년전 대학교의 소프트웨어 공학 수업에서 “채팅 어플리케이션”을 만드는 프로젝트를 진행했는데, 저희 팀은 이때 Ajax기술을 기반으로 500ms(밀리세컨드)당 새로운 채팅 메시지를 확인하는 폴링(Polling)방식의 채팅 프로그램을 만들었습니다. 이때가 제가 Ajax기술을 처음 접한 때였던것 같습니다

 

PHP,JSP 같은 서버 사이드 프로그래밍 언어의 Form 전송이나 페이지 로드를 통한 데이터 전송방식이 아닌 페이지의 로드없이 서버와 통신할 수 있다는데 호기심이 들었고 채팅 어플리케이션도 기대보다 잘 작동했던 기억이 있습니다. 요즘은 SPA(Single Page Application)을 흐름으로 브라우저에서 구동되는 많은 소프트웨어가 개발되고 있고 HTML5 Web Socket과 Ajax를 기반으로 브라우저와 서버의 통신이 굉장히 자율적이고 능동적인 웹 어플리케이션을 제작 할 수 있게 되었습니다.

 

Ajax 기술의 장점

  • 페이지 로드 또는 폼전송 없이 정보를 갱신/업데이트 할 수 있다.
  • 같은 양의 정보를 ajax로드할때 오버헤드 또는 대역폭이 감소한다.
  • 처리해야 할 정보를 분산시켜 로드할 수 있으므로 병목현상(Bottleneck)을 최소화하여 설계 가능하다
  • 사용자경험(UX)를 대폭 향상 시키는 설계&기획이 가능하다.

 

위의 사항들은 제가 ajax기술을 이용하면서 느꼈던 장점들입니다. 특히 자바스크립트의 핵심 플러그인 중 하나인 jQuery를 이용하여 ajax를 수행하면 크로스 브라우저에 대한 문제없이 간단하고 효과적으로 ajax처리를 할 수 있습니다.

$.ajax({
 url:'http://www.linchpinsoft.com/ajax.php',
 method:'POST',
 async:false,
 data:{action:'sqlUpdate'},
 dataType:'json',
 success:function(json){
  take_JSON();
 }
});

위의 예시처럼 아주 간단한 코드로 Ajax를 수행할수 있고 비록 “비동기 로드”가 기술명칭이지만 해당 Ajax의 결과처리가 완료되기까지 다른 입력을 무시하고 수행을 중단하는 “동기 처리”도 자주 애용합니다.

 

 Ajax는 편리하며 오늘날 웹 서비스를 제작하는데 있어 중요한 요소로 인정받고 있지만, 기술의 단점은 없을까요?

 

어떠한 기술이라도 결국 그 효과와 효율은 해당 기술을 어떻게 사용하냐에 따라 달라진다고 생각합니다. 이 Ajax 기술도 어떻게 이용해야 하는지 잘 검토하고 이용해야 그 효과를 톡톡히 활용 할수 있습니다.

제 생각에 Ajax와 가장 저촉되는 부분은 SEO입니다. SEO는 구글,빙(bing),야후,네이버 같은 검색엔진들에 웹 페이지를 최적화 하는 기술을 일컫습니다. SEO의 궁극적인 목적은 콘텐츠(웹 페이지)를 검색엔진에 등록하여 상위에 랭크되는 것입니다. 같은 콘텐츠여도 일반적인 SEO를 고려했는지 안했는지에 따라 검색엔진의 하위/상위에 등록될 수 있습니다.

근데 어째서 Ajax가 SEO와 충돌 될 수 있을까요?

Ajax는 앞서 말한것처럼 페이지 로드/새로고침 없이 서버로부터 새로운 데이터를 전송받아 화면에 노출할수 있습니다. 보통 ajax를 사용하지 않는다면 새로운 데이터를 로드하기 위해 URL을 변경하여 새로운 자원(URI)에 접속하여야 했습니다. 그런데 AJAX를 통해 데이터의 주소(URI)를 가르키지 않아도 콘텐츠를 페이지에 보여줄수 있게 된것입니다.즉, URL 변경없이 콘텐츠를 서버로부터 수신받을 수 있게 된것이죠.

사실 이런기술을 통해 사용자경험을 증대시켜줄 수 있었기에 웹 개발자한테 큰 환영을 받았습니다. 하지만 검색엔진 입장에서는 항상 콘텐츠는 URI 라는 주소를 통해서여야만 확인 되어 질수 있었습니다. 이는 검색엔진 크롤러(Crawler)라는 소프트웨어를 이용해 웹 페이지를 수집하는데, 보통 Anchor 태그(링크)를 따라 접속하여 페이지의 URL을 기준으로 웹 페이지를 수집하기 때문입니다. 그러나 Ajax는 페이지의 URL변경없이 콘텐츠를 갱신할 수 있으니 이런 부분은 검색엔진 입장에서 해당 콘텐츠를 수집하기가 어렵게 되었습니다.

단적으로 말하면 이용자를 위해 Ajax를 이용해 사용자경험을 증대했지만, 검색엔진의 Crawler 소프트웨어 측면에서는 콘텐츠가 은폐된 셈이 되어버립니다.

 

그래서 가끔 접하게 되는 홈페이지들을 유심히 관찰해보면 Ajax기술을 남용하여 SEO에 악영향을 주는 사례들을 많이 보게됩니다. 최근에 본 한 사이트에서는 하나의 URL안에서 모든 페이지를 Ajax로 갱신하는 형태를 보기도 했는데 역시나 이렇게 홈페이지가 제작되면 검색엔진에서는 하나의 URL만이 수집되어 인덱스 되게 됩니다. 아무리 많은 콘텐츠를 추가하여도 검색엔진 입장에서는 하나의 URL만이 수집되므로 추가된 많은 콘텐츠가 검색엔진에 노출되기는 힘듭니다. 이는 보통 구글 웹마스터,네이버 웹마스터 같은 도구를 이용하여 사이트맵을 제출하여 모든 URL을 등록하는 작업조차도 시도할 수 없게 되어버립니다.

 

그러면 Ajax와 SEO를 효과적으로 사용하는 방법은 무엇일까요?

가장 중요한건 웹 페이지를 개발하고 설계할 때 SEO에 친화적인 페이지를 제작해야 한다는 기준이 분명 설정되어 있어야 한다는 것입니다. 그런데 이부분은 가장 어려운 부분이기도 합니다.

왜 그럴까요? 보통 웹 서비스, 홈페이지 제작을 의뢰하는 분들은 SEO에 대해서 모르는 경우가 종종 있기에  개발 요구사항으로 SEO가 명시되지 않는 경우가 있습니다. 그래서 이 부분은 홈페이지 제작을 맡은 개발자/업체가 고객에게 설명,제안해야 하는 부분이기도 합니다.

또, 서비스에 따라서 SEO 구현이 주요하지 않는 서비스도 있기 마련입니다. 하지만 반대로 블로그,포트폴리오,아카이브 시스템에서는 SEO가 굉장히 중요합니다. 보통 이런 사이트에서는 지속적으로 콘텐츠가 추가 되며 해당 콘텐츠들을 검색엔진에 노출할 수 있게끔 구성하는게 중요한 설계의 핵심이라고 생각합니다.

그래서 웹 서비스 설계 초기에 도메인에 대한 파악과 SEO를 어떻게 효과적으로 최적화하여 콘텐츠를 검색엔진에 잘 노출할 수 있는지 설계해야합니다.

 

보통 저희는 다음과 같은 방법을 제안합니다.

  • 모든 페이지,포스트등은 개별적인 URL을 가지도록 한다.
  • Ajax를 이용하여 해당 콘텐츠에 접근 할 수 있는 방법도 구축하며, 동시에 Ajax로 콘텐츠가 로드되어도 URL이 변경되도록 한다.
  • 콘텐츠의 주소를 설계할때 해시태그(hash tag)는 지양한다.

개발자에게는 작업량을 부담시키는 방향이긴 하지만 Ajax기술을 이용하여 페이지 로드없이 콘텐츠를 변경시키고 콘텐츠가 변경될때는 Javascript를 이용하여 현재의 URL을 변경하는 기법을 이용합니다.

또한 콘텐츠를 접속하는 방안은 Ajax로 해당 콘텐츠를 로드하는 방법주소창에 URL을 입력하여 해당 콘텐츠에 접속 하는 방법 모두 허용되도록 개발합니다.

이런 방법으로 웹 서비스를 개발하면 모든 콘텐츠마다 URL을 가지게 되고 Ajax를 통해 콘텐츠 로드가 되어 사용자경험과 SEO 모두를 만족 시킬수 있습니다. 대신 초기 도메인 설계를 여러부분 고려하여 기획해야 하며 프로그래밍 작업량이 늘어나는 점이 있습니다.

 

위처럼 구성할때는 보통 HTML5의 History API를 이용합니다. 비록 URL을 javascript로 변경하였다 하더라도 실제로 페이지의 새로고침을 통해 로드가 된것이 아니라서 브라우저의 “이전 페이지로 가기”,”다음 페이지로 가기” 버튼이 제대로 동작하지 않습니다. 이 부분은 HTML5 History API의 pushState(), popState 이벤트 리스닝을 통해 매번 이전,다음 페이지에도 ajax가 수행되어 정상적으로 페이지가 보여지게끔 구성할수 있습니다.

HTML5 이용시에 가장큰 문제는 구형 IE 브라우저의 문제인데, 이문제도 폴리필(Polyfill) 라이브러리인 https://github.com/devote/HTML5-History-API 를 이용하여 IE6+ 부터 호환시킬 수 있습니다.

하지만 폴리필을 이용하여 구형브라우저를 지원하고 각 페이지를 Ajax를 이용하여서 사용자경험을 증대하고 SEO에 최적화 시키는 작업은 앞서 말한것처럼 개발시에 고려하고 프로그래밍해야할 부분이 많아지는 단점이 있습니다.

 

결론

Ajax는 개발자에게 편리하고 UI/UX에 강점이 있는 강력한 기술입니다. 그러나 이 기술에 심취한 나머지 간혹 Ajax 가 남용되어 SEO에 악영향을 주는 사이트를 목격하게 됩니다.

어찌보면 이 부분은 개발자의 미숙이라고 생각합니다. 이 부분은 추후 문제가 발견되어도 전체 웹 서비스의 설계를 다시 해야하므로 큰 비용을 수반하기 때문입니다.

저희처럼 웹 서비스를 개발하는 개발자들은 SEO에 대한 연구와 Ajax를 최적으로 이용하여 효과적인 개발방법을 계속 찾아야 된다고 봅니다.

History API처럼 효과적으로 SEO와 AJAX를 결합시킬수 있는 방법도 있습니다. 하지만 이는 개발자에게 더 많은 프로그래밍 코드와 노력을 요구합니다.

전체적인 프로젝트 비용과 기간, SEO의 활용성, Ajax의 효과적인 이용과 UI/UX고려 등 많은 부분이 참고가 되어야 합니다.

결국, 이 요건들을 잘 결합하여 사용자 경험을 보장하면서 SEO에도 친화적으로 웹사이트를 개발하는 것이 개발자들의 실력이겠지요.