Guides

Introduction

The useSeoMeta() composable is a powerful tool for managing SEO meta tags.

Nuxt SEO Utils allows you to provide the useSeoMeta() input within your nuxt.config.

Usage

To use it, simply add within the seo.meta config of your nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  seo: {
    meta: {
      description: 'My awesome website',
      themeColor: [
        { content: '#18181b', media: '(prefers-color-scheme: dark)' },
        { content: 'white', media: '(prefers-color-scheme: light)' },
      ],
      twitterCreator: '@mytwitter',
      twitterSite: '@mysite',
      author: 'Harlan Wilton',
      colorScheme: 'dark light',
      applicationName: 'My App',

      // Nuxt SEO Utils already sets the below tags for you
      ogSiteName: 'My Site Name',
      ogLocale: 'en_US',
      ogType: 'website',
      ogUrl: 'https://example.com',
      ogTitle: 'My Site',

      // Other Nuxt SEO modules handles these
      ogImage: 'https://example.com/my-og-image.png',
      robots: 'index, follow',
    }
  },
})

The functionality is the same as the composable without reactivity. It has a higher priority than app.head.

Edit this page
Markdown For LLMs
Did this page help you?

Enhanced Titles

How Nuxt SEO enhances your page titles.

SEO Route Rules

Utilise route rules for dynamic SEO meta tags.