[React] react-helmet 으로 페이지 별 SEO 메타태그 설정하기

1) react-helmet은 왜 사용하는가?

리액트는 SPA이라, 각 검색 로봇(크롤러)들이 리액트로 만들어진 사이트를 읽을 때 단 하나의 public/index.html 만을 읽게 됩니다. 이는 각각의 페이지에 대한 정보를 읽지 못한다는 단점이 있습니다.

 

이러한 SPA의 단점을 극복하기 위해 나온 것이 바로 react-helmet 라이브러리 입니다.

 

react-helmet은 페이지 별로 meta 태그를 다르게 정의할 수 있는데, 이는 검색엔진최적화(SEO)에 있어 매우 중요한 요소입니다.

 

즉, 사이트에 대한 디폴트 설명이 있는 meta태그와 페이지 별 meta태그를 구분지어 정의할 수 있습니다.

 

2) react-helmet 사용법

2-1) 설치

npm i react-helmet-async
yarn add react-helmet-async

 

2-2) HelmetProvider 컴포넌트

// Index.js
import { HelmetProvider } from 'react-helmet-async';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <HelmetProvider>
        <App />
      </HelmetProvider>
    </BrowserRouter>
  </Provider>,
  document.getElementById(‘root‘),
);

<App />을 <HelmetProvider><HelmetProvider/>로 감싸줍니다(Helmet 컴포넌트는 HelmetProvider 컴포넌트 안에 있어야 하기 때문).

 

2-3) Helmet 컴포넌트

// App.js
import { Helmet } from 'react-helmet-async';

const App = () => {
  return (
    <>
      <Helmet>
        <title>REACTERS</title>
      </Helmet>
      <Route component={} path={} exact />
      <Route component={} path={} exact />
    </>
  );
};

디폴트 메타태그를 App.js에 <Helmet> ~ </Helmet>으로 정의합니다.

 

⭐️ react-helmet-async에서는 더 깊숙한 곳에 위치한 Helmet이 우선권을 차지합니다.  

 

Q. 만약 index.html에 SEO 메타태그가 이미 정의되어 있다면?

 

중복 방지를 위해 제거해야 합니다.

 

index.html에 메타태그가 이미 정의되어 있는데, App.js에 Helmet으로 메타태그를 정의하게 되면 똑같은 중복 태그가 두 개 있는 셈이 됩니다.

 

( 출처 : https://velog.io/@miyoni/noSSRyesSEO%3CHelmetProvider%3E )