Nuxt Config SEO Meta

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.

Available Properties

For a complete list of all available SEO meta properties, see the Nuxt useSeoMeta() documentation.

Common properties include:

Basic SEO:

• title - Page title
• description - Page description
• keywords - Page keywords
• author - Content author
• robots - Robot crawling instructions
• canonical - Canonical URL (set to false to disable)

Open Graph (Facebook/Social):

• ogTitle - Open Graph title
• ogDescription - Open Graph description
• ogImage - Open Graph image URL
• ogUrl - Open Graph URL
• ogType - Open Graph type (e.g., 'website', 'article')
• ogSiteName - Site name
• ogLocale - Locale (e.g., 'en_US')

Twitter Card:

• twitterCard - Twitter card type (e.g., 'summary_large_image')
• twitterSite - Twitter site handle
• twitterCreator - Twitter creator handle
• twitterTitle - Twitter title
• twitterDescription - Twitter description
• twitterImage - Twitter image URL

App & Mobile:

• applicationName - Application name
• themeColor - Theme color (can be array with media queries)
• colorScheme - Color scheme support (e.g., 'dark light')
• viewport - Viewport settings

Advanced:

• fallbackTitle - Fallback title when page title is not set

Usage

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

export default defineNuxtConfig({
  seo: {
    meta: {
      // Basic SEO
      description: 'My awesome website',
      author: 'Harlan Wilton',
      fallbackTitle: 'My Awesome Site', // Used when page doesn't set a title

      // Theme & Color
      themeColor: [
        { content: '#18181b', media: '(prefers-color-scheme: dark)' },
        { content: 'white', media: '(prefers-color-scheme: light)' },
      ],
      colorScheme: 'dark light',

      // Social Media
      twitterCreator: '@mytwitter',
      twitterSite: '@mysite',

      // App Info
      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 handle 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.