React 기반 SPA SEO 최적화: 구글·네이버 검색 상위 노출

tree·2024년 12월 10일

기존 상황

내가 개선한 지인의 웹페이지가 구글, 네이버 검색 플랫폼에 검색했을 때 상황은 다음과 같았다.

구글: 첫 페이지에 2번째에 노출 O
네이버: 검색했을 때 아예 홈페이지가 노출 X

물론 기존 외주업체가 웹사이트를 운영했을 때는 구글에서 조차 검색이 되지 않았었다.

X 시도 1: helmet 라이브러리 적용

결론부터 말하면 이 시도 1은 검색엔진최적화에 하나도 도움이 되지 않았다. 아마 내가 제대로 적용하지 않았거나 시도 1보다 시도 2가 간편하고 빠른 방법일거라고 생각이 된다..

기본 정적 html(바닐라 js)이나 jsp, thymeleaf와 달리 React로 개발한 웹페이지는 SPA(Single Page Application)이기 때문에 검색엔진최적화(SEO)에 불리하다는 것을 알게 되었다. 그래서 SPA일때 SEO하는 방법에 대해서 찾아보니 이런 글들을 확인 할 수 있었다.

https://www.openads.co.kr/content/contentDetail?contsId=12617&categoryCode=CC68

위의 글을 읽어보면 글쓴이는 helmet 라이브러리로 title 태그를 감싸는 방법과 SSR(Server Side Rendering)으로 바꾸는 방법을 제시했다.

그러나 나는 애써 만든 내 첫 React, typescript view를 포기하기가 싫었다..
진작 검색에 중점을 맞췄더라면 화면 단을 SPA보다는 느리게 렌더링 된다해도 jsp나 thymeleaf로 view를 만들었겠지..

그래서 부랴부랴 미처 소화시키지도 않은 채 helmet 라이브러리를 다운 받고 적용 시켰다.

적용 과정

react-helmet-async 라이브러리 설치
react-helmet, react-helmet-async 이렇게 두 가지의 차이점은 async로 눈치채기 쉽지만 멀티 스레드 환경에서도 안전하고 에러를 방지할 수 있다.
App.tsx에 HelmetProvider로 감싸기

import { HelmetProvider } from "react-helmet-async";
...

const App: React.FC = () => {

  return (
    <HelmetProvider>
    <Router>
      <AppContainer>
        <Header />
        <Footer />
      </AppContainer>
    </Router>
    </HelmetProvider>
  );
}

검색 플랫폼에서 노출시켜주고 싶은 페이지에 helmet 태그를 적용
이 helmet 로 인해 해당 페이지의 title은 전체 title(index.html의 title이나 서버에서 받은 title)을 덮을 수 있게 한다.

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

const ProductDetail: React.FC = () => {

      <ProductionContainer>
      <Helmet>
        <title>{product.productMainId} - HanmiLab</title>
        <meta name="description" content={`ooo의 ${product.productMainId} 제품의 상세 정보입니다.`} />
      </Helmet>
}

마침내 시간이 여유로운 지금 다시 확인해보니 정말 소화도 안시키고 막 적용하는게 얼마나 쓸모없는 일인가를 알게 됐다.. 정말 나는 title만 바꿔놨기 때문이다. ค(⸝⸝･0･⸝⸝)ค

Helmet은 이름 그대로 head 태그를 덮어쓰는 모자 개념이다.
SEO 최적화하는 방법에 대해서 Helmet이 나온 이유를 추측해보자면 SPA여서 단 하나의 페이지임에도 불구하고 각각 개별적으로 title과 별도 메타태그들을 할당할 수 있어서 여러개의 페이지인 척 할 수 있기 때문에 CSR인 상황에서 SEO가 helmet 사용 전보다 좋아지는 것으로 생각하고 있다.

이 글을 보신 누군가가 '나는 helmet으로 검색엔진최적화를 적용하고 확인해보고 싶다.'라고 생각이 든다면 이 분의 글을 스리슬쩍 추천드린다.
https://flamingotiger.github.io/frontend/react/react-helmet/
이 분처럼 헤더에 사용할 태그들을 미리 정의해두고 컴포넌트로 분리해두면 재사용하기도 좋고 Helmet 라이브러리 도입 자체로도 SEO 최적화가 되었을 것 같기도하다.

그러나 또 참고하면 좋을 정보는 다음과 같다.
https://github.com/nfl/react-helmet/issues/377
해당 react-helmet 이슈에서 누군가가 깔끔히 구글봇은 스크래핑할때 서버가 주는 것을 통해 정보를 받아오기 때문에 어차피 구글봇은 메타 태그를 읽어올수가 없다라는 정보를 얻을 수 있다. 그러나 나같은 경우에는 특정 검색어로 찾는 것보다 웹사이트 자체가 띄워지는게 목표였기 때문에 구글이 내 웹사이트를 첫번째 페이지에서 2번째로 띄워줘서 구글봇은 고려대상이 아니었다.. 나에겐 오직 네이버 검색창의 생태계에 포함되고싶었을 뿐

내용 보기/숨기기: private repository commit history

내가 참고하기 위한 링크1 (private repository)

내가 참고하기 위한 링크2 (private repository)