React SEO | Sitemap에 동적페이지 추가 및 배포시 자동생성하기

프로젝트에 사이트맵 생성하기
사이트 맵 확인 하기
robots.txt 설정하기

---

✋🏻 잠깐! 들어가기 전에...

이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 javascript 파일로 사이트 맵을 생성합니다.

정적인 페이지와 API로 데이터를 받아 동적인 페이지를 함께 사이트맵에 입력하는 스크립트입니다.

 

✅ 정적인 페이지만 사이트맵에 생성하고 싶다면 밑에 글을 참고해주세요.

https://3d-yeju.tistory.com/70

React SEO | Sitemap과 robots.txt 생성하기

 

프로젝트에 사이트맵 생성하기

1. 사이트맵을 생성하는 js파일 만들기
2. js 파일을 실행하기 위한 @babel/node 설치
3. 사이트맵을 생성하고 배포시 자동으로 생성하기 위한 명령어 추가하기
4. 실행 명령어

---

1. sitemapGenerate.js 작성
src/script/sitemapGenerate.js

// 패키지 설치
const axios = require('axios');
const fs = require('fs');
const prettier = require('prettier');

// 오늘 날짜 가져오기 & 도메인 설정
const getDate = new Date().toISOString();
const DOMAIN = 'https://www.testdomain.com';

const formatted = sitemap => prettier.format(sitemap, { parser: 'html' });

// 정적 페이지 설정
const publicPages = ['/', '/mypage'];

(async () => {
  const dynamicPages = [];

  //동적 페이지 설정
  await axios
    .get(`https://api.test.com/list`, {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then(res => {
      if (res.data.code === 200) {
        res.data.data.list.forEach(e =>
          dynamicPages.push(`/product/${e.uuid}`)
        );
      }
    });

  // 정적데이터+동적데이터 리스트를 Domain + page name 형태의 배열로 변환
  const pages = publicPages.concat(dynamicPages);
  const pageList = pages.map(page => DOMAIN + page);

  // 사이트맵 형식으로 출력
  const postListSitemap = pageList
    .map(page => {
      return `
      <url>
        <loc>${page}</loc>
        <lastmod>${getDate}</lastmod>
        <changefreq>weekly</changefreq>
        <priority>${page === 'https://www.testdomain.com/' ? 1 : 0.8}</priority>
      </url>`;
    })
    .join('');

  const generatedSitemap = `<?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">
  ${postListSitemap}
  </urlset>`;

  const formattedSitemap = formatted(generatedSitemap);
  fs.writeFileSync('./public/sitemap.xml', formattedSitemap, 'utf8');
})();

상품리스트들에 대한 동적페이지, 즉 api 데이터를 axios로 받아와야하기 때문에 동적데이터 처리 ~ 마지막 단계까지를 async await 함수안에 넣어주었습니다.

 

2. @babel/node 설치

npm install --save-dev @babel/node

 

3. package.json 명령어 추가

"scripts": {
    ...
    "prebuild": "npm run sitemap",
    "sitemap": "babel-node ./src/script/sitemapGenerate.js"
  }

prebuild: 배포시마다 사이트맵 자동생성
sitemap: 사이트맵 javascript 파일 실행

 

 

4. 사이트맵 실행하기

npm run sitemap  //현재 파일에서 사이트맵 생성.
npm run build  //빌드된 파일에서 사이트맵 확인.

위 명령어로 실행을 하면 public 경로에 sitemap.xml 형식의 파일이 생성됩니다.

 

 

사이트맵 확인하기

http://localhost:3000/sitemap.xml

제대로 사이트맵이 생성되었다면, 도메인주소/sitemap.xml 으로 접속하면 생성한 사이트맵 파일을 확인할 수 있습니다.

 

🧐 실제 배포시에 도메인/sitemap.xml을 치고 들어갔는데 사이트맵이 나오지 않는 경우

로컬에서는 제대로 작동했는데 배포된 도메인에서는 보이지 않는 경우가 있을수도있는데 이건 aws나 서버쪽에서 특정 파일의 형식이 아닌 파일의형식은 빼고 배포되게 설정을 해놓았기 때문일수도 있기에 설정을 한번 확인해 보는것이 좋습니다.

 

robots.txt 설정하기

사이트맵의 마지막 단계인 robots.txt를 생성해보겠습니다.

robots.txt는 크롤링 로봇이 웹에 접근할 때 로봇이 지켜야하는 규칙과 사이트맵(sitemap.xml) 파일의 위치를 알려주는 역할을 합니다.

 

robots.txt는 public 경로에 직접 생성해주면 됩니다.

User-agent: *               // 모든 검색엔진 허용
Allow: /                    // 모든 페이지 접근 허용
Sitemap: https://testdomain.com/sitemap.xml           // 제작된 사이트맵 경로

 

 

---

https://velog.io/@bluestragglr/주니어도-할-수-있는-Next.js-SEO-robots.txt와-sitemap.xml-자동-생성하기