[React] - 디벨킷이 SEO에게 선택받다.
가끔 구글검색창에 손이 가는 대로 검색하는 경우가 있다.
어떤 단어든 말이다.
우연찮게 손이 가는대로 오늘
프로젝트이름인 디벨킷을 검색해 봤는데
오잉?
익숙한 문구와 도메인이 가장 상단에 떠서 들어가 보니
우리가 만들었던 프로젝트의 웹페이지가 나왔다.
원래는 검색이 안 됐던 걸로 기억하는데
뭐지?
클라이언트 사이드 렌더링 방식으로 동작하는
SPA(이하 싱글페이지 애플리케이션)
프로젝트의 가장 큰 단점 중 하나가
검색 엔진 최적화가 안 되는 것인데
어떻게 우리 프로젝트가 검색엔진에 등록되는 것일까?
최근
SSR(이하 서버사이드 렌더링), CSR(이하 클라이언트 사이드 렌더링에
호기심이 생겨서
이것저것 공부해 보다가 이번 기회로
CSR은 어떻게 구글검색이 되는지 찾아보게 됐다.
처음엔 웹 호스팅과 서버 호스팅을
오랫동안 켜놔서 그런가?라고 생각했는데
( 타입스크립트로 변환한다고 서버 계속 살려달라고 부탁드림.. ㅎㅎ)
반은 맞고 반은 틀렸다는 게 내 결론이다.
정확히는
포털 서비스에서 어떤 크롤러를 선택하느냐에 따라 다르다.
크롤러는 웹 사이트를 검색 결과에 표시시키기 위해
검색엔진에 웹 사이트의 존재나 정보를 인식시키는
프로그램이다.
아래는 구글 SEO 관련 글에서 일부 발췌 했다.
흔히들 하는 오해가 CSR은 SEO가 잘 되지 않는다라는 것인데
많은 크롤러들이 자바스크립트를 지원하지 않기 때문에 발생한 오해다.
Google Bot(크롤러)은 JavaScript를 지원하기 때문에
CSR 사이트도 SEO가 잘 된다. 특히, 최신 버전의 Google Bot은
ES2015 이상의 최신 JavaScript도 지원한다. 또한 Full SSR 없이도 메타 태그들을
잘 활용하면 SEO를 잘 지원할 수 있다
그렇다면 구글검색엔진의 크롤러는 자바스크립트를 지원하기 때문에
CSR방식의 애플리케이션도 검색이 되는구나!
그러면 네이버는 안 되겠네...
하고 검색해 봤는데
네이버는 실제 서비스 주소뿐만 아니라
렛플이라는 사이트의
사이드프로젝트 엑스포 카테고리에까지 올려져 있는 걸
가져왔다.
Angular, React, Vue.js 등의 프레임워크 생태계에 맞춰
SPA 기반으로 제작된 사이트를 수집 및 색인을 지원하고 있다는 걸 알 수 있다.
물론 SSR만큼의 최적화가 이루어지진 않겠지만
( SSR만큼 최적화가 잘됐다면 배포를 한 후 4개월씩이나 검색이 안되지는 않았을 것..)
요즘 트렌드인 CSR방식의 SPA도
검색엔진의 레이더망에 걸린다는 걸 알 수 있다.
오해하고 있었던 부분은
CSR은 SEO가 '전혀' 안된다라고 알고 있었는데
'잘' 안되는 것뿐이었다.
구글과 네이버에 내가 만든 사이트가 검색되니
묘하면서도 뿌듯한 기분....
다음 사이트는 언제쯤 올려볼 수 있을까
열심히 달려보자 파이팅