I18n & Localization

Last updated Jul 16, 2026Harlan Wilton

How is Locale Used?

Nuxt SEO Utils automatically sets locale-based attributes and meta tags for your site:

<html lang="..."> - Current locale based on your configuration
og:locale - OpenGraph locale (e.g., en_US, ja_JP)
Schema.org inLanguage - For WebSite, WebPage, and other structured data (when using Nuxt Schema.org)
useBreadcrumbItems() - Automatically handles locale-prefixed routes and translates labels via i18n keys (breadcrumb.items.{routeName}.label)
Fallback page titles - Automatically resolves titles from i18n translations using pages.{routeName}.title keys

og:locale requires a locale format with underscore (e.g., en_US). If your locale is just "en", the module won't set og:locale automatically. When @nuxtjs/i18n is configured with SEO head enabled, it handles og:locale directly and takes priority.

How Locale is Determined

When automaticDefaults is enabled (default), the module sets the lang attribute using this priority:

@nuxtjs/i18n or nuxt-i18n-micro module - Automatically detected and integrated
Site Config currentLocale - Dynamic locale from useSiteConfig()
Site Config defaultLocale - Static default from nuxt.config.ts
Fallback - Defaults to "en"

The locale is set with low priority, allowing you to override it manually if needed.

Setting up Nuxt SEO Utils for I18n

If you're building a multilingual site, install @nuxtjs/i18n.

For single language sites without @nuxtjs/i18n, set the locale via Site Config:

export default defineNuxtConfig({
  site: {
    defaultLocale: 'ja-JP'
  }
})

Set your locale as specific as possible using BCP 47 format (hyphen-separated). Instead of en, use en-US, en-AU, or whatever is appropriate for your site. The module automatically converts this to underscore format (en_US) for og:locale.

Dynamic Locale Changes

If you need to change the locale dynamically without using the I18n module, use updateSiteConfig():

<script setup>
updateSiteConfig({
  currentLocale: 'ja-JP'
})
</script>

Manual Control

To manually control all locale settings, disable automatic defaults:

export default defineNuxtConfig({
  seo: {
    automaticDefaults: false
  }
})

Then set everything manually:

app.vue

useHead({
  htmlAttrs: { lang: 'ja-JP' }
})

useSeoMeta({
  ogLocale: 'ja_JP'
})

Was this page helpful?

Edit page Report an issue

Enhanced Titles

Best Practice Default Meta

Nuxt Site Config

On this page