더 나은 SEO를 위해 Netlify를 사용하여 SPA 사전 렌더링

ReactJS SPA(단일 페이지 애플리케이션)를 작성하고 배포했지만 최상의 SEO가 없다는 것을 알게 된 사람들을 위해 이 기사가 적합합니다.

서버 측 렌더링을 켜지 않는 정말 간단한 수정이 있습니다.

우선, 아직 Netlify를 사용해보지 않으셨다면 해보시길 권합니다. 실행할 수 있는 무료 서비스이며 Github와 직접 통합됩니다. Github 자격 증명을 사용하여 로그인할 수도 있습니다.

내 친구 James Vidler는 cli를 사용하여 명령줄에서 netlify하기 위해 사이트를 배포하는 방법을 설명하는 really good article을 가지고 있습니다.

빌드 출력이/build 디렉토리에 있다고 가정하면 기본적으로 다음과 같이 간단합니다.

> npm run build
> npm install -g netlify-cli
> netlify login
> netlify deploy --dir=build --open

netlify에서 실행하려면 이에 대한 내용Vidler’s article을 읽어 보시기 바랍니다. 그런 다음 실제로 Netlify 자체에 로그인하면 설정 > 빌드 및 배포를 클릭하면 몇 가지 추가 설정이 표시됩니다.


Prerendering 섹션이 보일 때까지 아래로 스크롤합니다.


이 서비스는 documented here on Netlify 이지만 사이트에 침입하려는 봇이 감지될 때마다 사이트의 미리 렌더링된 버전을 제공한다는 것입니다.

예를 들어 일반적으로 내 테스트 SPA의 소스는 다음과 같습니다.


최소한으로 말하면 SEO 친화적이지 않습니다.

이제 Chrome의 개발자 도구를 사용하여 사용자 에이전트를 설정하고 Google 검색 봇인 것처럼 가장할 수 있습니다. 이렇게 하려면 "네트워크 조건"탭을 켜야 합니다.


이제 사용자 에이전트를 쉽게 설정할 수 있습니다.


같은 페이지를 새로고침하고 무엇을 얻는지 봅시다.

SEO 측면에서 훨씬 좋아 보입니다.


이제 괜찮은 태그와 콘텐츠를 렌더링하는 한 잘 할 수 있습니다!

FYI - 저는 Agility CMS에서 일합니다. - React + Netlify와 함께 무료로 사용하세요!