v3.17

useSeoMeta

Source
useSeoMeta 可组合函数允许你将网站的 SEO 元标记定义为一个完全支持 TypeScript 的平面对象。

这有助于你避免常见错误，例如将 property 写成 name，以及拼写错误。 - 超过 100 个元标签已完整输入。

¥This helps you avoid common mistakes, such as using name instead of property, as well as typos - with over 100+ meta tags fully typed.

这是向你的网站添加元标记的推荐方法，因为它具有 XSS 安全性并且完全支持 TypeScript。
Read more in Docs > Getting Started > Seo Meta.

用法

¥Usage

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)：

¥When inserting tags that are reactive, you should use the computed getter syntax (() => 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>

参数

¥Parameters

有超过 100 个参数。参见 源代码中的完整参数列表。

¥There are over 100 parameters. See the full list of parameters in the source code.

Read more in Docs > Getting Started > Seo Meta.

性能

¥Performance

在大多数情况下，SEO 元标记不需要具有响应性，因为搜索引擎机器人主要扫描页面的初始加载。

¥In most instances, SEO meta tags don't need to be reactive as search engine robots primarily scan the initial page load.

为了获得更好的性能，当元标记不需要具有响应性时，你可以将 useSeoMeta 调用封装在仅限服务器的条件下：

¥For better performance, you can wrap your useSeoMeta calls in a server-only condition when the meta tags don't need to be reactive:

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 可组合组件，但为了支持这种方法，它已被弃用。

¥This previously used the useServerSeoMeta composable, but it has been deprecated in favor of this approach.