React Helmet을 사용하여 각 페이지 컴포넌트별로 메타 데이터를 설정하는 경우가 많습니다.

사이트의 제목이나 설명을 지정할 수 있는 meta 태그인 title이나 description를 예를 들었을 때 이 두 항목은 페이지 마다 다른 값을 필요로 할텐데 React를 사용할 때에는 컴포넌트에 head 태그를 직접 지정하기는 어렵습니다.

이 때 사용하는 것이 React Helmet인데 설치 방법도 설정 방법도 매우 간단합니다.

$ npm install --save react-helmet

NPM으로 react-helmet 라이브러리를 설치하면 다음과 같이 <Helmet> 컴포넌트를 사용하여 head와 같이 메타태그를 지정할 수 있습니다.

const Home = () => {
    return (
        <div>
            <Helmet>
                <title>사이트 제목입니다.</title>
                <meta name="description" content="사이트 설명입니다."/>
            </Helmet>
        </div>
    );
};

export default Home;

여기까지는 순조롭지만, 막상 서버를 실행하면 해당 페이지에 잘못된 title 또는 description 값이 나타나며 적용되지 않는 것을 확인할 수 있습니다. Global 컴포넌트에 미리 지정된 값이 우선 적용되어버리거나 검색 결과에 원하는 결과가 나타나지 않게 됩니다.

이를 해결하는 방법은 간단합니다. 표시할 메타태그 속성에 다음 속성을 추가해줍니다.

data-react-helmet="true"

위 예시 코드에서 적용한 모습은 아래와 같습니다.

const Home = () => {
    return (
        <div>
            <Helmet>
                <title>사이트 제목입니다.</title>
                <meta name="description" content="사이트 설명입니다." data-react-helmet="true"/>
            </Helmet>
        </div>
    );
};

export default Home;

또 하나의 유의사항은, 일반적으로는 사용하지 않아도 되었던 클로징 태그(/)를 꼭 넣어주어야 합니다. <meta title=""...> 보다는 <meta title="".../>를 권장합니다.

참고자료

• React Helmet not updating meta title tag: https://stackoverflow.com/questions/56355643/react-helmet-not-updating-meta-title-tag
• Existing meta tags don’t get overriden: https://github.com/nfl/react-helmet/issues/341