[LOG] React 검색엔진(SEO) 최적화하기 (리액트 헬멧 라이브러리, 메타 태그, 웹표준 등)

 

현재 SSR(서버 사이드 랜더링)이 유행하고 있다

서버 사이드 랜더링의 장점은 검색 엔진 최적화와 빠른 랜더링 속도에 있다

---

 

왜 이것이 중요한가?

이 두 가지의 장점은 기업의 수익성에 있어 중대한 영향을 미치기 때문에 매우 중요한 요소이다

 

문제는 리액트는 CSR 방식으로 초기 랜더링 이후에는 속도가 굉장히 빠르지만

CSR 방식의 경우 초기 로딩 시점에 필요한 모든 콘텐츠를 동적으로 생성하기 때문에

검색 엔진이 콘텐츠를 인식하기 어려워진다

 

그래서 SSR이 가능한 Next.js로도 작업하고 있지만 

리액트로 작업한 프로젝트가 많기 때문에

CSR에서 검색엔진 최적화를 위해 노력한 경험에 대해 적어볼까 한다!

---

 

1. 리액트에 헬멧 씌워주기 

 (React-helmet-async 라이브러리를 사용한 meta 태그활용)

 

React 는 설정할 수 있는 정적 페이지가 index.html 하나뿐이다

index html에 meta 태그를 적어줄 수도 있으나 react-helmet 라이브러리를 사용해서

라우팅한 주소별로 메타태그를 적용해줄 수 있다

 

사용 방법

 

(1) react helmet async 라이브러리를 추가한다

yarn add react-helmet-async

 

(2)  index.js에서 App.js를 감싸준다 

import { HelmetProvider } from 'react-helmet-async';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

      
          <BrowserRouter>
            <HelmetProvider>
              <PreventScroll />
              <App />
            </HelmetProvider>
          </BrowserRouter>
     
);


reportWebVitals();

 

(3) App.js에서 Heltmet으로 감싸 meta 태그를 작성해주면 된다!

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

function App() {
    return (
     <>
      <Helmet>
        <title>{props.title}</title>
        <meta name="description" content={props.description} />
        <meta name="keywords" content={props.keywords} />
      </Helmet>
     </>
    );
};

export default App;

 

 

 

적용할 프로젝트의 경로가 2개밖에 없어서 각각 적용해도 무방했지만

추후 활용성을 생각하여 MetaTag.js라는 컴포넌트를 생성해서

각 페이지의 제목, 설명 등 내용은 props로 넘겨주었다

 

 

2. 필요없는 코드 삭제

일관성이 없는 내용이 많을수록 검색 성능이 하락한다고 하여

여러가지 시도를 통해 중구난방이 된 import와 주석을 달아놓았던 코드를 모두 삭제했다

 

 

 

3.웹 표준성 및 웹 접근성 강화

웹 표준성에 준수하면 SEO 최적화에 도움이 된다고하여

img 태그에 alt 태그 작성을 해주었다

 

추가로 포트폴리오에 웹접근성을 고려하여 화면 확대, 축소 기능을 추가하였는데 

이건 사실 SEO 최적화를 위해서라기 보다는

한 명이라도 내 포트폴리오를 더 편하게 봤으면 좋겠다는

생각에서 추가하게 되었다!