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

Ell!·2022년 1월 15일

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>
  );
};