xml-sitemaps.com

xml-sitemaps.com

xml-sitemaps.com/은 웹사이트용 XML 사이트맵을 자동으로 생성해주는 무료 온라인 도구입니다. 사이트맵은 검색 엔진이 웹사이트의 구조를 이해하고 더 잘 크롤링하도록 돕는 파일입니다.

사이트맵(Sitemap)이란?

• 사이트맵은 .xml 형식으로 된 파일로, 웹사이트에 있는 모든 주요 URL 목록과 메타 정보를 포함합니다.
• Google, Bing 등의 검색 엔진이 페이지를 더 빠르게, 더 정확하게 색인(indexing)하는 데 도움을 줍니다.

---

주요 기능 (xml-sitemaps.com)

기능	설명
🌐 URL 자동 수집	입력한 루트 도메인부터 시작해서 내부 링크를 따라 모든 하위 페이지를 스캔
⚙️ 설정 가능	크롤링 깊이, 업데이트 빈도, 우선순위(priority) 설정 가능
🧾 XML, HTML, TXT 형식 제공	다양한 형식의 사이트맵 파일 다운로드 가능
🔄 이미지/모바일 사이트맵 지원	(유료 버전) 이미지, 뉴스, 동영상 사이트맵도 생성 가능
📥 다운로드 가능	사이트맵 파일을 직접 다운로드해 서버에 업로드 가능 (sitemap.xml 등)

 

사용 방법

1. https://www.xml-sitemaps.com/ 접속
2. 자신의 도메인 입력 (예: https://myawesomesite.com)
3. [Start] 버튼 클릭 → 크롤링 시작
4. 완료되면 XML 사이트맵 결과 확인 및 다운로드 가능
5. 생성된 sitemap.xml을 웹사이트 루트 경로에 업로드 (예: https://myawesomesite.com/sitemap.xml)
6. Google Search Console 등에서 제출 가능

예시 결과 (부분)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://myawesomesite.com/</loc>
    <lastmod>2025-05-03</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://myawesomesite.com/about</loc>
    <lastmod>2025-04-30</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

참고

• 무료 버전은 최대 500개의 URL까지만 지원
• 더 많은 URL이나 예약 크롤링, 동적 사이트맵 생성을 원한다면 유료 버전 또는 자체 호스팅 솔루션 필요

Vite + React 프로젝트에서 사이트맵(sitemap.xml)을 자동 생성하는 방법

이 방식은 정적 사이트를 배포할 때 유용하며, 주로 react-router 기반의 SPA에 적용됩니다.

Vite + React 프로젝트용 Sitemap 자동 생성 가이드

1. 필요한 패키지 설치

npm install sitemap --save-dev

 

sitemap는 인기 있는 Node.js 기반 sitemap 생성 라이브러리입니다.

 

2. sitemap 생성 스크립트 (scripts/generate-sitemap.js)

const fs = require('fs');
const { SitemapStream, streamToPromise } = require('sitemap');
const { createGzip } = require('zlib');

const hostname = 'https://yourdomain.com'; // ← 여기에 실제 도메인 입력
const pages = [
  '/',
  '/about',
  '/contact',
  '/blog',
  '/blog/post-1',
];

(async () => {
  const sitemapStream = new SitemapStream({ hostname });
  const writeStream = fs.createWriteStream('./dist/sitemap.xml.gz');
  const pipeline = sitemapStream.pipe(createGzip());

  pages.forEach((url) => {
    sitemapStream.write({ url, changefreq: 'weekly', priority: 0.8 });
  });

  sitemapStream.end();

  await streamToPromise(pipeline).then((sm) => {
    fs.writeFileSync('./dist/sitemap.xml.gz', sm);
    console.log('✅ sitemap.xml.gz 생성 완료');
  });
})();

 

3. package.json에 명령어 추가

"scripts": {
  "build": "vite build",
  "sitemap": "node scripts/generate-sitemap.js",
  "build:full": "vite build && npm run sitemap"
}

 

이제 npm run build:full로 빌드하면 dist/sitemap.xml.gz가 생성됩니다.

---

참고 팁

• gzip 없이 sitemap.xml로 저장하려면 createGzip 부분을 제거하고 .xml로 저장하세요.
• 경로가 많다면 react-router에서 route 목록을 자동 추출하거나, 파일 시스템 기반 라우팅일 경우 디렉토리를 읽는 방식도 적용할 수 있어요.
• 생성된 사이트맵은 /dist 폴더에 들어가므로, 정적 배포 시 함께 업로드되도록 주의하세요.