버즈아트 SEO 관련 작업 정리

 

버즈아트(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 기반의 프로토타이핑 개발을 진행해서 기존 코드와의 변경점을 확인하고 실제 개발에 착수.

 

  • 동시에 구글 서치엔진 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달에 걸쳐 꾸준히 검색결과의 변화를 확인하고 조금씩 옵티마이즈하는 과정을 거쳐서 최적화 해야함

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중