[React] 검색엔진 최적화(SEO):: sitemap.xml 작성(번역본)

https://www.amitsn.com/blog/how-to-generate-a-sitemap-for-your-react-website-with-dynamic-content

How to generate a sitemap for your React website with dynamic content

위의 페이지를 번역한 포스트입니다.

 

또한 Step 5(aws-amplify를 이용한 동적인 sitemap.xml 생성 부분)는 다루지 않았습니다

 

==================================

1단계: react-router-sitemap을 설치합니다

npm i --save react-router-sitemap

2단계: sitemap-routes.js 파일을 만듭니다

이미 존재하는 Routes.js파일을 이용하여 sitemap.xml을 만드려고 시도하면 babel 에러가 날 겁니다.

 

이에 대한 해결법을 알게 되면 이 포스트에 추가할 예정이고, 일단은 새로 만들어서 진행할거에요.

 

여하튼, sitemap-routes.js라는 파일을 새로 만드세요.

 

import React from 'react';
import { Route } from 'react-router';
 
export default (
    <Route>
	<Route path='/' />
	<Route path='/blog/:id' />
    </Route>
);

 

3단계: sitemap-generator.js 파일을 만듭니다

 

이 파일은 sitemap.xml을 만드는 파일입니다.

 

아래의 예제는 간단한 sitemap-generator.js 예제입니다

 

require("babel-register")({
  presets: ["es2015", "react"]
});
 
const router = require("./sitemap-routes").default;
const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return (
      new Sitemap(router)
          .build("https://www.example.com")
          .save("./public/sitemap.xml")
    );
}

generateSitemap();

path와 domain이 당신의 것과 일치하게 수정해야 합니다.

 

4단계: sitemap-generator.js 파일 실행

 

아래의 명령어들을 이용해 필요한 의존성들을 설치하세요.

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

또는

npm install --save-dev babel-cli babel-preset-es2015 babel-preset-react babel-register

그리고 package.json 파일로 가서 scripts에 아래의 코드를 추가하세요

 

...
"scripts": {
    ...
    "sitemap": "babel-node path/to/your/sitemap-generator.js",
  }
...

위의 path/to/your 부분을 아까 만든 sitemap-generator.js 경로로 수정해야 합니다

 

이제 npm run sitemap을 입력해 위의 스크립트를 실행시킵니다.

 

5단계: sitemap.xml 생성 자동화

 

빌드할 때 마다 새로운 sitemap이 필요하다면

...
"scripts": {
    ...
    "sitemap": "babel-node path/to/your/sitemap-generator.js",
    "prebuild": "npm run sitemap"
  }
...

처럼 빌드하기 전 npm run sitemap을 실행시킬 수도 있습니다.