useSeoMeta

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

::important This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support. ::

:read-more{to="/docs/4.x/getting-started/seo-meta"}

Usage#

```vue [app/app.vue]

When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):

```vue [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>

Parameters#

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

:read-more{to="/docs/4.x/getting-started/seo-meta"}

Performance#

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

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

```vue [app/app.vue]

```

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