Vite + React SPA - robots.txt와 sitemap.xml 설정
◆검색엔진의 크롤러(Crawler)란?
크롤러(Crawler)란 검색엔진이 웹페이지의 정보를 수집하기 위해 자동으로 웹사이트를 방문하는 프로그램이다.
쉽게 말하면 검색엔진의 웹페이지 탐색 로봇이라고 생각하면 된다.
대표적인 검색엔진 크롤러는 다음과 같다.
| 검색엔진 | 크롤러 |
|---|---|
| Googlebot | |
| Naver | Yeti |
| Bing | Bingbot |
크롤러는 웹페이지를 방문한 후 페이지 내부의 링크를 따라가면서 다른 페이지를 발견하고 정보를 수집한다.
검색엔진 크롤러
↓
https://example.com
↓
HTML 확인
↓
페이지 내부 링크 발견
↓
/about
/products
/contact
↓
다른 페이지 방문
↓
페이지 정보 수집
◆public 폴더란?
Vite 프로젝트에서 public 폴더는 정적 파일을 보관하는 폴더로 사용할 수 있다.
예를 들어 검색엔진 관련 파일을 다음과 같이 구성할 수 있다.
project/
├── public/
│ ├── robots.txt
│ └── sitemap.xml
│
├── src/
│ ├── App.tsx
│ └── main.tsx
│
└── index.html
Vite는 public 폴더의 파일을 별도의 번들링이나 변환 없이 빌드 결과물에 복사한다.
public/
├── robots.txt
└── sitemap.xml
│
│ npm run build
▼
dist/
├── robots.txt
├── sitemap.xml
├── index.html
└── assets/
즉,
public/robots.txt
↓
build
↓
dist/robots.txt
와 같은 형태로 배포 결과물에 포함된다.
단, public이라는 폴더가 모든 웹 프로젝트의 공통 규칙은 아니다.
현재 프로젝트에서 사용하는 Vite의 규칙이라고 이해하면 된다.
◆robots.txt란?
robots.txt는 검색엔진 크롤러에게 웹사이트의 크롤링 규칙을 알려주는 파일이다.
일반적으로 웹사이트의 루트 경로에 위치한다.
https://example.com/robots.txt
기본적인 예시는 다음과 같다.
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
User-agent
User-agent: *
*는 모든 크롤러를 의미한다.
따라서 특정 검색엔진만 지정하지 않는 경우 Google, Naver, Bing 등의 크롤러에 동일한 규칙을 적용할 수 있다.
특정 크롤러를 지정할 수도 있다.
User-agent: Yeti
Allow: /
위 설정은 네이버의 검색 크롤러인 Yeti에 대한 규칙이다.
Allow
Allow: /
사이트의 경로에 대한 크롤링을 허용한다는 의미이다.
반대로 특정 경로의 크롤링을 제한하려면 Disallow를 사용할 수 있다.
User-agent: *
Disallow: /admin/
Sitemap
Sitemap: https://example.com/sitemap.xml
검색엔진에게 Sitemap 파일의 위치를 알려주는 설정이다.
여기에는 사이트의 메인 URL이 아니라 실제 sitemap.xml 파일의 주소를 작성해야 한다.
잘못된 예
Sitemap: https://example.com/
올바른 예
Sitemap: https://example.com/sitemap.xml
◆sitemap.xml이란?
robots.txt가 크롤러의 접근 규칙을 알려주는 파일이라면,
sitemap.xml은 검색엔진에게 사이트의 주요 URL 목록을 알려주는 파일이다.
예를 들어 다음과 같이 작성할 수 있다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
</url>
<url>
<loc>https://example.com/about</loc>
</url>
<url>
<loc>https://example.com/features</loc>
</url>
</urlset>
검색엔진에게 다음과 같은 URL이 존재한다는 정보를 제공하는 것이다.
/
/about
/features
◆sitemap.xml의 주요 태그
<loc>
페이지의 URL을 지정한다.
<loc>https://example.com/about</loc>
Sitemap에서 가장 기본이 되는 정보이다.
<lastmod>
페이지가 마지막으로 수정된 날짜를 나타낸다.
<lastmod>2026-08-06</lastmod>
페이지 콘텐츠 등이 변경된 날짜를 의미하며, 사용자가 마지막으로 방문한 날짜를 의미하지 않는다.
<changefreq>
페이지가 얼마나 자주 변경될 가능성이 있는지를 나타내는 참고 정보이다.
<changefreq>weekly</changefreq>
예:
daily
weekly
monthly
yearly
단, weekly로 설정했다고 검색엔진이 정확히 일주일마다 크롤링하는 것은 아니다.
<priority>
사이트 내부에서 해당 URL의 상대적인 중요도를 나타내는 값이다.
<priority>1.0</priority>
일반적으로 0.0 ~ 1.0 범위의 값을 사용한다.
단, Sitemap의 priority가 검색 결과 순위를 직접적으로 올려주는 점수는 아니다.
◆robots.txt와 sitemap.xml의 차이
두 파일의 목적은 서로 다르다.
| 구분 | robots.txt | sitemap.xml |
|---|---|---|
| 목적 | 크롤러 접근 규칙 안내 | 사이트 URL 목록 제공 |
| 핵심 질문 | “어디를 크롤링해도 되는가?” | “어떤 페이지가 있는가?” |
| 주요 내용 | Allow / Disallow | URL 목록 |
| 대표 경로 | /robots.txt |
/sitemap.xml |
쉽게 기억하면 다음과 같다.
robots.txt
↓
"검색엔진 로봇아,
크롤링 규칙은 이렇게 해."
sitemap.xml
↓
"그리고 검색엔진이 알아두면 좋은
공개 페이지는 여기 있어."
◆SPA에서는 Sitemap에 모든 페이지를 넣어야 할까?
모든 React Router 경로를 Sitemap에 넣을 필요는 없다.
예를 들어 다음과 같은 라우팅이 있다고 가정해보자.
/
/about
/features
/login
/signup
/admin
/mypage
이 중 검색엔진에 노출할 공개 페이지가 다음과 같다면:
/
/about
/features
Sitemap에도 공개 페이지 위주로 등록할 수 있다.
반면 다음과 같은 페이지는 검색엔진에 노출할 필요가 없다면 Sitemap에서 제외할 수 있다.
/login
/signup
/admin
/mypage
따라서 Sitemap은 React Router에 등록된 모든 URL의 목록이 아니라, 검색엔진에 알려주고 싶은 주요 공개 URL의 목록이라고 이해하면 된다.
◆Vite + React SPA의 검색엔진 관련 구조
최종적으로 프로젝트를 다음과 같이 구성할 수 있다.
project/
│
├── public/
│ ├── robots.txt
│ └── sitemap.xml
│
├── src/
│ ├── App.tsx
│ └── main.tsx
│
├── index.html
└── ...
빌드 후:
dist/
│
├── index.html
├── robots.txt
├── sitemap.xml
│
└── assets/
├── index-xxxxx.js
└── index-xxxxx.css
검색엔진과의 관계는 다음과 같이 이해할 수 있다.
검색엔진
│
↓
robots.txt
│
├── 크롤링 규칙 확인
│
└── Sitemap 위치 확인
│
↓
sitemap.xml
│
↓
주요 공개 URL 확인
│
↓
페이지 크롤링
│
↓
검색엔진 색인
즉,
robots.txt는 검색엔진 크롤러에게 크롤링 규칙을 알려주고,sitemap.xml은 검색엔진에게 사이트의 주요 URL을 알려주는 역할을 한다.
댓글남기기