React는 기본적으로 SPA를 서비스해주기 때문에 SEO관리가 어렵다는 한계를 지니고 있다. 그래서 public
폴더의 index.html
에 직접 meta tag를 적어서 관리해주고 있는데, 이를 react-helmet
이라는 라이브러리를 통해 js를 사용해서 관리할 수 있다.
const SEO = ({ pageTitle, pageSEO }) => {
let title =
'롤 듀오 자랭, 메이플 보스 파티, 배그 스쿼드 찾기 매칭 SNS - 스크림도르';
// 기본적으로 config 에 정의한 내용을 씀.
let description = config.description;
let url = config.url;
let image = config.image;
// 페이지별 정보가 따로 있으면 재정의
if (pageTitle) {
title = pageTitle;
}
if (pageSEO) {
description = pageSEO.description;
url = pageSEO.url;
if (pageSEO.image) {
image = pageSEO.image;
}
}
// structured data
const jsonLd = [
{
'@context': 'https://scrimdor.gg',
'@type': 'Website',
url: url,
name: title,
},
];
return (
<Helmet>
{/* title */}
<title>{title}</title>
{/* 메타태그 */}
<meta name="description" content={description} />
<meta name="url" content={url} />
<meta name="image" content={image} />
{/* 오픈 그래프 메타태그 */}
<meta name="og:title" content={title} />
<meta name="og:type" content="website" />
<meta name="og:description" content={description} />
<meta name="og:image" content={image} />
</Helmet>
);
};
이렇게 컴포넌트를 만들어서 각 페이지 별로 다른 meta tag를 보여줄 수 있다.
react-helmet의 작동 순서는 다음과 같다.
위의 방식에서 문제점이 확연히보인다. 유저의 입장에서는 해당 사이트를 입장하면 각 페이지별로 다른 title을 볼 수 있다. 하지만 해당 사이트에 접속하지 않는 다면?? og tags들은 여전히 index.html
에 나온대로 표시가 될 것이다.
결국 각 페이지 별로 다른 title을 보여주고 싶으면 pre-rendering이 필요한 듯하다.