react-helmet으로 SEO 메타태그 설정하기

지렁·2024년 2월 29일

🔴 검색엔진최적화(SEO) 란?

SEO란 구글과 같은 서치 엔진이 내 페이지를 찾을 수 있도록 최적화 하는 작업이다

검색 엔진 최적화(SEO)는 웹 페이지가 검색 엔진에서 더 잘 검색되고 노출되도록 하는 프로세스이다
검색 엔진은 사용자에게 더 나은 검색 결과를 제공하기 위해 웹 페이지의 콘텐츠, 구조, 키워드 등을 분석하고 이를 통해 사용자는 더 적합하고 유용한 정보를 빠르게 찾을 수 있게 된다

🔴 SEO를 위해 할 수 있는 일

먼저 SEO의 종류는 크게 두종류이다

On-Page SEO: 개발자가 관여할 수 있는 부분

Off-Page SEO: 개발자가 어쩔수 없는 부분

On-Page SEO은 웹페이지 자체의 최적화이다

웹페이지의 콘텐츠, HTML 코드, 그리고 다양한 요소들을 조정하여 검색 엔진에서 웹페이지를 높은 순위로 나타나게 하는 작업을 말한다

Target keywords를 첫 100~150 자 내에 포함 시키기
- google은 페이지 초반에 나타나는 키워드에 더 가중치를 준다.
h1 tag를 쓰면 구글이 문서를 이해하기가 더 쉽다
- 글의 타이틀을 h1 태그에 포함시키는 것이 좋다
타겟 키워드를 최소 하나의 subheading(h2)에 포함시키자
- 타겟 키워드를 자주 등장시키자
meta tag중 title과 description 태그를 최적화 하자
...

이 외에도 많은 것들이 있지만
h1 태그, h2 태그를 적절히 사용하고~
타겟키워드를 페이지의 앞부분에 포함시키고~
meta tag중 title과 description을 잘 사용하고~
이미지에서 alt tag를 잘 사용하는 것이 주로 내가 할 수 있는 방법인 것 같다

아래의 링크에서 더 자세히 확인이 가능하다!
On-Page SEO가 무엇인가

🔴 React에서의 SEO 최적화 방법

서버 사이드 렌더링 (SSR): SPA에서도 서버 사이드 렌더링을 도입하여 초기 HTML을 서버에서 생성하고 검색 엔진이 콘텐츠를 수집할 수 있도록 합니다. Next.js와 같은 프레임워크를 사용하면 쉽게 구현할 수 있습니다.

메타 태그 활용: Helmet과 같은 라이브러리를 사용하여 메타 태그를 설정하여 검색 엔진에게 페이지의 정보를 알려줍니다.

⚒️ CSR환경으로 SEO를 적용해보기 !

CSR환경에서는 하나의 HTML파일로 모든 페이지를 구성하기 때문에 meta 태그 정의에 어려움이 있다
그래서 react-helmet 라이브브러리를 사용하여 도움을 받을 수 있다

// 예시 코드 (Helmet)
import { Helmet } from 'react-helmet';

const App = ({ initialData }) => {
  return (
    <div>
      <Helmet>
        <title>Your Page Title</title>
        <meta name="description" content="Your page description" />
        {/* 기타 메타 태그들 추가 */}
      </Helmet>
      {/* 나머지 컴포넌트들 */}
    </div>
  );
};

🔴 내 프로젝트에 적용시키기

설치

"react-helmet": "^6.1.0",

적용

function App() {
 ...

  return (
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <Layout>
          <React.Fragment>
            <Routes>
              {privateRoutes.map((route, index) => (
                <Route
                  key={index}
                  path={route.path}
                  element={
                    <PrivateRoute authenticated={loginUser}>
                      {route.element}
                    </PrivateRoute>
                  }
                />
              ))}
              {publicRoutes.map((route, index) => (
                <Route key={index} path={route.path} element={route.element} />
              ))}
            </Routes>
          </React.Fragment>
          <Helmet>
            <title>JDON</title>
            <meta
              name="description"
              content="최근 채용공고에 많이 언급된 직군별 기술스택에 맞는 영상을 추천 사이트"
            />
            <meta name="keywords" content="개발자, 채용, 커피챗" />
          </Helmet>
        </Layout>
      </ThemeProvider>
    </BrowserRouter>
  );
}