도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

"Fetch as Google"을 통한 리액트(React) SEO 테스트 (Testing a React-driven website’s SEO using "Fetch as Google")

나는 최근에 검색 엔진 로봇에서 클라이언트 사이드 렌더링 (client-side rendering)된 사이트를 정상적으로 크롤링 할 수 없는지 테스트 했다. 이전 글 - 한글 버전 -에서 볼 수 있듯이, 리액트(React)는 검색 엔진 인덱싱에 문제가 없는 것으로 보인다.

그렇다면 이제 다음 단계를 테스트 해보자. 나는 구글이 문제없이 크롤링 및 인덱싱을 하는지 알아보기 위해 리액트로 된 프로젝트를 세팅했다.

간단한 웹 어플리케이션 세팅

나의 목표는 바벨(Babel), 웹팩(webpack)과 기타 툴 들을 구성하는 시간을 최소화 하여, 간단한 리액트 어플리케이션을 만드는 것이었다. 그리고나서 이 앱을 가능한 빠르게 배포(deploy) 하여 공개적으로 액세스 가능 하도록 하는 것이었다.

또한, 빠르게 수정사항을 배포 할 수 있도록 하고 싶었다.

이러한 목표들을 고려했을 때, 이상적인 툴은 create-react-app과 깃헙 페이지(Github Pages)였다.

create-react-app으로, 리액트 엡을 30분 이내로 만들었다. 아래에 커맨드를 입력하기만 하면 됐다: 

create-react-app seo-sandbox
cd seo-sandbox/
npm start

구글봇(Googlebot)이 알아 볼 수 있도록, 기본 텍스트와 로고 등을 변경하고, 100% 클라이언트 사이드 렌더링 할 수 있는 웹 페이지(voilá )를 만들었다!

GitHub에서 소스를 확인 할 수 있다.

깃헙 페이지에 배포

create-react-app이 말도 안될 정도(Almost psychic)로 도움이 되었다. 그 후에, npm run build 를 실행 했고, 이 프로젝트를 깃헙 페이지에 배포 하기 위해서 어떻게 하면 되는지에 대해서 알려 줬다:

이곳에서 깃헙 페이지를 확인 할 수 있다: https://pahund.github.io/seo-sandbox/

웹 사이트에 "Argelpargel"이라는 단어를 사용했다. 이유는 구글 검색 결과 수가 0이기 때문이다.

구글 검색 콘솔(Google Search Console) 설정

구굴은 웹사이트 테스트를 위한 구글 검색 콘솔(Google Search Console)이라는 무료 툴을 제공한다.

설정을 위해, 나는 웹페이지에 "프로퍼티(property)"를 추가했다:


내가 실제로 이 웹사이트의 주인인지 확인하기 위해, 구글이 이 웹사이트를 찾을 수 있도록 특별한 파일을 업로드 해야만 했다. npm 덕분에 몇초 만에 이 일을 해낼 수 있었다.

구글의 눈(Google's eye)으로 본 나의 웹페이지

설정을 완료한 후, 구글봇(Googlebot)이 웹페이지를 보는 방식을 확인 할 수 있는 "Fetch as Google" 도구를 사용 할 수 있었다:

"Fetch and Render"를 클릭 했을 때, 리액트로 만들어진 페이지가 실제로  구글봇에의해 인덱싱 되는지 확인 할 수 있었다:

지금까지 알아낸 것

발견 #1: 구글봇은 비동기로 로드된 컨텐츠를 읽는다.

내가 가장 먼저 테스트 하고 싶었던 것은 구글봇이 비동기로 렌더링된 페이지를 인덱싱 하거나 크롤링 할 수 없는 지였다.

페이지가 로드된 후, 리액트 앱은 데이터에 대한 Ajax 요청을 했고, 일부 페이지가 해당 데이터로 변경됐다.

이것을 시뮬레이션 하기 위해, 나는 소스에 window.setTimeout을 실행해서 컴포넌트의 상태(component state)를 설정하는 코드를 constructor에 추가했다.

constructor(props) {
super(props);
this.state = {
choMessage: null,
faq1: null,
faq2: null,
faq3: null
};
window.setTimeout(() => this.setState(Object.assign(this.state, {
choMessage: 'yada yada'
})), 10);
window.setTimeout(() => this.setState(Object.assign(this.state, {
faq1: 'bla bla'
})), 100);
window.setTimeout(() => this.setState(Object.assign(this.state, {
faq2: 'shoo be doo'
})), 1000);
window.setTimeout(() => this.setState(Object.assign(this.state, {
faq3: 'yacketiyack'
})), 10000);
}

Github에서 실제 코드 확인 해보자

여기서 10 ms, 100 ms, 1초, 10초 4개의 다른 타임아웃을 사용 했다.

결과적으로, 구글봇은 10초 타임아웃이 완료될때까지 기다릴 것이다. 다른 3개의 텍스트 블록은 "Fetch as Google" 창에 나타난다:

리액트 라우터가 구글봇을 혼란스럽게 한다

나는 다양한 서브 페이지를 로드하는 메뉴바를 만들기 위해 리액트 라우터(4.0.0-alph.5 버전)을 앱에 추가했다 (리액트 라우터 문서에서 복사 붙여넣기 했다):


정말 놀랍게도, "Fetch as Google"을 실행 했을때 빈 녹색 페이지만 보였다:

리액트 페이지를 이용한 클라이언트 사이드 라우터를 사용하는 것은 SEO 측면에서 문제가 되는 것으로 보인다. 이것이 단순히 리액트 라우터 4 알파 버전의 문제인지, 아니면 리액트 라우터 3의 안정 버전도 문제가 되는지는 두고 봐야 할 것이다.

다음 계획

다음에 테스트하고 싶은 것이 몇 가지가 있다:

  • 구글봇은 비동기로 렌더링 된 텍스트 블록의 링크를 확인 하는가?
  • 비동기로 디스크립션(description)같은 메타 태그를 설정 할 수 있고, 구글봇이 그것을 알아챌 수 있을까?
  • 구글봇이 엄청나게 많은 페이지의 리액트로 렌더링된 사이트를 크롤링 하는데 얼마나 걸릴까?



이 글은 Patrick Hund의 Testing a React-driven website’s SEO using “Fetch as Google” 글을 번역한 글입니다. 전문 번역가가 아니라 오역이 있을 수 있습니다. 지적해주시면 고치도록 하겠습니다. 원문 글은 아래에서 확인 할 수 있습니다.

이 글의 이전글도 아래 링크에서 확인 하실 수 있습니다.



리뷰

acid.digital

"Fetch as Google"을 통한 리액트(React) SEO 테스트 (Testing a React-driven website’s SEO using "Fetch as Google")

다음 계획이 기대됩니다~~