[고양이와 책을] React 프로젝트에 SEO 적용

현재 상황

전체적인 고양이와 책을 서평 사이트의 프론트엔드와 백엔드 기능이 완성되었다. 이제 서버에 올리는 일만 남아있었다. 배포를 하게 되면 우리가 만든 웹 사이트를 사용하는 유저들이 생겨날텐데 서평 키워드를 구글에 검색했을 때 우리 사이트가 되도록 많이 노출될 수 있도록 SEO를 React에 적용하기로 하였다.

문제

React는 SPA 방식의 CSR으로 만들어졌다. 때문에 url이 바뀌어도 html을 다시 내려 받지 않고 Client에서 알아서 그린다. 하지만 사용자가 첫 화면을 보기까지가 오래 걸리고 실제로 HTML태그가 비어있는 상태이기 때문에 SEO 최적화가 쉽지 않다.

이 SEO 문제를 이해하기 위해서는 CSR, SSR, SPA 그리고 SEO에 대해 정확히 알고 가야겠다고 생각해 공부 후 포스트로 따로 정리해 두었다.
=> https://velog.io/@han-byul-yang/%EA%B8%B0%EB%B3%B8%EA%B0%9C%EB%85%90-SSR-CSR-SPA%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

해결 방법

react-helmet 설치

npm i react-helmet

제목(Title,타이틀) 태그

<title>고양이와 책을 서평 작성 웹 사이트</title>

웹페이지 요약설명(Meta Description, 메타디스크립션)

<meta name="description" content="'고양이와 책을'은 읽은 책에 대한 서평을 쓰고 개인 공간에 저장할 수 있는 서평 작성 사이트 입니다."></meta>

img태그 중 alt 속성(img tag alt property)

    <Bodypic src={`${process.env.PUBLIC_URL}/mainbookself.jpeg`} alt="메인페이지의 서적 배경 이미지"></Bodypic>

이 외에도 각 컴포넌트에 제목태그(Heading tags, h1~h2)를 설정하였다.

이렇게 하고나니 다음과 같은 오류가 발생했다.

using unsafe_componentwillmount in strict mode is not recommended and may indicate bugs in your code.

해결방법을 찾아보니 보통 React-helmet 버전이 6.0.0 이하에서 많이 발생한다는 내용이 대다수였다. 하지만 확인해보니 내가 설치한 React-helmet 버전은 6.1.0이었다.

다른 방법을 찾아보니 react-helmet-async 라이브러리를 사용해보라는 글이 있었다. react-helmet-async를 다운로드하고 다음과 같이 작성했더니 더 이상 warning 창이 뜨지 않았다.

react-helmet-async는 Helmet과 사용법은 동일하고 스레드가 안전하지 않은 react-side-effect에 의존한다고 한다. 해당 패키지는 서버에서 비동기 작업을 수행할 경우 데이터 요청 별로 Helmet을 캡슐화 하기위해 사용하는 패키지라고 한다.

react-helmet-async 설치

npm install react-helmet-async

적용

import { Helmet, HelmetProvider } from "react-helmet-async";
 
const Component = () => {
  return(
        <>
        <HelmetProvider>
        <Helmet>
            <meta charSet="utf-8" />
            <title>고양이와 책을 서평 작성 웹 사이트</title>
            <meta name="description" content="'고양이와 책을'은 읽은 책에 대한 서평을 쓰고 개인 공간에 저장할 수 있는 서평 작성 사이트 입니다."></meta>
        </Helmet>
        </HelmetProvider>
        </>
  )
}
 
export default Component