SPA(Single Page Application)로 구성된 페이지에서 SEO(Search Engine Optimization)를 할 수 있는 방법은 무엇일까?

 

 

SPA (single page application)

: 클라이언트에서 데이터를 불러와서 , HTML을 클라이언트에서 생성하는 역할 

서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다.

 

 

해결책

 

(1) SSR (Server Side Rendering)

만약, 우리 사이트가 구축 전이어서 SEO 구축이 필요한 상황이라면 SPA를 SSR (서버사이드렌더링) 방식으로 구축하여야합니다.

SPA는 기본적으로 CSR (Client-Side Rendering) 방식으로 구현됩니다. 즉, 서버에서는 HTML, JS 등 모든 재료를 다운 받은 후 클라이언트 단에서 렌더링을 하는 방식을 취합니다. 그러나 SPA이지만 크롤링에 더 친화적인 SSR 방식으로 사이트를 구축하는 것이 SEO의 관점에서 적합합니다. 참고로 대표적인 SSR 프레임워크로는 React의 Next.js, Vue의 Nuxt, Angular의 Angular Universal이 있습니다.

(2) Pre-rendering (사전렌더링)

만약 우리 사이트가 이미 SPA의 CSR 방식으로 구현되어있거나, SSR방식으로 개발이 불가한 경우 Pre-rendering (사전랜더링)을 통해 SEO할 수 있습니다.

Pre-rendering은 서버에서 요청하는 자가 사람인지 크롤러인지 판단하여 사람에게는 HTML과 js 등을 제공하고 크롤러에게는 사전에 렌더링된 HTML 버전의 페이지를 보여주는 방식입니다. 즉, 크롤러는 서버에서 이미 렌더링된 HTML 버전의 소스를 손쉽게 읽을 수 있게 됩니다.

Pre-rendering 라이브러리로는 react-helmet, prerender-spa-plugin, prerender.io, puppeteer, rendertron 등이 있습니다.

(3) History API

History API는 SPA방식의 웹사이트에서 주소가 바뀌지 않는 문제를 해결하기 위해 싱글페이지이지만 주소를 부여하는 기능의 API입니다.

과거 SPA환경에서 #또는 #!을 통해 주소를 구분하였지만 현재는 History API와 pushState() 방법을 통해 특수문자로 된 주소가 아닌 정적인 URL과 같은 주소를 설정할 수 있게 되었습니다. SEO의 관점에서 이는 크롤링뿐만 아니라 백링크를 얻기 용이하게 되었다고 볼 수 있습니다.

 

 

 

면접시 긴장된 ver.

 

SPA에서 SEO를 할 수 있는 방법은 크게 세가지가 있습니다.

첫째는 사이트를 구축하기 이전이라면 크롤링에 더 친화적인  서버사이드렌더링 방식으로 사이트를 구축하는 것입니다.

이를 위한 프레임 워크로는 리액트의 next.js / vue의 Nuxt / Angular의 Angular Universal이 있습니다.

두번째는 pre-rendering 방식이 있습니다. 이는 서버에서 요청하는 자가 사람인지 크롤러인지 판단하여 사람에게는 HTML과 js 등을 보여주고, 크롤러에게는 사전에 렌더링된 HTML 버전의 페이지를 보여주는 방식입니다.

세번째는 History API를 이용하여 웹사이트에서 주소가 바뀌지 않는 문제를 해결하는 것입니다.

이는 SEO 관점에서 크롤링 뿐 아니라 백링크를 얻기에도 용이해집니다.