[React SEO] 리액트 검색엔진 최적화 해보기

vercel로 배포한 내 사이트를 구글이나 네이버에서 검색하여 접속 해 보고싶어 테스트한 내용입니다.

SEO (Search Engin Optimiztion)

요즘 사람들은 궁금한 것에 대한 답을 대부분 Google에 검색하여 답을 얻곤 하는데요. 그렇기 때문에 당연히 모든 비즈니스 및 웹사이트 소유주들은 Google에서 자신들의 정보를 사람들이 찾기 쉽도록 만들기 위해서라면 할 수 있는 모든 것을 합니다. 이것이 바로 SEO입니다. 즉, 검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식을 말합니다.

 

SEO 3단계 프로세스

1. 크롤링(Crawling): 웹 크롤러가 웹페이지의 콘텐츠를 복사하여 검색엔진으로 가져옵니다.

2. 인덱싱(Indexing): 가져온 콘텐츠를 주제별로 색인하여 보관합니다. 

3. 랭킹(Ranking): 검색 의도에 맞춰 색인된 콘텐츠에 순위를 부여한 후 결과로 제공합니다. 

 

SSR vs CSR

출처: The Benefits of Server Side Rendering Over Client Side Rendering

 

Server Side Rendering의 약자

서버쪽에서 렌더링 준비를 마친 HTML, JS code를 브라우저에 전달하고 브라우저는 HTML을 바로 띄우고

이어서 JS code를 다운받고 HTML에 JS로직을 연결합니다.

출처: The Benefits of Server Side Rendering Over Client Side Rendering

 

Client Side Rendering의 약자

서버는 요청을 받으면 클라이언트에 빈 뼈대의 HTML과 연결된 JS링크를 브라우저로 보내고

브라우저는 연결된 JS링크를 통해 JS를 다운받고 JS를 이용해 동적으로 DOM을 생성하며 페이지를 렌더링합니다.

 

	CSR	SSR
장점	- 화면 깜빡임이 없음 - 초기 로딩후 구동 속도가 빠름 - TTV와 TTI사이 간극이 없음 - 서버 부하 분	- 초기 구동 속도가 빠름 - SEO에 유리함
단점	- 초기 로딩 속도가 느림 - SEO에 불리함	- 화면 깜빡임이 있음 - TTV와 TTI사이 간극이 있음 - 서버 부하가 있음

 

react에서 SEO?

react는 CSR이기 때문에 크롤링 과정에서 검색엔진 로봇은 빈뼈대의 HTML을 읽어 색인을 하지 못합니다.

 

 

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

 

해당 블로그를 참고하여 적용해 보았습니다.

 

SiteMap 만들기

사이트맵은 웹사이트가 제공하는 페이지, 비디오 그리고 다른 여러 파일들간의 관계를 나타내는 파일입니다.
구글같은 서치엔진은 이 파일을 통해 효율적으로 웹사이트를 크롤링을 할 수 있어요.

이 파일을 검색엔진에 제출하면 빠르게 검색결과에 노출시킬 수 있다고합니다.

 

 

Create your Google Sitemap Online - XML Sitemaps Generator

해당 사이트를 통해 만들수도 있습니다.

 

npm i react-router-sitemap

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

해당 의존성 라이브러리를 설치할때 저의 node버전이 높아 설치를 할수없었습니다.

그래서 뒤에 --force, --legacy-peer-deps 둘중 하나를 붙여주니 설치가 됐습니다.

• --force 는 필요한 경우 패키지 의존성을 위해 추가적인 패키지를 설치
• --legacy-peer-deps 는 그냥 무시하고 설치

 

sitemap-routes.js를 만들어 내사이트의 사이트맵을 만들어줍니다.

기존에 라우트를 관리하는 컴포넌트 파일 (예를 들면, Routes.js)이 존재한다면, 해당 파일로 react-router-sitemap 을 실행하면 Babel 이슈가 발생한다고 합니다.

import React from 'react';
import { Routes, Route } from 'react-router';

export default (
    <Routes>
        <Route path='/' />
        <Route path='/countdown' />
    </Routes>
);

sitemap-generator.js 파일을 만듭니다.

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

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

const router = require("./sitemap-routes").default; // 좀 전에 만든 sitemapRoutes 파일이 있는 경로입니다.
const Sitemap = require("react-router-sitemap").default;

function generateSitemap() {
    return (
        new Sitemap(router)
            .build("https://multipurpose-one.vercel.app") // 여러분의 도메인 이름으로 변경해주세요.
            .save("./public/sitemap.xml") // sitemap.xml 파일이 생성될 위치입니다.
    );
}

generateSitemap();

package.json에 sitemap-generator를 실행시킬 script를 추가 해줍니다.

 "scripts": {
    .
    .
    .
    "sitemap": "babel-node ./sitemap-generator.js",
    "predeploy": "npm run sitemap"
  },

