React 프로젝트 SEO 최적화 (네이버) 도전기 - lambda@edge 로 성공

 우리 회사 프로젝트는 리액트로 되어 있다. 프로젝트는 약 3년정도 된 프로젝트이고 규모도 꽤나 있는 프로젝트이다.

해당 프로젝트에 네이버 검색엔진에 최대한 많이 노출되게 끔 하는 업무를 하게 되었고 많은 시도 끝에 성공하였다.

 

 우선 SEO 최적화를 진행하기 전에 어떤 상태였는지 말해보겠다.

네이버 서치 어드바이저에 등록이 된 상태였지만, React 프로젝트가 SPA 라서 네이버 검색엔진에 홈 라우터 ( / ) 밖에 노출이 되지 않고 있었다. 네이버 웹 마스터 도구를 이용하여 각 라우터마다 수집 요청을 새롭게 넣어도 잘 노출이 되지 않았다. ( 네이버 웹마스터 가이드에서는 SPA 라도 네이버 검색 엔진 봇이 자바스크립트를 읽어서 페이지를 로드 후 수집을 한다고 되어 있긴 하다. 하지만 우리 프로젝트의 경우 네이버 검색엔진이 잡지 못하고 있었다. 아마 우리  프로젝트의 대부분의 라우터가 로그인 하였을 때만 접근이 가능하기 때문인 것 같다. )

 

목표는 모든 라우터가 네이버 검색 엔진에 잡히게 하는 것으로 정하였고 구글링을 하며 여러가지 방법을 시도하였었다.

 

1.  Pre-Rendering 하기( react-snap , react-hydratable ) - 실패

 우선 React seo 최적화로 구글링을 해보면 가장 먼저 나오는 방식 pre-rendering 을 적용해보았었다. 개념은 리액트 프로젝트를 빌드하고 나서, 프로젝트를 실행시키고 그 이후에 html 을 스냅샷을 찍어서 html 파일을 각 라우터 별로 여러개 생성 후 ReactDOM.hydrate() 함수를 이용하여서 리액트 프로젝트를 돌리는 것이다. 설명이 좀 난해한 것 같다. 정리해보자면  원래 리액트 프로젝트를 그냥 빌드하면 <div id='root'></div> 를 가지고 있는 의미없는 html 파일만을 가지고 있게 된다.하지만 Pre-Rendering 을 적용하면 실제로 내용이 있는 html 파일을 각 라우터 별로 미리 생성할 수 있게 된다.

 

대표적인 라이브러리는 react-snap 이다. 근데 업데이트가 끊긴지 오래되어 버그가 고쳐지지 않고 정상동작되지 않고 있다는 이슈를 보았었다. 그래서 한국분이 만든 라이브러리가 있는데 바로 react-hydratable 라이브러리이다.

 

https://satisfactoryplace.tistory.com/348

[React] 검색엔진 최적화(SEO):: Prerendering (react-hydratable)

 

직접 만드시고 포스팅을 하셨는데 설명이 아주 자세히 되어 있다. 나 또한 해당 라이브러리르 사용해서 Prerendering 을 적용시켜 보았었고, 라이브러리 자체는 문제없이 잘 동작하였다. 다만 우리 프로젝트의 적용해보니 css 일부가 깨지는 현상이 생겼었다. 물론 깨지는 부분을 찾아서 어떻게든 수정을 하면 되는 상황이였다. 그래서 적용을 해서 배포를 해보았다. 결과는..  구글 검색 엔진에는 라우터가 나뉘면서 잘잡혔는데 네이버 검색 엔진에는 결과가 잘 잡히지 않았다.

 

 

2. Next.js 로 바꾸기 - 포기..

계속 알아보다가 딱히 방법을 찾지 못해서 진짜 그냥 프로젝트 자체를 Next.js 로 바꿔볼까 생각했었다. 그래서 많이 알아 보았었는데,, 결과적으로 우리 프로젝트가 너무 컸고, React 버젼도 16 으로 너무 낮았다. 그래서 Next.js 로 바꾸면서 호환되지 않는 라이브러리도 있을 것이라 예상이 되었다. ( 실제로 React 18로 바꾸는 시도를 했었는데 호환되지 않는 라이브러리가 꽤 많아서 실패한 경험이 있었다. ) 그리고 막상 하려니 너무나 오래 걸릴 것 같고 성공할 거라는 보장도 하지 못했다. 그래서.. 다른 포기하였다 

 

3. lambda@edge 사용 - 성공

성공한 방법이다. 해당 방법을 사용하려면 프로젝트가 AWS 의 S3 와 CloudFront 를 이용하여서 배포가 되어야만 한다.

개념은 CDN ( CDN 의 개념을 잘 모르신다면 해당 포스트를 읽어보시길 바란다. https://program-note.tistory.com/30 )
에 각 요청, 응답시에 이벤트를 걸어서 검색엔진 봇인지 아닌지를 판별하여 검색엔진 봇이라 판단되면 완전 다른 html 파일을 응답값으로 전송해주고, 일반 유저인 경우에는 기존 리액트 프로젝트를 전송해주어서 SEO 최적화를 하는 것이다.

즉 검색 엔진 봇이 보는 html 파일과 실제 유저가 보는 html 파일이 다르다는 것이다.

 

해당 작업에 대해서는 아주 아주 잘 작성된 포스팅이 있다. 

https://velog.io/@blue03183/SPA-%EC%97%90-SEO-%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90-with-LambdaEdge

SPA 에 SEO 를 적용해보자 (with Lambda@Edge)

 

진짜 개념부터 하는 방법까지 너무나 잘 정리를 해주신 분이 있어 보고 그대로 따라하면 쉽게 적용할 수 있을 것이다.

필자도 위의 블로그를 참고(거의 그대로)해서 네이버 검색엔진을 속여서 최적화를 진행할 수 있었다.

 

 

사이트를 공개할 수는 없지만... 보면 라우터가 모두 쪼개져서 검색엔진에 잡히는 것을 볼 수 있다.!