[React] SEO (Search Engin Optimiztion)

SEO (Search Engin Optimiztion)

검색 엔진 최적화. 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가

검색 결과에 더 잘 보이게 하기 위한 과정.

검색을 하면, 검색 엔진이 내 사이트 내용물(meta tag나 html 등)을 훑어가고 내용물에 특정한 인덱스 같은 것을 만들어 검색 결과에 보여준다.

검색 엔진 최적화는 검색엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정이기도 하다.

yarn add react-snap

Package.json dependency에 아래 항목 추가

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "include": [
      "/", "/myPage"
    ]
  },

index.js 파일 아래와 같이 수정

import React from 'react';
import { hydrate, render } from "react-dom";
import App from './App';

const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) hydrate(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    rootElement
);
else render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    rootElement
);

위 설정까지 마치고 yarn build 명령어 실행

build 이후에 build 폴더로 들어가면, 
기존의 build에서는 index.html만이 결과물로 나왔는데
json include에 명시한 url들을 크롤링한 결과물들이 같이 나오게 된다.