npm run predeploy를 실행 해보면 public폴더에 sitemap.xml파일이 생성되는것을 확인 할 수 있습니다.

 

 

robots.txt 설정하기

robots.txt는 검색로봇에게 사이트 및 웹페이지를 수집할 수 있도록 허용하거나 제한하는 국제 권고안입니다.

robots.txt 설정하기

public폴더에 robots.txt파일을 만듭니다.

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

 

이상태로 vecel로 배포를 했습니다.

깔끔하게 빌드 에러 빌드할때 sitemap이 버전이 낮은게 문제인데 npm install 설정만 하면되는데 이부분에서 삽질하느라 시간을 꾀 썼습니다.

 

vercel의 project settings에서 install 커맨드를 오버라이딩 하는부분을 찾을 수 있었습니다.

 

드디어 배포가 완료 되었습니다.

 

이제 `구글 웹마스터`를 구글에 검색 하여 접속하고 배포한 사이트를 등록해줘야 합니다.

 

구글에 사이트 등록하기 - 캠페이너스 도움말 센터

해당 블로그를 참고하여 등록하였습니다.

 

사이트맵을 등록합니다.

저는 루트 디렉토리에 생성했기때문에 /sitemap.xml로 제출 했습니다.

구글 에서 확인하는데 시간이 좀 걸립니다.

저는 2일 걸렸습니다.

 

페이지 색인이 되지 않았다면 검색해도 사이트가 노출되지 않습니다.

색인 요청을 합니다.

해당 요청도 시간이 걸립니다.

이것도 2일정도 소요 됐었던것 같습니다.

 

하지만 색인에 실패 했었습니다.

이유는 CSR이라 결국 내 사이트의 정보를 다 내줘도 구글 로봇이 사이트까지 찾아왔지만 페이지에 아무 내용이 없어 실패 했을것이라고 추측합니다.

 

그래서 pre-rendering을 적용해야 했습니다.

 

pre-rendering

빌드할 때 미리 특정 페이지를 렌더링해서 html 파일을 만들어 두는 것

 

 

[React] 검색엔진 최적화(SEO):: Prerendering (react-snap)

해당 블로그를 참고했습니다.

 

npm install react-snap --dev

react-snap을 devDependencies 에 설치합니다.

 

"scripts": {
    	.
        .
        .
        "postbuild": "react-snap"
},

빌드가 완료된 후 pre-rendering될 html을 만들 postbuild script를 작성합니다.

 

import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}

index.js에서 위처럼 코드를 변경합니다.

 

hydrate는 이미 존재하는 돔 구조를 초기화하지 않고

React가 이어서 사용할 수 있도록 해 주는 함수이다.

 

이 과정은 생략해도 작동에는 문제가 없지만 로딩 시간이 조금 더 길어진다고 합니다.

 

{
	//... some data
    "scripts": {
    	//... some scripts
        "postbuild": "react-snap"
    },
    "reactSnap": {
    	"include": []
    },
    //... some data
}

package.json으로 가서 reactSnap을 추가해 사이트의 프리 렌더링 될 파일 루트들을 설정합니다.

저는 테스트를 위해 include에 루트 디렉토리만 추가했습니다.

그리고 다시 배포를 했습니다.

 

검색해보니 리눅스에서 크롬 실행시 나는 에러라고 하는데 저는 vercel의 그러니까 내가 배포한 실제 vercel의 컴퓨터에 접근할 방법을 모릅니다...

 

그래서 열심히 구글링 했습니다.

 

vercel deploy error 배포 에러

해당 블로그를 참조하여 문제를 해결했습니다.

해결 하고보니 reactSnap참고한 블로그와 reactSnap공식 github에 해당 에러에 대한 해결방법이 있었습니다.

 

"reactSnap":{
    "include" : [
      "/"],
    "puppeteerArgs" : [
          "--no-sandbox",
          "--disable-setuid-sandbox"
      ]
   },

reactSnap에 puppeteerArgs의 속성을 추가 해주면 문제가 해결됩니다.

 

pre-rendering을 확인하는 방법은 간단합니다.

개발자 도구를 열고 네트워크에 Doc를 선택하여 프리뷰에 사이트가 나오는지 확인하면 됩니다.

 

프리뷰 실패)

프리뷰 성공)

이런식으로 프리뷰에 사이트가 렌더링 된다면 구글 로봇도 사이트를 읽을수 있게 되어 색인이 생성되고 구글에 검색하여 사이트에 접속 할 수 있습니다.

 

구글 웹마스터와 네이버 웹마스터에만 제 사이트를 등록했더니 두곳에서만 검색 하여 사이트가 노출되는것을 확인 할 수있었고 다음이나 야후에서는 검색해도 사이트가 노출되지 않았습니다.

사이트 마다 등록을 해줘야 하는것 같습니다.

 

SSR을 적용하는 방법을 다음에 해봐야 할 것 같습니다.