[ Vue ] 페이지별 메타태그 | vue-meta 사용법

 

vue는 SPA이다!

한개의 html파일에 여러 페이지들이 존재하는것처럼
소스코드가 바꿔끼워지는것이기 때문에 메타태그 설정이 조금 까다롭다.

 

메타 태그를 각 페이지의 html파일의 head부분에

각 페이지에 맞도록 다르게 입력해주어야 하는데,

 

그래서 SSR방식인 Nuxt를 사용하는 방법도 있는데 이제와서 바꾸기엔 너무 먼 길이기에

vue-meta라는 라이브러리를 사용해 메타태그 설정 하는 법을 정리해본다.

 

vue-meta 설치

yarn add vue-meta
npm install vue-meta --save

 

vue-meta 설정 ( main.js )

import Vue from 'vue'

// VueMeta
import Meta from 'vue-meta'
Vue.use(Meta, {
  attribute: 'data-vue-meta'
  // vmid를 사용하기 위한 옵션
});

 

페이지별 head에 들어갈 내용 정의 ( component )

export default {
  metaInfo: {
    // title 입력하기
    title: '페이지 타이틀',
    // link tag 입력하기
    link: [{rel: "canonical", href: 'www.site.com'}],
    // meta tag 입력하기
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { vmid: "description", name: "description", content: 'description' }
      //vmid ↑ 메타 태그를 고유하게 만들어준다.
    ]
  }
}

 

vmid를 사용하는 이유

나의 경우에 index.html에 기본적인 메타태그를 등록해두었다. ( 모든 페이지에 적용된다 )

vmid로 메타태그 네임과 같은 값을 설정하지 않으면

index.html에서 설정한 메타태그의 값과 컴포넌트 내부에서 설정한 메타태그의 값,

두개가 모두 head 내에 삽입되므로 이를 방지하여 메타태그를 고유하게 하기위해 사용한다.

 

실제 크롬 익스텐션인 SEO check로 확인했을때

index.html에서 설정한 메타태그의 값과 컴포넌트 내부에서 설정한 메타태그의 값이 순서대로 나타났고,

실제 적용되는 먼저 적용된 index.html에서 설정한 메타태그가 meta 대표로 설정되었다. 

 

 

 + )

나는 기본적인 설정만을 위해 짧게 정리했고.

아래 참고한 블로그에 세세하게 정리되어있다.

진짜 감사하게 잘 봤다 👍

---

✔️ 참고

https://pozafly.github.io/html/meta-tag-and-vue-meta/

https://vue-meta.nuxtjs.org/