Enhanced Titles

Introduction

Getting your page titles right is difficult. Nuxt SEO provides several utils to make it easier: fallback titles, page meta titles, and a default title template.

You can learn more about titles and titles templates with the Page Titles guide.

Fallback Title

Ensures that every page has a title by generating one from the last slug segment.

For example, if your page is /blog/my-awesome-post, the title will be My Awesome Post.

This is useful for when you have a lot of pages and don't want to manually set a title for each one or if you simply forget to set a title.

To disable this feature:

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

I18n Integration

When @nuxtjs/i18n is installed, the fallback title will first attempt to resolve the title from your translation files using the pages.{routeName}.title key, where routeName is the Nuxt route name (the file name without extension).

export default {
  pages: {
    about: { title: 'About Us' },
    contact: { title: 'Contact' },
    index: { title: 'Home' }
  }
}

{
  "pages": {
    "about": { "title": "About Us" },
    "contact": { "title": "Contact" },
    "index": { "title": "Home" }
  }
}

If no translation is found, the module falls back to title-casing the last URL segment as before.

Error pages: on error pages (e.g. 404), the title template reverts to just '%s' with no separator or site name appended. This avoids generating titles like 404 - Page not found | My Site.

Default Title Template

By default, a title template is inserted for you in the nuxt.config.ts file.

// equivalent of what the module does
useHead({
  titleTemplate: '%s %separator %siteName',
})

This will set your titles to a template like 'Page Title | Site Name'.

You can either modify the template or the params:

• %s is the page title useHead({ title: 'My Page Title' })
• %separator see Title template params
• %siteName see Site Config.

You can disable this by Disabling Default Meta or simply overriding it.

Page Meta Title

Normally you would need to use useHead() or useSeoMeta() to set your page title.

Nuxt SEO also gives you the option to add a title using page meta instead.

<script lang="ts" setup>
import { definePageMeta } from '#imports'

// Note: does not work for dynamic pages, only accepts strings
definePageMeta({
  title: 'My Page Title'
})
</script>