SEO를 위한 Vue 앱에 prerender-spa-plugin과 vue-meta 적용하기 1

회사에서 클라이언트사의 스페셜 페이지를 우리 플랫폼으로 내재화 하는 작업을 맡아 진행하게 되었다.

스페셜 페이지의 가장 중요한 부분 중 하나는 SNS로 링크 공유시 적절한 이미지와 내용이 뜨는 것인데, 우리 플랫폼은 SPA로 되어있어서 SEO도 제대로 되어있지 않고 meta og 태그도 전혀 없는 상태.

 

기존 스페셜 페이지는 멀티 페이지로 구성하여 각 페이지마다 index.html 파일을 따로 두어 해당 기능을 처리하였는데 내재화를 하게 되면서 앞으로 발생하는 모든 스페셜 페이지를 시스템화 해야했기 때문에 링크 공유 기능과 SEO도 함께 잡을 수 있는 prerender 플러그인을 적용해보기로 하였다.

 

팀장님이 예제 링크와 사용법을 포스팅한 여러 블로그들을 나에게 보내주셨고 생각보다 간편해보여서 나도 금방 테스트 해볼 수 있었다.

prerender spa plugin 사용법이나 vue-meta 적용법 등은 아래 링크들에 자세히 나와있다. 내가 많이 도움받았던 링크들이다.

https://myeongjae.kim/blog/2018/09/23/single-page-app%EC%9D%98-search-engine-optimizaion%EA%B3%BC-vuejs

About :: Myeongjae Kim

prerender-spa-plugin 공식 깃헙

chrisvfritz/prerender-spa-plugin

https://dong-queue.tistory.com/14

Vue (Single Page App)의 검색엔진 노출 방법- Prerendering

해당 블로그들을 보면 단순하게 금방 해결될 것 처럼 나온다. 실제로도 내가 새로운 간단한 프로젝트를 생성해서 해보면 정말 그대로 잘되는데 우리 앱에만 적용이 안되는 것이었다...!

 

몇일간의 삽질 끝에 드디어 원인을 알아냄.

결론부터 말하자면 원인은 headless 브라우저의 포트가 8000번으로 설정되어서 api호출 시 CORS 이슈로 인해 화면이 제대로 뜨지 않았기 때문이다. 해결방법은 너무나 간단했다. 옵션으로 server port값을 지정해주면 된다.

혹시 나처럼 원인 모르게 빌드에 실패하는 사람이 있다면 headless: false로 해서 직접 브라우저를 들여다보며 디버깅 해보시길 바란다. 나도 그걸 몰라서 헤맨게 거의 90퍼센트 ㅠ_ㅠ

 

vue.config.js 파일 configureWebpack.plugins 속성 배열값에 아래처럼 코드를 추가해 주었다.

new PrerenderSPAPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: ['/about'],
    // 포트값 지정
    server: {
    	port: 8080
    },
    renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
    	headless: false,
        // document.querySelector로 찾을 수 있는 특정 엘리먼트를 발견할 때 까지 렌더링 딜레이
        renderAfterElementExists: '#app',
    })
})

(그러나 위 코드는 로컬에서 테스트 하기 위한 코드고 보통은 실제 프로덕트 빌드 시에만 사용하기 때문에 server 옵션은 바뀔 수 있다.)

 

혹시 몰라서 renderAfterElementExists값도 추가해 주었다. 해당 컴포넌트에 아이디를 할당하고 그 아이디값을 넣어주었는데 저 속성이 없어도 원하던 결과물이 나오긴 하더라... 

renderAfterElementExists에 적용한 엘리먼트를 발견하지 못하면 타임아웃으로 렌더링에 실패하기 때문에 prerender를 적용할 모든 라우터에 대응할 수 있는 엘리먼트(ex. #app)를 넣어주어야 한다.

 

그리고 실제 배포시 젠킨스나 특정 서버에서 localhost로 빌드를 진행하게 되는데 이 때 나의 경우는 젠킨스 웹이 이미 8080 포트를 사용하고 있어서 자동으로 8090으로 로컬 서버가 실행되었다. 그래서 백엔드 팀과 조율 후 8090포트도 CORS를 허용하도록 하고 배포를 진행하였다.

 

이번 삽질은 대체로 내가 prerender-spa-plugin의 정확한 동작 방법을 몰라서 삽질했던게 더 크다.

prerender-spa-plugin은 웹팩의 빌드가 끝난 후 빌드된 파일을 가지고 headless 브라우저를 실행해서 해당 페이지를 스냅샷(?)처럼 그대로 html파일로 저장해주는것! 그래서 prerender된 파일은 자바스크립트 없이도 원하는 화면을 볼 수 있다.

 

이 후 실제 SEO가 잘 적용되었는지 테스트하며 고군분투한 내용은 다음 포스팅에 적어보도록 하겠다! 아래 링크 클릭!

https://soobakba.tistory.com/36

SEO를 위한 Vue 앱에 prerender-spa-plugin과 vue-meta 적용하기 2