React Helmet을 사용한 SEO 최적화

by

React는 단일 페이지 애플리케이션이므로 개발자가 배포할 때 사용자에게 표시하는 유일한 화면은 index.html입니다.

화면이 JavaScript로 렌더링되기 전에도 사용자에게는 본문이 비어 있는 흰색 화면만 표시됩니다.

<body>
    <noscript>You need to enable JavaScript to view this page.</noscript>
    <div id="root"></div>
    <script type="text/babel"></script>
  </body>

이것은 검색 엔진 최적화에 매우 나쁜 환경입니다.

대부분의 검색 엔진은 사이트의 텍스트나 이미지를 크롤링하여 페이지를 인덱싱합니다.

'추천 관련글,

물론 텅 빈 HTML 본문만 보면 높은 점수를 줄 수 없다.

하지만 최근 React와 같이 SPA를 기반으로 개발되는 웹사이트가 많아지면서

콘텐츠를 스크랩하기 위해 JavaScript로 렌더링되기를 기다리는 검색 봇의 수가 증가했습니다.

내 웹사이트를 검색 엔진에 최적화하는 데는 중요한 요소가 많지만 Google의 공식 SEO 가이드를 포함하여 어떤 기사를 읽든 상관 없습니다.

웹 사이트에 적절한 메타 태그를 포함하는 것이 중요합니다.

하지만 SSR과 달리 우리에게 전달되는 페이지는 index.html이기 때문에 메타 태그를 설정할 페이지가 부족합니다.

그래도 페이지가 되는 기본 구성 요소에서 querySelector와 같은 것을 사용하여 메타 태그를 변경할 수 있습니다.

하지만 모든 페이지에 대해 그렇게 하기에는 너무 번거롭습니다.

document
      .querySelector('meta(property="og:title")')
      .setAttribute("content", `${title}`);

페이지에 해당하는 각 구성 요소에 대해 위의 코드를 작성한다고 가정합니다.

페이지에서 중복이 증가하고 스크롤 지옥에 빠지게 됩니다.

React Helm을 사용하여 이 문제를 해결할 수 있습니다.

React 헬멧을 사용하는 방법?

import { Helmet } from "react-helmet";

function ReactHelmet({ description, title, pageTitle, image }) {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta
        property="og:title"
        content={`Your Site Name |" ${pageTitle}`}
      />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta
        property="og:site_name"
        content="Your Site Name | Sub Description"
      />
      
      {/* 트위터 Part */}
      <meta
        name="twitter:card"
        content={`insert Your HashTag`}
      />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:image" content={image} />
      <meta name="twitter:description" content={description} />
    </Helmet>
  );
}

export default ReactHelmet;

ReactHelmet.jsx를 빌드하여 메타 태그를 삽입한 후 스켈레톤을 빌드합니다.

예를 들어 코드에서 사용자가 페이지별로 링크를 공유하면

목표는 웹사이트를 렌더링할 수 있는 openGraph와 내가 만든 웹사이트에 입소문을 퍼뜨리는 목적의 트위터입니다.

Twitter 카드 및 제목을 추가했습니다.

그리고 각 페이지의 제목, 설명, 대표 이미지를 소품으로 확보하여 콘텐츠에 동적으로 할당하였다.

이 설정을 사용하면 사용자에게 표시할 열린 차트 또는 페이지 제목을 보다 유연하게 변경할 수 있습니다.

React 헬멧을 적용하는 방법

    return (
      <ReactHelmet
        description="현재 페이지 컴포넌트를 설명해 줄 수 있는 짧은 설명글"
        title="현재 페이지의 제목"
        pageTitle="오픈 그래프 타이틀에 사용할 제목"
      />
      <SearchArea
        setOrder={setOrder}
        loading={loading}
      />
     );

컴포넌트 형태로 사용자에게 보여줄 페이지 컴포넌트의 return 문에 ReactHelmet을 미리 정의하면 적용된다.

알 수 있습니다.

API로부터 데이터를 받아 동적으로 랜더링되는 페이지는 props를 변수 형태로 전달하면 문제 없이 적용할 수 있다.

그러나 React Helmet에는 작은 문제가 있습니다.

신규유저 유입을 위해 메타태그를 활용한 검색엔진최적화를 하는 것도 매우 중요한데, 내 페이지를 공유하는 사람들은 링크를 통해 링크를 받게 됩니다.

공유할 때 잘 보이도록 웹사이트를 설정하는 것도 중요합니다.

개인적으로 제가 만든 리액트 앱이 트위터에서 입소문이 나기에 좋은 서비스라고 생각해서 트위터 API를 이용하거나 오픈그래프를 도입하려고 했으나 아쉽게도 트위터에는 오픈그래프가 적용되지 않는 것 같습니다.

React Helm을 사용하는 경우 거의 대부분의 프로젝트가 완성된 상태이므로 글을 읽는 개발자들이 참고하여 잘 사용했으면 좋겠습니다.