Composables

useSeoMeta()

Last updated Jul 20, 2026 by Harlan Wilton in doc: clean up.

On this page

Basic Usage
Examples
How it works
API Reference
Common Mistakes
Common Questions
See Also

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

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

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

Examples

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: 'website',
  ogSiteName: 'Your Brand',

  // Twitter
  twitterCard: 'summary_large_image',
})

Dynamic Meta Tags

import { useSeoMeta } from '@unhead/vue'
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({
  title: computed(() => `${product.value.name} - Your Brand`),
  description: computed(() => product.value.description),
  ogImage: computed(() => product.value.image),
})

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 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({
  ogTitle: 'My Page',
  ogDescription: 'Description'
})

// Richer preview metadata
useSeoMeta({
  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({
  twitterCard: 'summary_large_image',
  ogImage: 'https://example.com/small-icon.png',
})

// Supply a purpose-built social image and its dimensions
useSeoMeta({
  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({
  description: 'My description',
  ogDescription: 'My description',
})

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