버즈아트(https://bbuzzart.com) 웹서비스의 검색엔진 최적화 (SEO) 작업 진행 과정을 정리 해봤습니다. 비슷한 작업을 하는 분들을 위해 두서없이 정리 했습니다.

• 컨텐츠 서비스를 하고 있는 입장에서 SEO(search engine optimization – 검색엔진 최적화)는 엄청나게 중요한 기능이지만 웹 클라이언트를 SPA로 만들고 있던 타력 때문에 리뉴얼때도 어쩔 수 없이 SPA(React)로 진행 할 수 밖에 없었음

• 웹 SPA Applications은 기능을 구현하고 서비스를 만들기에 용이 하지만 Client에서 서비스를 구동 시킨다는 근본적인 한계 때문에 검색엔진 최적화에는 치명적인 문제를 안고 있었음.

• 그래서 만든 대안이 프록시 서버 – 가장 시급한 일이 페이스북 Open Graph에 대한 대응이었기 때문에 페이스북 검색봇이 서비스에 접근하면 User Agent를 확인하고 별도의 프록시 서버로 리다이렉션하여 Open Graph 메타 데이터를 전송하는것으로 기능 구현함

• 구글봇 역시 프록시에서 처리 하였지만 프록시 서버에서 전달하는 데이터가 실제 서비스의 코어 데이터만 전달 하다보니 검색엔진이 크롤러가 온전한 컨텐츠를 모두 가지고 가지 못하는 문제가 생기고 각 컨텐츠 페이지의 링크 구조가 온전하게 검색엔진에 전송되지 않아서 검색 키워드에 대한 검색 결과가 완전하지 나나타지 않는 현상이 발생 하고 있었음

• 서버 랜더링이 위의 문제들에 대한 완전한 해결방안임을 알고는 있었지만 레거시 코드와 기능 구현 문제로 SSR전환을 쉽게 결정하지 못하는 상태로 상당한 시간이 지나감

• React의 경우 Next라는 프레임워크로 서버사이드 랜더링 기능이 지원 되고 있지만 기존에 사용중이던 클라이언트 Navigation 시스템과 User Management 시스템의 상당한 변경 이슈로 결정을 망설이게됨

• 하지만 꼭 해야 하는 일이라서 Next – React 기반의 프로토타이핑 개발을 진행해서 기존 코드와의 변경점을 확인하고 실제 개발에 착수. https://github.com/zeit/next.js/

동시에 구글 서치엔진 SEO 기능에 대한 서베이 및 개발 진행

• 구글 검색엔진 최적화에 관련한 자료는 대부분 https://developers.google.com/search/docs/guides/ 에서 찾을 수 있음

• https://www.google.com/webmasters/tools/home 에서 구글 SEO 관련 셋팅을 진행함

• 각 컨텐츠에 맞는 구조화 데이터에 대한 메타 데이터 및 LD+Json 스크립트를 지원하면 더 품부한 검색 결과 및 검색결과에서 더 좋은 표시 결과를 얻을 수 있음

• LD+Json은 버즈아트의 경우 컨텐츠를 http://schema.org/VisualArtwork 의 구조와 같이 생성하도록 구성, 다른 컨텐츠 구조는 적절한 스키마를 찾아서 데이터를 삽입하는 과정을 거침

• SiteMap은 가능 하면 모든 링크를 크롤링 후 생성해서 업로드 해주는 것이 원하는 경색 결과를 얻을 수 있음

• 상용 서비스를 이용할 수도 있고 크롤러를 만들 수도 있음

• 우리는 https://github.com/lgraubner/sitemap-generator 를 이용하여 Node.js 기반으로 만들어 사용함

• 컨텐츠는 매일 생성되므로 가능한 자주 SiteMap을 생성하여 업데이트 해주는 것이 SEO에 최적화에 좋은것으로 판단

• 메타 데이터의 생성은 Next – Head Tag를 이용하여 서버 랜더링 상황에서 Setting

결론

• SEO는 참을성이 필요한 작업으로 생각됨

• 검색엔진의 요청사항을 파악하고 꾸준한 업데이트와 최적화의 과정을 거쳐야 최적화 가능

• 작업 완료 이후에도 검색봇이 크롤링 해서 인덱싱 하는 과정에 상당한 시간이 소요되므로 개발완료 이후 1~2달에 걸쳐 꾸준히 검색결과의 변화를 확인하고 조금씩 옵티마이즈하는 과정을 거쳐서 최적화 해야함