composables
The simplest way to add meta tags to your site.
The useSeoMeta
composable lets you define your sites SEO Meta as a flat object with full TypeScript support.
This helps you avoid common mistakes, such as using name
instead of property
as well 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.
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',
})
The useServerSeoMeta
composable is the same as useSeoMeta
but it is meant to be used on the server.
This can be useful to minimise your client build, as most meta data does not need to be dynamic.
useServerSeoMeta({
title: 'About',
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
Make sure to use the Unhead Vite Plugin) with it.
Powered by the zhead schema and unpackMeta
function. Unhead knows which meta tags belong where, as well
as all the quirks.
Use it with the Infer SEO Meta Tags guide to super-charge your apps SEO.