리액트 SEO - 검색엔진(네이버, 구글)에서 검색되도록 고치는 방법 / robots.txt

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

robots.txt 고치기

1. public 폴더에 robots.txt 파일을 만든다.
2. 아래와 같이 코드를 만든다.

   1. Sitemap: https://share.beautifulstore.org/sitemap.xml     // 제작된 sitemap 경로
      User-agent: *   // 모든 검색엔진 (AdsBot 크롤러는 직접 입력해주어야 함)
      Allow: /        // 모든 페이지 접근 허용

3. 네이버, 구글 웹마스터 도구에 사이트 주소를 등록한다.
4. 몇 일 정도 기다린다.
5. 검색되는지 확인한다. 끝.

참조 : https://searchadvisor.naver.com/guide/seo-basic-robots

 

 

Sitemap 생성하기

yarn add react-router-sitemap   // package를 설치한다.

// SitemapRouter.js 파일을 새로 만든다. 사이트맵을 만들고 싶은 경로만 넣는다.

import React from "react";
import { Switch, Route } from "react-router";

export default (
  <Switch>
    <Route path="/" />
    <Route path="/theme" />
    <Route path="/parcel" />
    <Route path="/customer-center" />
    <Route path="/condition" />
    <Route path="/privacy-policy" />
    <Route />
  </Switch>
);

// 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

// SitemapGenerator.js 파일을 만든다.

require("babel-register")({
  presets: ["es2015", "react"],
});

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

function generateSitemap() {
  return new Sitemap(router)
    .build("https://www.yoursite.com/") // 업로드 되는 도메인 이름으로 변경해주세요.
    .save("./public/sitemap.xml"); // sitemap.xml 파일이 생성될 위치입니다.
}

generateSitemap();

// script에 추가한다.

"sitemap": "babel-node ./yourpath/SitemapGenerator.js", // babel-node를 이용해서 SitemapGenerator를 실행하는 명렁어를 sitemap이라고 명명
"prebuild:development": "npm run sitemap"  // prebuild는 빌드 전에 실행하는 사전 실행 명령어이다. 이렇게 세팅해두면 편하다. :development는 build:development였기 때문. build만 할 경우는 :~이하 구문을 삭제한다.

참조 : https://satisfactoryplace.tistory.com/132

 

더 하면 좋은 일

각 페이지별 metaTag는 react-helmet을 써서 고치도록 한다. 본질적으로는 serverSide Rendering으로 해야 한다. 그러나, 최근에는 CSR에 대한 검색엔진들의 수집능력도 매우 좋아졌기 때문에, 괜찮다고한다. 실제로 해보면, 수집이 되긴 된다. 그러나, 아마도...Next.js 보다는 않좋을 것 같은 게 정설...?

참조 : https://flamingotiger.github.io/frontend/react/react-helmet/

React-helmet을 이용한 검색 최적화

 

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding