react-helmet-async로 메타데이터 설정하기

평소와 같이 업무를 하던 중
팀장님한테 메타데이터를 설정해보라는 새로운 업무를 받았다.

메타 데이터란?

메타 데이터란 단어가 생소해서 찾아보니 팀장님이 말하는 메타 데이터는 "메타 태그"를 말하시는 거 같았고 메타 태그는 '메신저/검색엔진 등에서 사이트 프리뷰를 표시할 때 사용되는 부분'이다.

얼마전에 축구 경기가 있었으니 겸사겸사 검색해보면
저렇게 검색시 사이트에 나오는 로고와 설명을 커스텀 할 수 있는 것이 메타 태그라고 생각하면 된다.

react-helmet-async 설치하기

npm install react-helmet-async

react-helmet-async는 SPA의 메타데이터 설정을 돕는 라이브러리이다.
react-helmet과 react-helmet-async 두개가 대표적으로 쓰이나 후자가 더 사용자 수도 많고 업데이트 빈도가 높아서 많이 활용되는 듯 해서 후자로 설치를 진행했다.

제일 상위에 있는 파일에 설정해야 페이지마다 다른 정보를 적용할 수 있기에 App.tsx에 MetaTag 파일을 임포트해서 넣어줬고

import { HelmetProvider } from 'react-helmet-async';
import MetaTag from '.MetaTag.tsx'

function App() {

    return (
        <HelmetProvider>
            <MetaTag />
        	<Routes>
            	<Route></Route>
            </Routes>
        </HelmetProvider>
        )}

메타 태그는 따로 컴포넌트화 해서 파일을 분리했다.
필요한 정보는 props로 내려주면 되니 그 부분도 문제없었다.

//MetaTag.tsx

import { Helmet } from 'react-helmet-async';

function MetaTag() {
    return (
        <Helmet>
            <meta property="og:title" content={`설정하고 싶은 제목`} />
            <meta property="og:image" content={`설정하고 싶은 이미지`} />
        </Helmet>
    );
}

export default MetaTags;