useSeoMeta() · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/vue/releases/v3)

Vue

- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/api/composables/use-seo-meta)
- [Switch to React](https://unhead.unjs.io/docs/react/head/api/composables/use-seo-meta)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/api/composables/use-seo-meta)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-seo-meta)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/api/composables/use-seo-meta)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/api/composables/use-seo-meta)

v3 (stable)

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/vue/head/api/get-started/overview)
- Composables
  - [`useHead()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-head)
  - [`useHeadSafe()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe)
  - [`useSeoMeta()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta)
  - [`useScript()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-script)
- Hooks
  - [entries:updated](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-updated)
  - [entries:resolve](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-resolve)
  - [entries:normalize](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-normalize)
  - [tag:normalise](https://unhead.unjs.io/docs/vue/head/api/hooks/tag-normalise)
  - [tags:beforeResolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-before-resolve)
  - [tags:resolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-resolve)
  - [tags:afterResolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-after-resolve)
  - [dom:beforeRender](https://unhead.unjs.io/docs/vue/head/api/hooks/dom-before-render)
  - [ssr:beforeRender](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-before-render)
  - [ssr:render](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-render)
  - [ssr:rendered](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-rendered)
  - [script:updated](https://unhead.unjs.io/docs/vue/head/api/hooks/script-updated)
- [Plugins](https://unhead.unjs.io/docs/head/api/plugins)

Composables

# useSeoMeta()

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

Last updated Apr 9, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [refactor(bundler)!: named Unhead export, ctx-based transforms, dev-mode validate (#733)](https://github.com/unjs/unhead/pull/733).

On this page

- [Basic Usage](#basic-usage)
- [Common Use Cases](#common-use-cases)
- [How it works](#how-it-works)
- [API Reference](#api-reference)
- [Best Practices](#best-practices)
- [Super-charged SEO](#super-charged-seo)
- [Common Mistakes](#common-mistakes)
- [Common Questions](#common-questions)
- [See Also](#see-also)

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

**Quick Start:**

```
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](#basic-usage)

```
import { useSeoMeta } from '@unhead/vue'

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](#common-use-cases)

### [Complete SEO Setup](#complete-seo-setup)

```
import { useSeoMeta } from '@unhead/vue'

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](#dynamic-meta-tags)

Vue

React

Solid.js

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

## [How it works](#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](#api-reference)

### [Input](#input)

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

### [Return Value](#return-value)

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

## [Best Practices](#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](#super-charged-seo)

Use it with the [Infer SEO Meta Tags](https://unhead.unjs.io/docs/head/guides/plugins/infer-seo-meta-tags) guide to super-charge your app's SEO with minimal effort.

## [Common Mistakes](#common-mistakes)

### [Forgetting essential OG tags](#forgetting-essential-og-tags)

```
// ❌ 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](#using-wrong-image-dimensions)

```
// ❌ 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](#duplicating-content-unnecessarily)

```
// ❌ 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](#common-questions)

### [What's the difference between useSeoMeta and useHead?](#whats-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?](#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](#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) - Safe head management with XSS protection

[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() Safely manage head tags with XSS protection using useHeadSafe(). Sanitize untrusted user input for titles, meta tags, and other head elements.](https://unhead.unjs.io/docs/head/api/composables/use-head-safe) [useScript() Load third-party scripts with useScript(). Smart defaults for performance, lazy loading triggers, and API proxying for analytics and widgets.](https://unhead.unjs.io/docs/head/api/composables/use-script)

On this page

- [Basic Usage](#basic-usage)
- [Common Use Cases](#common-use-cases)
- [How it works](#how-it-works)
- [API Reference](#api-reference)
- [Best Practices](#best-practices)
- [Super-charged SEO](#super-charged-seo)
- [Common Mistakes](#common-mistakes)
- [Common Questions](#common-questions)
- [See Also](#see-also)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)