SEO(Seach Engine Optimization)
- 검색 엔진 최적화
- 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정
- 검색 순위 개선이라고도 함
react-helmet-async
React애플리케이션에서 동적으로 HTML 문서의<head>내용을 관리할 수 있도록 도와주는 라이브러리react-helmet이 2020년 이후로 관리되지 않아서, 어떤 개발자가 서버 사이드 렌더링(SSR) 환경에서도 제대로 작동할 수 있도록 비동기적인 기능을 추가한 것- 보통 메타 태그나 페이지 제목, OG(Open Graph) 태그, 그리고 SEO에 필요한 기타 정보를 변경하고자 할 때 사용함
사용법
아래와 같이 HelmetProvider로 앱을 감싸주면 끝이다.
import { HelmetProvider } from 'react-helmet-async';
import SplashScreen from './components/SplashScreen/SplashScreen';
import AppRouter from './router';
function App() {
return (
<HelmetProvider>
<AppRouter />
</HelmetProvider>
);
}
export default App;AppRouter 코드는 여기에 있음
https://velog.io/@juwon98/Loading-Spinner
그 후에, 각 페이지(컴포넌트)에서 필요에 따라 아래와 같이 <head>에 들어갈 내용을 추가 및 변경할 수 있다.
// myPage의 index.jsx
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import styles from './MyPage.module.css';
import { memo } from 'react';
function MyPage() {
return (
<div className={styles.myPage}>
<Helmet>
<title>마이페이지 - 해마디</title>
<meta
name="description"
content="해마디에서 사용 중인 내 정보를 확인하세요"
/>
<meta property="og:title" content="마이페이지 - 해마디" />
<meta
property="og:description"
content="해마디에서 사용 중인 내 정보를 확인하세요"
/>
<meta name="twitter:title" content="마이페이지 - 해마디" />
<meta
name="twitter:description"
content="해마디에서 사용 중인 내 정보를 확인하세요"
/>
</Helmet>
<h1>마이페이지</h1>
// ...
);
}
export default memo(MyPage);문제점
React와 react-router-dom을 사용한 SPA(Single Page Application)에서 react-helmet-async를 사용하여 Open Graph 등의 SEO 코드를 동적으로 생성하면 Facebook, 카카오톡 등의 SNS 크롤러에서 정보를 수집할 때에는 해당 SEO 코드가 생성되기 전의 상태를 수집하기 때문에 react-helmet-async를 사용해 작성한 데이터는 수집되지 않는다.
동적으로 생성한 SPA가 아닌 정적으로 각 페이지를 생성해서 해결할 수 있는데, 이를 SSG(Static Site Generation)이라고 한다.
React 17버전 까지는 react-snap이라는 라이브러리를 사용해 SSG를 간단하게 할 수 있었지만, 18버전 부터는 지원하지 않기 때문에, vite-plugin-ssr, prerenderrer등의 도구를 사용해서 처리해줘야 한다.
하지만, 이 또한 React의 Suspense와의 호환에서의 문제 등으로 SEO 코드를 제공하기 힘들다...
그래서 Next.js와 같은 메타 프레임워크를 사용하는 것이 현재로써는 가장 좋은 방법이라고 생각된다.
vite-plugin-ssr
https://vite-plugin-ssr.com/
prerenderrer
https://github.com/Tofandel/prerenderer?tab=readme-ov-file#readme
