mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-05 03:47:12 +00:00
1.5 KiB
1.5 KiB
title | description | links | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
useSeoMeta | The useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support. |
|
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"}