useSeoMeta

原始檔
useSeoMeta 可組合函式允許你將站點的 SEO 元標籤定義為一個扁平物件，並提供完整的 TypeScript 支援。

這有助於你避免常見的錯誤，例如使用 name 而不是 property，以及拼寫錯誤——提供超過 100 種完全型別化的元標籤。

這是向你的站點新增元標籤的推薦方式，因為它具備 XSS 安全性並支援完整的 TypeScript。
在文件 > 4 X > 入門 > Seo Meta中閱讀更多內容。

使用

app/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/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 個引數。請參閱原始碼中完整的引數列表.

在文件 > 4 X > 入門 > Seo Meta中閱讀更多內容。

效能

在大多數情況下，SEO 元標籤不需要是響應式的，因為搜尋引擎機器人主要掃描初始頁面載入。

為了獲得更好的效能，當元標籤不需要是響應式時，你可以將 useSeoMeta 呼叫包裝在僅限伺服器的條件中。

app/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 可組合函式，但它已被棄用，轉而採用此方法。