React 메타태그 작성하기 (ft.react-helmet-async)

React로 만들어진 사이트의 단점 중 하나로 뽑히는 것이 검색엔진최적화에 약하다는 것입니다.

이는 각 페이지의 정보를 읽어오지 못한다는 의미인데요,  이를 보완하기 위한 라이브러리로 react-helmet-async가 있습니다.

 

helemet 라이브러리는 단순히 메타 태그 관리를 위한 것이 아니라 head 태그 내부를 관리하기 위한 라이브러리입니다.

 

https://www.npmjs.com/package/react-helmet-async

react-helmet-async

 

npm 설치

npm i react-helmet-async

 

yarn 설치

yarn add react-helmet-async

 

 

사용방법

<Helmet> 태그를 사용하기 위해서는 <HelmetProvider>로 감싸주어야 합니다.

그리고 <Helmet> 태그 안에 title, meta 등 필요한 내용을 작성해 줍니다.

해당 영역을 하나의 컴포넌트로 만들어두고 props로 관리하면 페이지 별로 적절한 메타태그, 타이틀을 관리할 수 있습니다.

<HelmetProvider>
  <Helmet>
    <title>{title}</title>
    {/* SEO 태그 */}
    <meta name="description" content={description} />
    <meta name="keywords" content={keywords} />
    <meta name="author" content={author} />
  </Helmet>
</HelmetProvider>