[React] 검색 엔진 최적화(SEO)와 Robots.txt, 그리고 sitemap

SEO란?

 

SEO는 search engine optimization의 약자로, 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정을 말한다. 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 요약하면, 내가 운영하는 사이트와 연관된 단어를 검색할 경우 구글이나 네이버에 더욱 잘 노출될 수 있도록 사이트를 개선하는 방법을 말한다. 검색엔진의 상위에 노출되는 것은 매출과 같은 부분에 중요한 영향을 미치기 때문에 검색 결과 상위를 차지하는 것은 매우 중요한 일이다.

 

React에서 검색엔진최적화를 하기 위한 간단한 2가지 방법

 

1. robots.txt파일을 만들어 검색봇이 정보를 수집하게 한다.

2. 사이트맵을 생성한다.

 

1. robots.txt

 

robots.txt 파일은 크롤러가 사이트에서 액세스할 수 있는 URL을 검색엔진 크롤러에 알려준다. robots.txt는 접근하기 쉽기 때문에 중요한 정보는 담지 않는 것이 좋다. robots.txt 파일은 사이트의 루트에 위치한다. 내 블로그를 예로 들면 nodiemecarry.tistory.com/robots.txt 에 있다. 해당 파일은 로봇 배제 표준을 따르는 일반 텍스트 파일로, 크롤러가 특정 경로에 엑세스하는 것을 차단하거나 허용할 수 있다. 구글에서 든 예를 한 번 보자.

 

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

이 파일은 googlebot은 /nogooglebot/으로 시작하는 url을 크롤링할 수 없고, googlebot을 제외한 다른 사용자들은 전체 사이트를 크롤링할 수 있다는 뜻을 가지고 있다. 이처럼 User-agent에는 어떤 사용자를 선택할 것인지를 정할 수 있고, Allow와 Disallow를 이용해 접근을 막을 수도, 접근을 허용 할수도 있다. 그러나 Disallow를 사용한다고 해서 검색 결과에 포함되지 않는다는 것을 보장하지는 않는다. 해당 링크가 다른 정보와 관련성이 있다고 판단할 수 있기 때문이다.

 

모든 사용자에게 노출되도록 하는 robots.txt의 값은 다음과 같다. User-agent, Allow, Disallow을 잘 다듬어서 루트경로에 두면 검색 엔진 최적화에 도움이 될 것이다.

Sitemap:        // 제작된 sitemap 경로를 적으면 된다.
User-agent: *   // 모든 검색엔진
Allow: /        // 모든 페이지 접근 허용

아래 사이트를 참고하면 더 많은 정보를 얻을 수 있다.

https://developers.google.com/search/docs/crawling-indexing/robots/intro?hl=ko 

robots.txt 소개 및 가이드 | Google 검색 센터  |  문서  |  Google for Developers

 

2. 사이트맵 생성

 

SEO를 개선하는 방법으로는 react-router-sitemap 라이브러리를 사용해 sitemap.xml 파일을 생성하는 것도 있다.

 

1. react-router-sitemap 라이브러리를 설치한다.

npm install --save react-router-sitemap

 

2. sitemapRoutes.js 파일을 생성한다.

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

 

 

3. sitemapGenerator.js 파일을 생성한다. 이 파일이 sitemap.xml을 생성해준다.

require("@babel/register");

const router = require("./sitemapRoutes").default; // sitemapRoutes 파일이 있는 경로
const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return (
        new Sitemap(router)
            .build("https://www.example.com") // 본인 도메인으로 설정해야한다.
            .save("./public/sitemap.xml") // sitemap.xml 파일이 생성될 위치
    );
}

generateSitemap();

 

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

또는

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

 

설치가 완료되면 package.json 파일을 다음과 같이 수정한다.

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

path/to/your은 sitemapGenerator.js가 있는 경로를 적어주면 된다. 그 후 npm run sitemap을 실행하면 public 디렉토리 안에 sitemap.xml파일이 생성된 것을 확인할 수 있다.

 

5. 배포 과정에 sitemap 생성 추가하기

 

package.json 의 script에서 predeploy에 명령어를 추가함으로써 배포 과정에서 sitemap.xml 파일을 자동으로 생성하게 만들 수 있다.

"scripts": {     
    ...    
    "predeploy": "npm run sitemap"   
  }

 

추가: robots.txt에 위에서 만든 sitemap을 제공할 수 있다.

Sitemap: https://example.com/sitemmap.xml