Nuxt/docs/3.api/2.composables/use-seo-meta.md

title	description	links
useSeoMeta	The useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.	label icon to size Source i-simple-icons-github https://github.com/unjs/unhead/blob/main/packages/unhead/src/composables/useSeoMeta.ts xs

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/getting-started/seo-meta"}

Usage

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

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

<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/getting-started/seo-meta"}