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.

Example

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',
})

useServerSeoMeta

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',
})

Tree Shaking

You can tree shake the useServerSeoMeta composable in most cases as robots will only need the initial SSR response.

For Nuxt, this is taken care of for you. For other implementations, you will need to use the Unhead Plugin.

How it works

Powered by the zhead schema and unpackMeta function. Unhead knows which meta tags belong where, as well as all the quirks.

Super-charged SEO

Use it with the Infer SEO Meta Tags guide to super-charge your apps SEO.