[SEO]React로 만든 SPA 웹사이트, 구글 검색엔진에 노출하기
저는 아직 SEO에 유리한 Next.js와 같은 프레임워크를 사용해보지 않았습니다..! 대신 React로 만든 SPA(Single Page Application)를 GitHub Pages에 배포한 웹사이트에 SEO 작업을 적용해보기로 했습니다. 이번 글에서는 React로 만든 SPA를 구글 검색엔진에 노출시키는 과정과 그 결과에 대해서 공유해보겠습니다.
1. sitemap 생성
사이트맵(Sitemap)은 웹사이트의 모든 페이지, 콘텐츠, 또는 URL 정보를 검색엔진에 체계적으로 전달하기 위해 사용하는 파일입니다. 검색엔진 봇(크롤러)이 웹사이트를 더 효과적으로 크롤링하고 색인화하도록 도와줍니다.
현재 프로젝트가 배포되어있다는 가정하에, 먼저 sitemap을 생성합니다. 저는 https://www.xml-sitemaps.com에서 사이트맵을 생성하고 파일을 다운로드하였습니다. 그리고 해당 파일을 public 폴더에 넣어, https://www.example.com/sitemap.xml 같은 형태로 접근 가능하게 해주었습니다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
<url>
<loc>https://www.example.com</loc>
<lastmod>2024-11-27T06:25:11+00:00</lastmod>
</url>
</urlset>2. 구글 서치 콘솔에 sitemap 등록하기
1번 과정을 완료했다면, 다음으로 구글 서치 콘솔에 sitemap을 등록해줍니다.
먼저 구글 서치 콘솔에 도메인을 등록하고, 소유자 인증 과정을 마무리 해줍니다.
도메인 등록과, 소유자 인증을 완료했다면 sitemap을 등록해줍시다.
저같은 경우에 sitemap을 등록했을때, 성공적으로 가져오지 못하고 있었습니다. 그래서 좌측 URL 검사탭에서 sitemap의 url을 검사해주었고, 검사 후 색인 요청을 보냈습니다.
이후, 구글에 제 사이트를 검색해보았습니다.
성공적으로 검색페이지 상단에 위치하는걸 확인할 수 있었습니다~
🧐SEO를 위한 추가 작업
- index.html 메타 태그 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>title 영역</title>
<link rel="icon" type="image/png" href="/favicon.jpg" />
<meta property="og:url" content="오픈그래프 url" />
<meta property="og:image" content="오픈그래프 이미지 url" />
<meta property="og:title" content="오픈그래프 타이틀" />
<meta property="og:description" content="오픈그래프 디스크립션" />
<meta name="description" content="description 영역" />
<link rel="canonical" href="웹사이트 표준 url" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
- 프리렌더링
특정 URL을 사전 렌더링하여 정적인 HTML을 생성하고, 이를 검색엔진에게 제공 (ex. react-snap)
- robots.txt 설정
User-agent: *
Allow: /
Sitemap: https://www.example.com/sitemap.xml