mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
52 lines
1.5 KiB
Markdown
52 lines
1.5 KiB
Markdown
---
|
|
title: 'useSeoMeta'
|
|
description: The useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/unjs/unhead/blob/main/packages/unhead/src/composables/useSeoMeta.ts
|
|
size: 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
|
|
|
|
```vue [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>
|
|
```
|
|
|
|
When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):
|
|
|
|
```vue [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](https://github.com/harlan-zw/zhead/blob/main/packages/zhead/src/metaFlat.ts#L1035).
|
|
|
|
:read-more{to="/docs/getting-started/seo-meta"}
|