---
title: useSeoMeta()
description: The simplest way to add SEO meta tags to your site with full TypeScript support
---

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` 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.

## Basic Usage

```ts
import { useSeoMeta } from '@unhead/dynamic-import'

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

## Common Use Cases

### Complete SEO Setup

```ts
import { useSeoMeta } from '@unhead/dynamic-import'

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

### Dynamic Meta Tags

```ts
import { useSeoMeta } from '@unhead/dynamic-import'
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),
})
```

## useServerSeoMeta

The `useServerSeoMeta` composable is the same as `useSeoMeta` but it is designed to run only on the server.

This can be useful to minimize your client bundle size, as most meta data does not need to be dynamic.

```ts
import { useServerSeoMeta } from '@unhead/dynamic-import'

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

::tip
For most SEO meta tags, search engines will only read the initial HTML. Using `useServerSeoMeta` is often sufficient and more performant.
::

### Tree Shaking

The `useServerSeoMeta` composable can be tree-shaken from your client bundle in most cases since search engines only need the initial SSR response.

For Nuxt, this is handled automatically. For other frameworks, you'll need to use the [Unhead Vite Plugin](/docs/head/guides/advanced/vite-plugin).

## How it works

The `useSeoMeta` composable is powered by the [zhead](https://github.com/harlan-zw/zhead) schema and `unpackMeta` function. Unhead knows which meta tags belong where, as well as handling all the browser quirks for you.

## API Reference

### Input

A flat object with keys representing different meta tags. All properties are optional.

### Return Value

The composable returns a `MetaProxy` object that allows updating the meta tags reactively.

## Best Practices

- Use `useServerSeoMeta` whenever possible for performance
- Include essential meta tags for social sharing (og:title, og:description, og:image)
- Keep descriptions concise (under 160 characters) but informative
- Use unique titles and descriptions for each page
- Provide appropriately sized images for social sharing

## Super-charged SEO

Use it with the [Infer SEO Meta Tags](/plugins/plugins/infer-seo-meta-tags) guide to super-charge your app's SEO with minimal effort.