Vue3中SEO最佳化實踐：利用unhead vue外掛設定Mate標籤

张苹果博客發表於2024-04-29
Vue

我們在構建Vue3專案時，搜尋引擎最佳化（SEO）是一個不可忽視的重要方面。最佳化網站結構、內容和程式碼，使其更符合搜尋引擎的排名規則，對於提升網站曝光度和吸引更多使用者至關重要。其中，設定合適的Mate標籤（如標題、描述和關鍵詞）是SEO最佳化的關鍵步驟之一。在Vue3專案中，我們可以利用unhead外掛來輕鬆實現Mate標籤的設定，從而提升網站的SEO效果。

官網地址： Unhead官網

一，安裝Unhead

npm install @unhead/vue
//或
yarn add @unhead/vue

二，在main.ts引入註冊

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'

const app = createApp()

const head = createHead()
app.use(head)

app.mount('#app')

三，元件中使用

<script setup lang=ts>
import { useHead } from '@unhead/vue'

useHead({
  title: '網站標題',
  meta: [
    {
      name: 'description',
      content: 'My page description',
    }, {
      name: 'keywords',
      content: 'My page keywords',
    },
  ],
})

</script>

Unhead基本封裝好了所有head相關的api，而且不止限於Vue使用，更多使用方法，請訪問官網檢視。

更多資訊請訪問： 張蘋果部落格

相關文章