React에서 sitemap 만들기

npm install --save-dev @babel/node
npm install prettier

// 아래 것 option
npx update-browserslist-db@latest
npm install caniuse-lite

• npx update-browserslist-db@latest 명령어는 로컬 프로젝트에서 browserslist-db (즉, caniuse-lite 데이터)를 최신 버전으로 업데이트합니다. 이 명령은 개발 환경을 최신 상태로 유지하는 데 도움을 줍니다.
• 이 데이터베이스는 caniuse-lite라는 라이브러리를 통해 제공되며, 이는 caniuse.com에서 제공하는 데이터를 라이트 버전으로 가공한 것입니다.

// src>sitemapGernerate.js

// commonJS
const fs = require('fs');
const prettier = require('prettier');

// ECMAScript 모듈(ESM), module type 이면 위 2줄대신 아래 두줄 이용
//import fs from 'fs';
//import prettier from 'prettier';

// 비동기 함수
async function generateSitemap() {
// 오늘 날짜를 YYYY-MM-DD 형식으로 생성
  const SitemapGeneratedDate = new Date().toISOString().slice(0, 10);
  const DOMAIN = 'https://2ok.kr';
  // 사이트맵에 포함할 페이지 목록
  let pages = ['/', '/geoposition'];
  pages = pages.map(page => DOMAIN + page);
  // 각 페이지에 대한 XML URL 항목을 생성
  const pageSitemap = pages.map(page => `
    <url>
      <loc>${page}</loc>
      <lastmod>${SitemapGeneratedDate}</lastmod>
      <changefreq>weekly</changefreq>
      <priority>${page === 'https://2ok.kr' ? 1 : 0.8}</priority>
    </url>
  `).join('');
  
  const generateSitemap = `<?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">
      ${pageSitemap}
    </urlset>`;
    
  // XML을 예쁘게 정리
  const formattedSitemap = await prettier.format(generateSitemap, { parser: 'html' });
  // 생성된 사이트맵을 파일로 저장
  fs.writeFileSync('./public/sitemap.xml', formattedSitemap, 'utf8');
}

generateSitemap();

 

// src>sitemapGernerate.js

const fs = require('fs');
const prettier = require('prettier');

// 오늘 날짜를 YYYY-MM-DD 형식으로 생성
const SitemapGeneratedDate = new Date().toISOString().slice(0, 10);
const DOMAIN = 'https://2ok.kr';

// HTML 문서를 정돈하는 함수
const formatting = target => prettier.format(target, { parser: 'html' });

// 사이트맵에 포함할 페이지 목록
let pages = [
  '/',
  '/geoposition',
];
pages = pages.map(page => DOMAIN + page);

// 각 페이지에 대한 XML URL 항목을 생성
const pageSitemap = pages
  .map(
    page => `
      <url>
        <loc>${page}</loc>
        <lastmod>${SitemapGeneratedDate}</lastmod>
        <changefreq>weekly</changefreq>
        <priority>${page === 'https://2ok.kr' ? 1 : 0.8}</priority>
      </url>
    `
  )
  .join('');

const generateSitemap = `
      <?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">
          ${pageSitemap}
        </urlset>`;
// XML을 예쁘게 정리
const formattedSitemap = formatting(generateSitemap);
// 생성된 사이트맵을 파일로 저장
fs.writeFileSync('./public/sitemap.xml', formattedSitemap, 'utf8');

위 둘다 sitemap.xml 을 만들어 주는 파일입니다. 위의 것은 비동기 처리한 것입니다. 둘중에 하나 사용하면 됩니다.

 

- package.json 파일에 

  "scripts": {
    ...
    ...
    "sitemap": "babel-node ./src/sitemapGenerate.js"
  },

그리고 아래 코드를 실행

npm run sitemap

 

public > sitemap.xmp 파일이 생김

 

직접 React Router 를 참조하여 만들때는 아래의 형삭을 참조하면 됩니다.

<?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.2ok.kr/</loc>
  <lastmod>2024-05-13T11:49:24+00:00</lastmod>
</url>
<url>
  <loc>https://map.2ok.kr/</loc>
  <lastmod>2024-05-13T11:49:24+00:00</lastmod>
</url>
<url>
  <loc>https://2ok.kr/mountains/북한산</loc>
  <lastmod>2024-05-13T11:49:24+00:00</lastmod>
</url>
<url>
  <loc>https://2ok.kr/geoposition</loc>
  <lastmod>2024-05-13T11:49:24+00:00</lastmod>
</url>

</urlset>