Skip to content

Commit

Permalink
doc: improve title template docs
Browse files Browse the repository at this point in the history
  • Loading branch information
harlan-zw committed Dec 10, 2024
1 parent 61ef2b7 commit 6577769
Showing 1 changed file with 37 additions and 22 deletions.
59 changes: 37 additions & 22 deletions docs/content/2.guides/2.fallback-title.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,16 @@ description: How Nuxt SEO enhances your page titles.

## Introduction

Getting your page titles right is difficult. Nuxt SEO helps you by providing a fallback title and a default title template.
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.

Learn more about title templates with the [Page Titles](https://nuxtseo.com/learn/mastering-meta/titles) guide.

## Page Meta Title

Normally you would need to use `useHead()`{lang="ts"} or `useSeoMeta()`{lang="ts"} to set your page title.

Nuxt SEO also gives you the option to add a title using [page meta](https://nuxt.com/docs/api/utils/define-page-meta) instead.

```vue twoslash [pages/index.vue]
<script lang="ts" setup>
import { definePageMeta } from '#imports'
// Note: does not work for dynamic pages, only accepts strings
definePageMeta({
title: 'My Page Title'
})
</script>
```
You can learn more about titles and titles templates with the [Page Titles](https://nuxtseo.com/learn/mastering-meta/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`.
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.
Expand All @@ -47,6 +31,37 @@ export default defineNuxtConfig({

## Default Title Template

Sets a default title template for you with your [site name](/docs/site-config/guides/setting-site-config).
By default, a title template is inserted for you in the `nuxt.config.ts`{lang="ts"} file.

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

See the [Title Templates](/docs/nuxt-seo/guides/title-templates) guide for more information.
This will set your titles to a template like `'Page Title | Site Name'`{lang="ts"}.

You can either modify the template or the params:
- `%s`{lang="ts"} is the page title `useHead({ title: 'My Page Title' })`{lang="ts"}
- `%seperator`{lang="ts"} see [Title template params](https://nuxtseo.com/learn/mastering-meta/titles#template-params)
- `%siteName`{lang="ts"} see [Site Config](/docs/site-config/guides/setting-site-config).

You can disable this by [Disabling Default Meta](/docs/seo-utils/guides/default-meta#disable-default-meta) or simply overriding it.

## Page Meta Title

Normally you would need to use `useHead()`{lang="ts"} or `useSeoMeta()`{lang="ts"} to set your page title.

Nuxt SEO also gives you the option to add a title using [page meta](https://nuxt.com/docs/api/utils/define-page-meta) instead.

```vue twoslash [pages/index.vue]
<script lang="ts" setup>
import { definePageMeta } from '#imports'
// Note: does not work for dynamic pages, only accepts strings
definePageMeta({
title: 'My Page Title'
})
</script>
```

0 comments on commit 6577769

Please sign in to comment.