SEO를 개선하기 위해 react-router-sitemap 라이브러리를 사용하여 sitemap.xml 파일을 생성하는 방법에 대해 알아보겠습니다.
1. react-router-sitemap 설치
가장 먼저 할 일은 react-router-sitemap 을 설치하는 것입니다. 아래의 명령어를 사용하여 라이브러리를 설치해주세요.
npm install --save react-router-sitemap2. sitemapRoutes.js 파일 생성
기존에 라우트를 관리하는 컴포넌트 파일 (예를 들면, Routes.js)이 존재한다면, 해당 파일로 react-router-sitemap 을 실행하면 Babel 이슈가 발생한다고 합니다.
대신 동일한 내용을 담은 새로운 sitemapRoutes.js 파일을 생성하겠습니다.
react-router v4를 사용한다면 Route 대신 Switch 를 사용하시면 됩니다.
3. sitemapGenerator.js 파일 생성
이제 sitemap.xml 파일을 생성하는 sitemapGenerator.js 파일을 만들겠습니다.
파일 경로와 도메인 주소 변경을 잊지 말아주세요! 😀
4. sitemapGenerator.js 파일 실행
먼저 다음 dev dependency 들을 설치합니다.
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev babel-register설치가 완료되면 package.json 파일을 다음과 같이 수정합니다.
...
"scripts": {
...
"sitemap": "babel-node path/to/your/sitemaGenerator.js"
}
...(path/to/your 수정하는 것 잊지마세요)
이제 npm run sitemap 을 실행하면 public 디렉토리 안에 sitemap.xml 파일이 생성된 것을 확인하실 수 있으실 겁니다.
5. 배포 과정에 sitemap 생성 추가하기
package.json 의 스크립트에서 predeploy 에 명령어를 추가함으로써 배포 과정에서 sitemap.xml 파일을 자동으로 생성하게 만들 수 있습니다.
...
"scripts": {
...
"predeploy": "npm run sitemap"
}
...모든 과정이 끝났습니다!
하나 더 알아볼까요? 👀
Google에 사이트맵을 제공하기 위해서 robots.txt 수정하기
리액트의 경우 public 디렉토리 안에 robots.txt 파일이 존재합니다. 해당 파일을 열고 다음 행을 아무 곳에나 추가하면 사이트맵 경로를 지정할 수 있습니다.
Sitemap: http://example.com/sitemap.xmlrobots.txt 에 추가하는 방법 이외에 다른 방법을 알고 싶으시면 Google Search Console 고객센터 를 살펴보시면 됩니다.
끝.
