unhead@betaThe useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
Quick Start:
useSeoMeta({
title: 'Page Title',
description: 'Page description for search engines',
ogTitle: 'Social Share Title',
ogDescription: 'Description for social media',
ogImage: 'https://example.com/og-image.jpg'
})
This helps you avoid common mistakes, such as using name instead of property attributes, and prevents 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 provides comprehensive TypeScript support.
import { useSeoMeta } from '#imports'
useSeoMeta({
title: 'About',
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
import { useSeoMeta } from '#imports'
useSeoMeta({
// Basic SEO
title: 'Product Name - Your Brand',
description: 'Detailed product description optimized for search engines.',
// Open Graph
ogTitle: 'Product Name - Your Brand',
ogDescription: 'Engaging description for social media shares.',
ogImage: 'https://example.com/product-social.jpg',
ogUrl: 'https://example.com/products/my-product',
ogType: 'product',
ogSiteName: 'Your Brand',
// Twitter
twitterTitle: 'Product Name - Your Brand',
twitterDescription: 'Engaging description for Twitter shares.',
twitterImage: 'https://example.com/product-twitter.jpg',
twitterCard: 'summary_large_image',
// Product specific (structured data will be generated)
articleAuthor: 'Author Name',
articlePublishedTime: '2023-01-01',
articleModifiedTime: '2023-02-15',
})
import { useSeoMeta } from '#imports'
import { computed } from 'vue' // or equivalent in your framework
const product = ref({
name: 'Awesome Product',
description: 'This product is amazing',
image: 'https://example.com/image.png'
})
useSeoMeta({
title: computed(() => `${product.value.name} - Your Brand`),
description: computed(() => product.value.description),
ogImage: computed(() => product.value.image),
})
The useSeoMeta composable is powered by the zhead schema and unpackMeta function. Unhead knows which meta tags belong where, as well as handling all the browser quirks for you.
A flat object with keys representing different meta tags. All properties are optional.
The composable returns a MetaProxy object that allows updating the meta tags reactively.
Use it with the Infer SEO Meta Tags guide to super-charge your app's SEO with minimal effort.
useSeoMeta() provides a flat, type-safe API specifically for SEO meta tags. useHead() is the general-purpose API for all head tags.
The title sets the <title> tag. ogTitle sets og:title for social sharing. They can be different - social titles are often more engaging.