[React | SEO] 리액트에서 SEO하기

🙋‍♂️메타태그란? 
- 웹 페이지의 제목이나 이미지, 간단한 설명을 검색엔진에 알려주는 역할을 합니다. 

 

Q. 왜 CRS에서 SEO가 어려울까요?

우선 CSR이 검색엔진최적화(SEO)가 어려운 이유는 미리 html을 만들어두는 것(SSR에서는 미리 만들어서 그걸 보내주죠)이 아니라 요청이 들어온 다음에 html을 생성하는 방식이고, CSR을 적용한 SPA들이 하나의 페이지(html파일)만 존재하기 때문에 크롤링할 데이터가 없어서 SEO가 어려운 것이죠.

 

리액트는 SPA라 html파일이 하나 뿐입니다. 그렇기 때문에 사실은 하나의 Meta tag밖에 가질 수 없습니다. 

(*create-react-app으로 만든 폴더에 public폴더의 index.html로 가보면 head태그 내부의 meta태그를 확인할 수 있습니다. )

 

Q. 우리는 페이지 이동(라우팅)을 하는데 그렇다면 어떻게 해야할까요?

->react-helmet 같은 패키지를 사용하거나 다른 스크립트를 사용하여 meta tag의 내용을 바꿔줍니다(그때 필요한 내용으로 바꿔주면 된다). 

 

Q. 어떻게 특정 페이지의 정보를 수집할 수 있게 할까요? 

SSR처럼 각 원하는 페이지에 해당하는 html파일과 같은 형태가 존재해야만, 기대했던대로 크롤러가 수집할 수 있습니다. 

즉, 각 라우터에 해당하는 index.html파일을 만들어주면 된다. 

방법) React를 기준으로 react-helmet과 react-snap을 함께 사용할 수 있다.

helmet을 통해서 메타 태그를 세팅하고, react-snap을 통해 index.html을 생성한다. 

->정적 라우터의 경우 쉽게 적용해서 사용할 수 있습니다.

*react-snap같은 라이브러리들은 내부적으로 자동으로 브라우저를 제어하여 해당하는 페이지가 로드된 후에 크롤링해서 index.html을 생성합니다. 이러한 흐름에서는 정적 라우터는 쉽게 파악할 수 있지만 /:id 같은 동적라우터는 어떤 URL이 존재하는 지 파악할 수 없기에 위의 방식은 한계가 있습니다. 

 

Q.그렇다면 동적 라우터에 대한 처리는 어떻게 해야할까요? 

:id에 해당하는 데이터들을 위한 별도의 API나 파일과 같은 형태가 필요합니다. 해당 데이터를 기반으로 index.html 파일을 생성해주면 되는데 여기서 prerender-spa-plugin 을 활용합니다. (사실 이렇게 까지 해야 한다면 저는 그냥 next.js를 배우는 것이 좋지 않을까..싶은)

 

 

여담▼

서치를 해보니 react-snap의 경우, 해당 라이브러리가 최근 관리가 잘 되지 않고있다는 점을 고려해야 한다고 합니다. 사용하는 빈도수도 떨어지는 거 같구요. SEO를 염두해둔다면 react가 아닌 다른 프레임워크를 선택하는 것이 낫기 때문이 아닐까 싶기도 합니다. 프로젝트를 구성할 때부터 SEO가 필요한 지 한 번 더 고민해보고 스택을 선택하는 것이 현명하다고 하시네요. 

react-snap 관련 좋은 참고자료: https://www.nashu.dev/blogs/react-snap

  저 같은 경우는, 간단하게 react-helmet만 사용하고 SEO가 꼭 필요한 프로젝트라면 next.js를 배워서 적용하지 않을까 싶습니다. 사실 해당 관련 공부를 하면서 제가 이해한 것이 맞는 지도 잘 모르겠네요..😓 적재적소의 스택을 쓰는 것이 참 중요하지만 그만큼 많은 경험을 해봐야 알 거 같습니다.