useSeoMeta
useSeoMeta 組合式函式讓您以扁平化的物件定義網站的 SEO meta 標籤，並完整支援 TypeScript。這能幫助您避免常見的錯誤，例如使用 name 而非 property，以及打字錯誤 - 超過 100 多個 meta 標籤都已完整輸入類型。
這是將 meta 標籤新增至您網站的建議方式，因為它具有 XSS 安全性並完整支援 TypeScript。
用法
app.vue
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
當插入響應式標籤時，您應該使用計算屬性 getter 語法 (() => value)
app.vue
<script setup lang="ts">
const title = ref('My title')
useSeoMeta({
title,
description: () => `This is a description for the ${title.value} page`
})
</script>
參數
參數超過 100 個。請參閱原始碼中的完整參數列表。
效能
在大多數情況下，SEO meta 標籤不需要是響應式的，因為搜尋引擎機器人主要掃描初始頁面載入。
為了獲得更好的效能，當 meta 標籤不需要是響應式時，您可以將 useSeoMeta 呼叫包裝在僅限伺服器端條件中
app.vue
<script setup lang="ts">
if (import.meta.server) {
// These meta tags will only be added during server-side rendering
useSeoMeta({
robots: 'index, follow',
description: 'Static description that does not need reactivity',
ogImage: 'https://example.com/image.png',
// other static meta tags...
})
}
const dynamicTitle = ref('My title')
// Only use reactive meta tags outside the condition when necessary
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})
</script>
之前使用過 useServerSeoMeta 組合式函式，但為了採用此方法，它已被棄用。