API Composables
useSeoMeta
The useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
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.
This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support.
Read more in Missing link.
Example
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):
app.vue
<script setup lang="ts">const title = ref('My title')useSeoMeta({ title, description: () => `description: ${title.value}`})</script>Parameters
There are over 100 parameters. See the full list of parameters in the source code.