Vue 검색엔진 노출방법 seo (ssr, vue-meta, prerendering)

vue를 이용해서 검색엔진 노출 방법에 대해서 알아보겠습니다. (seo)

 

1. SSR (Server Side Rendering)

Vue와 같이 SPA (Single Page Application)으로 개발을 하는 경우 CSR(Client Side Rendering)을 이용해서 합니다.

CSR은 클라이언트에서 화면을 구성시 최초에 한번만 서버에서 전체 페이지를 가져온 후 자바스크립트로 페이지를 렌더링 하는 방식입니다.

SSR은 클라이언트에서 자바스크립트를 실행하지 않고 서버에서 페이지를 생성해 클라이언트에 보내는 방식입니다.

 

SSR 장단점

장점

- 초기 속도 빠름 (최초에 서버에서 전체를 가져오는 방식이 아니기 때문)

- 검색 엔진 최적화

단점

- 서버 부하 (새로운 페이지를 매번 서버에 요청 필요)

 

2. vue-meta

HTML metaData를 관리하는 방법으로 페이지에 MetaData를 추가할 수 있습니다.

 

CSR의 경우 페이스북, 트위터는 정적 태그들만 읽고 script를 실행하지 않아 og tag는 적용할 수 없습니다.

 

설치

- npm install vue-meta --save

 

main.js

import Meta from 'vue-meta';
​
Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
  attribute: 'data-vue-meta'
})

component
export default {
    metaInfo: {
        title: 'Title',
        titleTemplate: '%s - www.site.com',
        htmlAttrs: {
            lang: 'kr',
            amp: true
        },
        meta: [
            { charset: 'utf-8'},
            { name: 'description', content: 'description', vmid: 'description'},
            { name: 'keywords', content: 'keywords' },
            { name: 'author', content: 'author' },
        ]
    }
}

 

3. prerendering

빌드시 원하는 페이지를 설정할 경우 /dist 디렉토리안에 각각의 index.html이 생성 됩니다.

 

장점

- 쉽게 적용 가능

단점

- 빌드 시간이 길어짐

- 생성한 페이지가 추가 될 경우 빌드를 다시해야 됨

 

감사합니다.