[React] CAG프로젝트 SEO 개선하기

🖍 Collect All Games SEO 개선 후기입니다. 

평소에 많은 개발 아티클을 접하는 편인데 카카오 프론트 엔드 블로그에서 SEO 개선 가이드를 보고 내 프로젝트에도 적용할 수 있겠다 싶어서 적용해 본 후기입니다. 

 

collect All Games는 React로 만들어진 프로젝트 입니다. 

 

1. robots.txt 파일 수정하기  
평소에 잘 손대지 않았던 robots.txt 파일을 수정했습니다. 

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Allow: /detail
Allow: /
Disallow: /login
Disallow: /signup
Disallow: /write

위와 같이 검색엔진에 노출되야할 페이지와 그렇지 않은 페이지를 명시해서 크롤러가 의미 없는 페이지를 크롤링하지 않도록 해서 불필요한 트래픽 낭비되는 것을 막았습니다. 

 

2. 메타데이터 추가하기 

리액트 프로젝트에 메타 데이터를 추가했습니다. 

리액트 같은 경우 react-helmet-async 라이브러리를 사용하면 메타데이터를 편하게 추가할 수 있습니다.

사용법 같은 경우 Provider로 감싼 다음 Helmet 이라는 태그로 감싸고 그 안에 메타태그를 삽입하면 쉽게 사용 가능합니다 ㅎㅎ 

 

저 같은 경우 전체 상위 페이지와 디테일 페이지에 메타태그를 삽입했습니다. 

<title>{post.title}</title>
<meta property="og:url" content={`https://www.collectly.site/detail/${post.id}`} />
<meta name="author" content={`${post.username}`} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.content} />
<meta property="og:image" content={post.imgUrl} />

위와 같이 메타태그를 삽입해서 디테일 페이지에 다른 메타태그 컨텐츠가 동적으로 바뀌도록 했습니다. 

meta태그 적용 사진

메타태그를 사용하면 크롤 봇에게 좀더 많은 키워드를 제공해서 키워드 기반으로 노출될 수 있습니다. 

 

3. 중복 URL 제거 

 구글 크롤봇은 중복된 URL중 어떤 것이 원본 URL인지 모르기 때문에 원본 URL을 명시해서 중복으로 크롤링되어서 색인수가 감소할 수 있는 문제를 개선했습니다. 

 <link rel="canonical" href="https://www.collectly.site/" />