---
title: "useSeoMeta()"
description: "Add SEO meta tags with useSeoMeta(). Type-safe API for Open Graph, Twitter cards, and 100+ meta tags with automatic property/name handling."
canonical_url: "https://unhead.unjs.io/docs/head/api/composables/use-seo-meta"
last_updated: "2026-05-18T15:17:07.815Z"
---

The `useSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.

**Quick Start:**

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

## 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

<framework-code>
<template v-slot:vue="">

```ts
import { useSeoMeta } from '@unhead/dynamic-import'
import { computed, ref } from 'vue'

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

</template>

<template v-slot:react="">

```tsx
import { useSeoMeta } from '@unhead/dynamic-import'
import { useState } from 'react'

function ProductPage() {
  const [product] = useState({
    name: 'Awesome Product',
    description: 'This product is amazing',
    image: 'https://example.com/image.png'
  })

  useSeoMeta({
    title: () => `${product.name} - Your Brand`,
    description: () => product.description,
    ogImage: () => product.image,
  })

  return <div>Product Page</div>
}
```

</template>

<template v-slot:solid="">

```tsx
import { useSeoMeta } from '@unhead/dynamic-import'
import { createSignal } from 'solid-js'

function ProductPage() {
  const [product] = createSignal({
    name: 'Awesome Product',
    description: 'This product is amazing',
    image: 'https://example.com/image.png'
  })

  useSeoMeta({
    title: () => `${product().name} - Your Brand`,
    description: () => product().description,
    ogImage: () => product().image,
  })

  return <div>Product Page</div>
}
```

</template>
</framework-code>

## 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

- 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](/docs/head/guides/plugins/infer-seo-meta-tags) guide to super-charge your app's SEO with minimal effort.

## Common Mistakes

### Forgetting essential OG tags

```ts
// ❌ Incomplete - missing image and url
useSeoMeta({
  ogTitle: 'My Page',
  ogDescription: 'Description'
})

// ✅ Complete - all required OG tags
useSeoMeta({
  ogTitle: 'My Page',
  ogDescription: 'Description',
  ogImage: 'https://example.com/og.jpg',
  ogUrl: 'https://example.com/page'
})
```

### Using wrong image dimensions

```ts
// ❌ Image too small for Twitter large card
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: 'https://example.com/small-icon.png' // 100x100
})

// ✅ Proper dimensions (1200x630 for OG, 1200x600 for Twitter large)
useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterImage: 'https://example.com/twitter-card.jpg' // 1200x600
})
```

### Duplicating content unnecessarily

```ts
// ❌ Redundant - description repeated 3 times
useSeoMeta({
  description: 'My description',
  ogDescription: 'My description',
  twitterDescription: 'My description'
})

// ✅ Let platforms fall back - only specify when different
useSeoMeta({
  description: 'SEO-optimized description for search',
  ogDescription: 'More engaging description for social shares'
  // twitterDescription falls back to ogDescription
})
```

## Common Questions

### What's the difference between useSeoMeta and useHead?

`useSeoMeta()` provides a flat, type-safe API specifically for SEO meta tags. `useHead()` is the general-purpose API for all head tags.

### Do I need both title and ogTitle?

The `title` sets the `<title>` tag. `ogTitle` sets `og:title` for social sharing. They can be different - social titles are often more engaging.

## See Also

- [Titles Guide](/docs/head/guides/core-concepts/titles) - Setting page titles
- [useHead()](/docs/head/api/composables/use-head) - General head management
- [useHeadSafe()](/docs/head/api/composables/use-head-safe) - Safe head management with XSS protection