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

사이트맵이란?
사이트 맵(Sitemap.xml) 파일 형식
프로젝트에 사이트맵 생성하기
사이트 맵 확인 하기
robots.txt 설정하기

---

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

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

Why? react sitemap 를 검색했을 때 나오는 글들을 참고하여 구현하려다가 오랜시간을 들여 시도해도 sitemap.xml 이 생성되지 않아 직접 javascript로 구현하였습니다.🤦🏻‍♀️

 

사이트맵이란?

💡 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL을 전달하는 역할

사이트 맵 파일은 해당 사이트의 URL 모두를 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 URL 콘텐츠의 최종 업데이트 시점 및 업데이트 빈도, 그리고 다른 URL 대비 상대적인 중요도 정보를 여기에 담을 수 있습니다.

 

사이트 맵(Sitemap.xml) 파일 형식

자 그럼 먼저 사이트맵을 생성하기 전에 사이트 맵 파일형식에 대해 살펴보겠습니다. 우리는 잘 알고있는 웹 사이트 도메인뒤에 /sitemap.xml 을 입력하면 해당 사이트의 사이트맵을 볼 수 있습니다.

https://ko.wix.com/sitemap.xml

형식에 대한 더 자세한 설명은 아래 링크에서 확인할 수 있습니다.

https://www.sitemaps.org/ko/protocol.html

 

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

그럼 react 프로젝트에서 사이트맵은 어떻게 생성할까요? 크게 3단계로 볼 수 있습니다.

1. 사이트맵을 생성하는 js파일 만들기
2. js 파일을 실행했을때 xml 파일로 내보내기 위한 @babel/node 설치
3. package.json → script 에 사이트맵 생성하는 명령어 추가하기

---

1. sitemapGenerate.js 작성
src> sitemapGenerate.js

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

const SitemapGeneratedDate = new Date().toISOString().slice(0, 10);
const DOMAIN = 'https://test.co.kr';

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

let pages = [
  '/',
  '/apple',
  '/banana',
  '/carrot',
];
pages = pages.map(page => DOMAIN + page);

const pageSitemap = pages
  .map(
    page => `
      <url>
        <loc>${page}</loc>
        <lastmod>${SitemapGeneratedDate}</lastmod>
        <changefreq>weekly</changefreq>
        <priority>${page === 'https://test.co.kr' ? 1 : 0.8}</priority>
      </url>
    `
  )
  .join('');

const geneateSitemap = `
      <?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>`;

const formattedSitemap = formatting(geneateSitemap);

fs.writeFileSync('./public/sitemap.xml', formattedSitemap, 'utf8');

 

2. @babel/node 설치

npm install --save-dev @babel/node

 

3. package.json script 추가

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

 

 

4. 사이트맵 실행하기

npm run sitemap

위 명령어로 실행을 하면 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://test.co.kr/sitemap.xml           // 제작된 사이트맵 경로

 

 

프로젝트 마무리 단계에 SEO 설정을 위한 몇가지 설정을 해주어야 하는데요, 그 중에서 사이트맵과 robots.txt를 설정하는 방법을 알아보았습니다.