Enhanced Titles

Introduction

Getting your page titles right is difficult. Nuxt SEO provides several utils to make it easier: fallback titles, page meta titles 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'{lang="ts'}, the title will be 'My Awesome Post'{lang="ts'}.

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

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' })
• %seperator 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>