Vue.js에서 meta 태그와 타이틀 설정하기

by

Vue.js를 사용하여 웹 애플리케이션을 만들 때 SEO나 소셜 미디어 공유를 위한 메타 태그와 타이틀을 설정하는 것이 중요합니다. 이 포스트에서는 vue-meta라는 플러그인을 사용하여 이를 쉽게 관리하는 방법을 소개합니다.


1. vue-meta 설치

먼저, 프로젝트에 vue-meta 플러그인을 설치합니다.

npm install vue-meta --save


2. Vue 앱에 vue-meta 플러그인 추가

메인 진입점인 main.js 또는 main.ts에 vue-meta를 추가합니다.

import Vue from 'vue';
import VueMeta from 'vue-meta';

Vue.use(VueMeta, {
  // 추가적인 옵션 설정(필요시)
});


3. 컴포넌트에서 메타 정보 설정

개별 Vue 컴포넌트에서 원하는 메타 정보를 설정할 수 있습니다.

export default {
  name: 'MyComponent',
  metaInfo: {
    title: 'My Page Title',
    meta: [
      { name: 'description', content: 'This is my page description.' }
      // 추가적인 메타 태그 설정 가능
    ]
  }
}


4. 동적으로 메타 정보 업데이트

라우트 변경, 데이터 로딩 등의 이벤트에 따라 메타 정보를 동적으로 업데이트 할 수 있습니다.

this.$meta().refresh()



결론

vue-meta를 활용하면 Vue.js 기반의 웹 애플리케이션에서 메타 정보를 손쉽게 관리하고 업데이트할 수 있습니다. SEO나 소셜 미디어 공유를 위해 중요한 메타 정보를 정확하게 설정하여, 웹 애플리케이션의 가시성과 사용자 경험을 향상시킵니다.





Leave a Comment