useSeoMeta()

On this page

Basic Usage
Common Use Cases
useServerSeoMeta
How it works
API Reference
Best Practices
Super-charged SEO

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

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

Common Use Cases

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: '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

import { useSeoMeta } from 'unhead'
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(unheadInstance, {
  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.

import { useServerSeoMeta } from 'unhead'

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

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

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