Vue.js SEO를 위한 pre-rendering (pre-render-spa-plugins)

 

 

이리저리 여러가지들을 참고하여 내가 했던 방식을 서술합니다.

 

 

현재 새로운 프로젝트를 시작했다.

해당 프로젝트는 Vue cli 를 통해서 만드는데 작은 프로젝트지만 확장될 가능성이 있으며

무엇보다 사용자에게 검색이 잘 되어야한다는 조건이 있다. (게시판 두개와 해당 게시판을 운영할 백오피스 정도의 규모)

내가 해당 프로젝트를 하면서 프로젝트에 녹이고 싶은 두가지가 있는데 그것은 다음과 같다.

 

1. WAI ARIA를 사용할 것
2. SEO(검색 엔진 최적화)를 신경 쓸 것

 

그 중 두번째 이슈에 대한 포스팅이다.

Vue router를 쓴다는 전제하에 이 포스팅은 작성되었다.

 

 

 

많이들 알겠지만 Vue.js에서 SEO를 위해 크게 세가지 방식으로 쓰이는 것 같다.

 

1. SSR (Server Side Rendering)
2. Pre-rendering
3. Vue-meta plugin

 

이것저것 찾아보니 결국 종착지는 Nuxt.js로 하는 SSR이라고들 하지만....

처음엔 가장 편하게 vue-meta plugin을 쓸까 고민을 했다.

 

https://www.npmjs.com/package/vue-meta

 

 

 

 

 

그리고 고민을 했다.

해당 사이트는 어찌보면 홍보가 가장 중요하고,

마케팅의 일환으로 페이스북이나 이런 곳에 홍보물을 올릴 수도 있다 생각되었다.

일단 페이스북과 트위터같은 SNS은 static(정적인)한 페이지만을 보여준다고 한다.

즉, javascript로 만들어지는 SPA 사이트는 아무리 올려도 결국 메인만 보여질 뿐이라는거다.

(메인에 메타태그라도 잘 넣어뒀으면 다행이지..)

 

그리고 이리저리 찾아보니

구글이나 네이버의 검색엔진이 크롤링시 javascript 를 읽어간다 해도

SSR 만큼은 확실하지 않다는 글들이 많이 보였다. Nuxt를 도입해야할까..

 

그러면서 두번째인 pre-rendering 를 찾아보게 되었다.

 

 

https://www.npmjs.com/package/prerender-spa-plugin

 

 

여담이지만 해당 plugin을 만든이가 vue.js를 만든 멤버라던대... 그만큼 많이 쓰인다는거!

해당 npm 페이지에 설치부터 옵션까지 아주 자세히 나와있다. (설치 포스팅은 많으니까..)

 

pre-render 같은 경우는

내가 원하는 페이지를 설정하면 해당 페이지가 /dist 디렉토리 안에 각 index.html 로 만들어진다.

다만 이점에서 랜더링할 페이지가 많을수록 빌드 타임이 오래 걸리고

생성할 동적 페이지가 많을수록 (게시판의 상세 같은) 새롭게 빌드해서 올려야하는 이슈가 있다.

또한 상태값에 따른 페이지 노출에 문제가 있었다. 생성되는 index.html 이 상태값(로그인과 같은)을 가지고 있지 않기 때문에

깜빡일 수 있다라는 것이다.

 

허나, 나는 pre-render를 도입했다. 그 이유는 다음과 같다.

 

1. 로그인이 필요한 백오피스(관리자 페이지)는 SEO 적용 필요가 없다. (사용자는 로그인이 없다)
2. 회사의 소개 홍보가 목적인 사이트이다.

 

그리고 설치후에 빌드해보니 잘 만들어진다.

다만(두번째 이슈!)

discription, image, :og, :twitter... 와 같은 메타 태그가 안들어가는 것을 보고 이를 삽입할 방법을 찾아야했다.

 

 

이 문제는 pre-render 시 세가지 방법으로 해소 할 수 있을 것 같다.

 

1. pre-render-spa-plugin 의 postProcess 에서 원하는 메타 태그를 동적 생성해서 추가한다.
2. vue-meta plugin를 같이 쓴다.
3. router path에 메타 태그 정보를 넣고 네이게이션 가드를 설정한다.

 

 

이 중 어떤 것을 쓸까에 대한 고민이 이어졌다.

나의 선택은 플러그인을 더 추가하기보다 라우터의 기능을 써보자로 정했다.

그래서 2번째 방법인 Vue router 의 네비게이션 가드를 써봤다.

공식 사이트 : https://router.vuejs.org/kr/guide/advanced/navigation-guards.html

 

 

적용방법 : https://www.digitalocean.com/community/tutorials/vuejs-vue-router-modify-head

 

위 방법을 통해서 페이지 전환시 메타태그가 업데이트 되는 것을 확인할 수 있었다.

물론! pre-render로 생성되는 페이지에도 해당 메타태그가 아주 잘! 추가 되어진걸 확인했다.

 

 

pre-render가 Nuxt보다는 적용하기 쉽겠지만

둘의 장단점은 명확하다.

 

1. 운영중인 프로젝트에 SEO 적용히 pre-render가 확실히 이점이 있다.
2. SEO를 적용해야 할 프론트에서 상태값을 가져야하는 페이지의 경우엔 이슈가 크다.

 

2번째 이슈는 webpack.js.org/plugins/define-plugin 플러그인을 이용해서 관리가 가능하다는데

다만 화면을 띄우는데 있어서 시간이 조금더 걸릴 수 있다고 한다.

 

https://github.com/wan2land/gdg171021-vue-ssr-vs-prerender/commit/f80e0a91e493896c3d46f54b0700b88f9c569547

 

 

한 이틀 고민하면서 보고 또 보고 한 결과임다.