---
title: "useSeoMeta() · Unhead"
canonical_url: "https://unhead.unjs.io/docs/typescript/head/api/composables/use-seo-meta"
last_updated: "2026-07-21T08:17:54.878Z"
meta:
  description: "Add SEO meta tags with useSeoMeta(). Type-safe API for Open Graph, Twitter cards, and 100+ meta tags with automatic property/name handling."
  "og:description": "Add SEO meta tags with useSeoMeta(). Type-safe API for Open Graph, Twitter cards, and 100+ meta tags with automatic property/name handling."
  "og:title": "useSeoMeta() · Unhead"
---

Home

`
Unhead on GitHub

Switch to TypeScriptSwitch to VueSwitch to ReactSwitch to SvelteSwitch to Solid.jsSwitch to AngularSwitch to Nuxt

**Composables**

# **useSeoMeta()**

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/7.api/composables/3.use-seo-meta.md)

`**useSeoMeta()**` accepts SEO metadata as a typed flat object.

```
useSeoMeta(unheadInstance, {
  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'
})
```

Unhead chooses `**name**` or `**property**` for each field. Because the API accepts meta values rather than raw HTML, it does not expose `**innerHTML**` or arbitrary tag attributes.

## Basic Usage

```
import { useSeoMeta } from 'unhead'

useSeoMeta(unheadInstance, {
  title: 'About',
  description: 'My about page',
  ogDescription: 'Still about my about page',
  ogTitle: 'About',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
```

## Examples

### Complete SEO Setup

```
import { useSeoMeta } from 'unhead'

useSeoMeta(unheadInstance, {
  // 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: 'website',
  ogSiteName: 'Your Brand',

  // Twitter
  twitterCard: 'summary_large_image',
})
```

### Dynamic Meta Tags

```
import { useSeoMeta } from 'unhead'
import { computed, ref } from 'vue'

const product = ref({
  name: 'Travel Keyboard',
  description: 'A compact mechanical keyboard with hot-swappable switches',
  image: 'https://example.com/image.png'
})

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

## How it works

Unhead's flat-meta plugin converts each camel-cased key to the appropriate `**<meta>**` tag and chooses `**name**`, `**property**`, or `**http-equiv**` according to its built-in schema. Packed objects such as `**robots**` are expanded into their serialized content values.

## API Reference

### Input

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

### Return Value

The composable returns an `**ActiveHeadEntry<UseSeoMetaInput>**` with `**patch()**` and `**dispose()**` methods. Framework integrations also update the entry when their reactive input changes.

## Common Mistakes

### Omitting useful Open Graph tags

The [**~~Open Graph protocol~~**](https://ogp.me/) defines `**og:title**`, `**og:type**`, `**og:image**`, and `**og:url**` as its basic fields. Image dimensions are optional structured properties, while `**og:image:alt**` should accompany an image.

```
// Minimal preview metadata
useSeoMeta(unheadInstance, {
  ogTitle: 'My Page',
  ogDescription: 'Description'
})

// Richer preview metadata
useSeoMeta(unheadInstance, {
  ogTitle: 'My Page',
  ogDescription: 'Description',
  ogImage: 'https://example.com/og.jpg',
  ogUrl: 'https://example.com/page',
  ogType: 'website',
})
```

### Reusing an unsuitable preview image

```
// A small icon is unlikely to work well as a large social preview
useSeoMeta(unheadInstance, {
  twitterCard: 'summary_large_image',
  ogImage: 'https://example.com/small-icon.png',
})

// Supply a purpose-built social image and its dimensions
useSeoMeta(unheadInstance, {
  twitterCard: 'summary_large_image',
  ogImage: {
    url: 'https://example.com/social-card.jpg',
    width: 1200,
    height: 630,
    alt: 'Product preview',
  },
})
```

### Duplicating content unnecessarily

```
// Repeated values are harder to keep in sync
useSeoMeta(unheadInstance, {
  description: 'My description',
  ogDescription: 'My description',
})

// Or install InferSeoMetaPlugin and let it generate matching fallbacks
useSeoMeta(unheadInstance, {
  description: 'SEO-optimized description for search',
})
```

## Common Questions

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

`**useSeoMeta()**` provides a flat, typed API for SEO fields. `**useHead()**` accepts all supported head tags and entry options.

### Do I need both title and ogTitle?

The `**title**` sets the `**<title>**` tag. `**ogTitle**` sets `**og:title**` for social sharing. They can differ because a preview card and a browser tab have different space and context.

## See Also

- [**~~Titles Guide~~**](https://unhead.unjs.io/docs/head/guides/core-concepts/titles): Setting page titles
- [**~~useHead()~~**](https://unhead.unjs.io/docs/head/api/composables/use-head): General head management
- [**~~useHeadSafe()~~**](https://unhead.unjs.io/docs/head/api/composables/use-head-safe): Filter untrusted head input
- [**~~Infer SEO Meta Tags~~**](https://unhead.unjs.io/docs/head/guides/plugins/infer-seo-meta-tags): Generate social metadata from existing fields

[~~Edit this page~~](https://github.com/unjs/unhead/edit/main/docs/head/7.api/composables/3.use-seo-meta.md)

[~~Markdown For LLMs~~](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/7.api/composables/3.use-seo-meta.md)

**Did this page help you? **

[**useHeadSafe()** Filter untrusted head input through a restrictive tag and attribute allowlist with useHeadSafe().](https://unhead.unjs.io/docs/head/api/composables/use-head-safe) [**useScript()** Load and share third-party scripts with lifecycle callbacks, loading triggers, API resolution, and optional call proxying.](https://unhead.unjs.io/docs/head/api/composables/use-script)

**On this page **

- [Basic Usage](#basic-usage)
- [Examples](#examples)
- [How it works](#how-it-works)
- [API Reference](#api-reference)
- [Common Mistakes](#common-mistakes)
- [Common Questions](#common-questions)
- [See Also](#see-also)