在現代web開發中，為了更好地維護SEO，優化頁面標題和描述等信息，一些前端框架提供了meta標簽的自動化管理， Vue框架也不例外。Vue Meta是一款基于Vue的插件，可以讓你通過統一的API來管理HTML頁面的meta信息，在構建SEO友好的網站的同時，它還能很好地支持類似于Open Graph等許多其他常見標記。

// 安裝 vue-meta
npm install vue-meta --save
// 導入
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta)

Vue Meta 提供的主要功能就是在Vue組件中管理meta標簽。通常情況下，我們需要的meta標簽分為兩類：

• 在內設定的全局meta標簽
• 每一個component可能需要設定的自己的meta標簽

在Vue Meta中可以通過兩種方法來管理這兩類meta標簽。我們可以在組件中添加metaInfo對象，也可以在Vue配置中設置全局的meta信息。

在組件中添加meta

在組件中添加meta標簽，我們可以在該組件的metaInfo對象中添加對應的信息。這個信息是一個對象，包含了該組件中需要設定的meta標簽的各種屬性。

export default {
name: 'MyComponent',
metaInfo: {
title: '這是標題',
meta: [
{ property: 'og:title', content: '這是OG的標題' }
]
}
}

在全局中添加meta

如果需要設置全局的meta信息，我們可以在Vue的實例配置中設置meta對象

const app = new Vue({
meta: {
name: 'mywebsite',
description: '這是一個描述'
}
})

其他常見用法

除了設置