[React] 리액트 SEO 도전기

지금 있는 회사에서 어쩌다보니 프론트엔드 리드를 하게 된 후, aws 스터디에 이어 리액트로 seo를 해야 하는 상황에 봉착했다. 그래서 최대한 많은 구글링 이후 지금까지 시도해본 것들을 기록해보고자 한다.

 

1. Sitemap 만들기

SEO를 개선하기 위해 react-router-sitemap 라이브러리를 사용하여 public 폴더 안에 sitemap.xml 파일을 생성하였다.

 

리액트 프로젝트 사이트맵 생성

 

2. robots.txt 설정

구글봇(구글 웹 크롤러 봇) 에게 수집 정보를 알려주는 robots.txt 파일을 설정해준다.(React 에서는 public 폴더 내) 나는 Sitemap 파일을 SitemapGenerator를 통해 만든 sitemap.xml 파일의 위치를 명시하여 구글 크롤러 봇의 접근이 쉽도록 하였다. 그런데 SitemapGenerator를 위한 패키지가 버전이 업데이트가 되지 않아 리액트를 무려 16버전으로 낮춰야하는 문제가 있었다. 기능상으로는 문제가 없어서 일단은 진행하고 있지만 sitemap을 굳이 사용하는 의문점도 있고, 사용한다해도 패키지를 사용하지 않고 다른 방식으로 앞으로는 시도해야할 것 같다. 좀 더 스터디가 필요한 부분이다.

 

 

3. React-Helmet으로 페이지별 meta 태그 설정하기

SEO에서 가장 중요한 점 중 하나가 meta 태그를 설정하는 것이다. 그런데 리액트와 같은 SPA는 html이 하나여서 라우트가 변경될 때마다 메타태그를 변경할 수 없다는 문제점이 있다. 그래서 react-helmet-async를 사용하였고, react-helmet보다 react-helmet-async가 최근 버전 업데이트에 친화적이라고 하여 선택하게 되었다.

 

react-helmet으로 페이지별 SEO 메타태그 설정하기

 

4. React-Snap으로 페이지별 html을 만들기

react-helmet-async를 사용한다해도 페이지별로 html 파일이 생성되는 것이 아니기 때문에 브라우저의 크롤러는 여전히 하나의 index.html을 바라보고있다. 그렇기 때문에 url을 공유하였을 때 동적으로 변한 meta 태그가 보이지 않는 등의 문제가 발생한다. 이 문제를 react-snap을 사용하여 페이지별로 index.html 파일을 생성함으로써 해결할 수 있다.

 

또한 react-snap은 pre-rendering을 지원한다. pre-rendering은 웹 크롤러가 볼 수 있도록 페이지의 모든 요소를 사전로드하는 프로세스를 의미한다. pre-rendering은 페이지 요청을 낚아채어 사용자가 크롤러인지 여부를 확인하여 크롤러인 경우 캐시 된 버전의 페이지를 전달하여 준다. 반대로 크롤러가 아니라면 일반적인 페이지를 전달해준다. 즉, 크롤러를 위한 최적화 작업을 하는 것이 pre-rendering의 핵심이라고 할 수 있다.

 

onethegarden Blog

 

5. 결과

페이지 별로 메타 태그를 설정할 수 있어 lighthouse의 SEO 점수가 85점에서 93점으로 좋아졌다.

Sitemap을 설정한 후

React-Helmet과 React-Snap을 적용한 후

또한 검색 시에도 잘 되는 것을 확인할 수 있다.

추가적으로 페이지별로 meta 태그를 설정할 수 있다보니 카카오톡으로 링크를 공유한 경우에도 페이지별로 다르게 og:image와 og:title과 같은 정보를 보여줄 수 있게 되었다.