[React] React-helmet과 그 한계. (next로 migrate하려는 이유)

Ell!·2022년 1월 15일
0

react

목록 보기
21/28

React-Helmet을 통한 meta tag 관리

React는 기본적으로 SPA를 서비스해주기 때문에 SEO관리가 어렵다는 한계를 지니고 있다. 그래서 public폴더의 index.html에 직접 meta tag를 적어서 관리해주고 있는데, 이를 react-helmet이라는 라이브러리를 통해 js를 사용해서 관리할 수 있다.

const SEO = ({ pageTitle, pageSEO }) => {
  let title =
    '롤 듀오 자랭, 메이플 보스 파티, 배그 스쿼드 찾기 매칭 SNS - 스크림도르';

  // 기본적으로 config 에 정의한 내용을 씀.
  let description = config.description;
  let url = config.url;
  let image = config.image;

  // 페이지별 정보가 따로 있으면 재정의
  if (pageTitle) {
    title = pageTitle;
  }
  if (pageSEO) {
    description = pageSEO.description;
    url = pageSEO.url;
    if (pageSEO.image) {
      image = pageSEO.image;
    }
  }

  // structured data
  const jsonLd = [
    {
      '@context': 'https://scrimdor.gg',
      '@type': 'Website',
      url: url,
      name: title,
    },
  ];

  return (
    <Helmet>
      {/* title */}
      <title>{title}</title>
      {/* 메타태그 */}
      <meta name="description" content={description} />
      <meta name="url" content={url} />
      <meta name="image" content={image} />
      {/* 오픈 그래프 메타태그 */}
      <meta name="og:title" content={title} />
      <meta name="og:type" content="website" />
      <meta name="og:description" content={description} />
      <meta name="og:image" content={image} />
    </Helmet>
  );
};

이렇게 컴포넌트를 만들어서 각 페이지 별로 다른 meta tag를 보여줄 수 있다.

react-helmet의 작동 순서는 다음과 같다.

  1. url경로를 따라서 page request
  2. page에 맞는 resource fetching
  3. HTML 파일 불러옴
  4. react-helmet이 담겨있는 js 파일 작동

React-Helmet의 한계

위의 방식에서 문제점이 확연히보인다. 유저의 입장에서는 해당 사이트를 입장하면 각 페이지별로 다른 title을 볼 수 있다. 하지만 해당 사이트에 접속하지 않는 다면?? og tags들은 여전히 index.html에 나온대로 표시가 될 것이다.

결국 각 페이지 별로 다른 title을 보여주고 싶으면 pre-rendering이 필요한 듯하다.

reference

https://stackoverflow.com/questions/68357422/how-do-i-generate-dynamic-meta-description-and-image-in-react-using-react-helmet

profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

0개의 댓글