티스토리 뷰

얼마 폴인 웹을 angular.js 기반으로 만들었다


구글의 자바스크립트 프레임웤인 Angular.js 사용해 SPA(Single Page Application) 만들었는데 구조가 기존의 웹보다는 오히려 앱개발하는 느낌으로 개발 있고, 앱에서 사용하려고 만들어둔 API 그대로 사용할 있는 장점이 있어서. 이를 선택했다


문제는 만들고 보니, 자바스크립트로 컨텐츠를 동적으로 불러오다 보니 검색엔진이 크롤링을 못해간다...이런 망할


이에대해서 검색을 해보니 SPA들은 주소에 # 사용하는데, 구글봇은 중에 특히 #!형태인 페이지들은 구글 못이 처리할 있는 다른 페이지(static page) 있다는 것으로 인지한다고 한다.


http://folin.us/#/folder/folderId   ->  http://folin.us/#!/folder/folderId

이렇게 주소를 바꾸면 구글봇이 오른쪽과 같은 주소를 발견하면 주소가 아닌 http://folin.us/?_escaped_fragment_=/folder/folderId 같은 주소로 요청을 보내고 응답으로 오는 페이지를 크롤링 한다


추가로, html5에서는 historyApi 지원해서 # 사용하지 않고도 구현을 있다. 경우에는 #! 사용해서 ajax페이지라는 것을 표시할 없기 때문에 

<meta name="fragment" content="!">라고 적어두면 마찬가지 방법으로 크롤링을 한다


언듯 생각하면 페이지를 처리할 있게 해주면 되니 문제가 해결된 같지만, 애초에 자바스크립트를 사용해 구현을 했기 때문에 정적인 페이지가 따로 없다. 구현을 해줘야 하는데, 서버로 Node.js 사용하는 경우에는 몇가지 라이브러리가 이런 처리를 대신해주는 것들이 있다. (Prerender.io라던가..) 심지어 SPA SEO 위한 유료 서비스들도 존재한다. 아무튼, 앱엔진에다가 파이썬에 플라스크기반으로 만들었더니 저런 처리를 해주기가 너무 애매했다. 차라리 angular.js 버리고 다시 만들어야 하나...고민을 하면서 며칠 시간을 보냈다


결국 앱엔진에서는 답이 없고다시 구현하는 것도 싫어서 서버를 하나 띄우고 Node 환경 설정을 하고난   서버에서 어떻게든 정적인, ajax 끝난 결과를 가져와서 어딘가에 저장하고, 앱엔진에서는 _escaped_fragment_ 호출이 오는 경우에만 서버로 요청을 보내 정적인 페이지를 가져와 보여주는...더럽디 더러운 방법을 진행하는 도중에 (정말 다행히도 많이 진행하기 전에..)


새로운 글을 발견했다.

 

http://googlewebmastercentral.blogspot.kr/2015/10/deprecating-our-ajax-crawling-scheme.html


구글이 Ajax Crawling deprecate한다고 발표했다이제 직접 모던 브라우져처럼 렌더링해서 크롤링 한다고 한다.

( 글이 올라온 시점이 내가 클롤링이 안된다는걸 알게되고 #! 사용해야 한다는 것을 알게된 그즈음이다놀라운 타이밍!!!)


그래서 결론적은 

최근 내가 공부하고 고민하고 했던, 그리고 위에서 장황하게 설명한 내용은 쓸모 없다


p.s. 아직 소식이 아직 얼마 안된건지, 전부터 있던게 다시 올라온건지 모르겠지만 아무튼 정보를 찾을 없어서 적어봤다.


댓글
댓글쓰기 폼