티스토리 뷰

vue 를 이용하여 single page web app을 개발하고 server side rendering 을 사용하지 않은 경우 vue 페이지는 클라이언트 브라우저에서 해석되어 페이지를 보여주는데 이런경우에는 검색엔진에 노출되지 않음.


이럴때 vue-meta 를 사용하여 정보 노출이 가능함.


npm i --save vue-meta

import Vue from 'vue'

...

import Meta from 'vue-meta'


Vue.use(Meta)

<template>
</template>
<script>
export default {

  metaInfo: {

    title: '제목'),

    titleTemplate: '%s | www.ex.com/#/',

    htmlAttrs: {

      lang: window.getApp.$i18n.locale // i18n 사용하지 않는 경우 직접 입력

    },

    meta: [

      { charset: 'utf-8'},

      // SEO setting

      { name: 'description', content: window.getApp.$t('meta.homeInitial.desc'), vmid: 'description'},

      { name: 'keywords', content: window.getApp.$t('meta.homeInitial.keyword')},

      { name: 'author', content: 'biznent'},

      // SNS

      {

        property: 'og:title',

        content: window.getApp.$t('meta.homeInitial.title'),

        template: chunk => `${chunk} | www.weasyhome.com/#/`,

        vmid: 'og:title'

      },

      // mobile

      { name: 'viewport', content: 'width=device-width, initial-scale=1'}

    ],

    // link

    link: [

      { rel: 'login', href: 'login' },

      { rel: 'register', href: 'register'}

    ]

  }

}
</script>


위와 같이 작성하면 client에서 렌더링되는 페이지도 head 부분에 meta 정보가 추가됨.



https://alligator.io/vuejs/vue-seo-tips/

댓글
댓글쓰기 폼
공지사항
최근에 달린 댓글
Total
89
Today
0
Yesterday
2
링크
«   2019/07   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
글 보관함