---
title: "Page Titles in Nuxt"
description: "Set dynamic page titles in Nuxt with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly."
canonical_url: "https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles"
last_updated: "2026-01-04"
---
- Use `useHead()` or `useSeoMeta()` for titles. `document.title` breaks SSR
- Title templates append site name with `%s | MySite` pattern
- Keep under 60 characters. Google truncates and rewrites 61-76% of titles
Page titles appear in browser tabs and as the clickable headline in search results. Google uses your `` tag [over 80% of the time](https://developers.google.com/search/docs/appearance/title-link) when generating title links. though [studies show](https://zyppy.com/seo/title-tags/google-title-rewrite-study/) it rewrites 61-76% of titles to some degree.
```html
<head>
<title>Mastering Titles in Nuxt · Nuxt SEO
```
Page titles work by default in Nuxt. Use `useSeoMeta()` or `useHead()` in any component.
## Quick Reference
```ts
// Basic title
useHead({ title: 'Home' })
// With template (adds site name)
useHead({
title: 'Home',
titleTemplate: '%s | MySite'
})
// Reactive title from data
const post = ref({ title: 'Loading...' })
useHead({
title: () => post.value.title
})
// SEO-focused (includes og:title)
useSeoMeta({
title: 'Home',
ogTitle: 'Home | MySite'
})
```
## Why Not `document.title`?
You might try setting titles directly:
```ts
// ❌ Breaks SSR, may not be indexed
document.title = 'Home'
```
This fails during server-side rendering. the title won't exist in the initial HTML response. Search engines render JavaScript but [may not wait](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) for client-side updates.
Nuxt includes [Unhead](https://unhead.unjs.io/) which handles both SSR and client-side updates automatically. For Google's official guidance, see [Influencing your title links](https://developers.google.com/search/docs/appearance/title-link).
## Setting Titles with `useHead()`
The [`useHead()`](https://unhead.unjs.io/usage/composables/use-head) composable sets titles that work in SSR and client-side navigation:
```vue [input.vue]twoslash
```
```html [output.html]
Home
```
Works in any component. You can set other head tags in the same call:
```vue
```
### Reactive Titles
Unhead accepts refs, reactive objects, and computed values. Don't destructure. pass the reactive reference:
```tstwoslash
useHead({
title: myTitle.value // ❌ Loses reactivity
})
useHead({
title: myTitle // ✅ Stays reactive
})
```
Computed getter syntax works for derived titles:
```ts
const post = ref({ title: 'Loading...' })
useHead({
title: () => post.value.title // Updates when post changes
})
```
### SSR and SEO
Fetch data during SSR with `useFetch()` or `useAsyncData()`. Client-only fetches mean search engines see your loading state:
```vue
```
Use Nuxt's data fetching composables instead:
```vue
```
## Title Templates
Most sites append a site name to titles for brand recognition. [Google recommends](https://developers.google.com/search/docs/appearance/title-link#page-titles) adding your site name with a delimiter:
```html
Home | MySite
```
Use `titleTemplate` with a [title template](https://unhead.unjs.io/usage/guides/title-template):
```vue [input.vue]twoslash
```
```html [output.html]
Home | MySite
```
The `%s` token gets replaced with your page title (or empty string if none set).
### Disabling the Template
Override the template for specific pages by passing `null`:
```vue [input.vue]
```
```html [output.html]
Home
```
## Template Params
Set template params globally in `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
app: {
head: {
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '·',
siteName: 'MySite'
}
}
}
})
```
```html [output.html]
Home · MySite
```
Common separators: `|` `-` `.` `•` `·`
Template params work in meta tags too:
```ts
useHead({
templateParams: { siteName: 'MyApp' },
title: 'Home',
meta: [
{ name: 'description', content: 'Welcome to %siteName' },
{ property: 'og:title', content: 'Home | %siteName' }
]
})
```
## Social Share Titles
Social platforms use `og:title` and `twitter:title` meta tags. Use [`useSeoMeta()`](https://unhead.unjs.io/usage/composables/use-seo-meta) to set these:
```vue [input.vue]
```
```html [output.html]
Why you should eat more broccoli | Health Tips
```
Twitter/X falls back to `og:title` if `twitter:title` isn't set.
## Title Length
Google displays roughly 50-60 characters before truncating. [Studies show](https://zyppy.com/title-tags/meta-title-tag-length/) titles between 51-60 characters have the lowest rewrite rates (39-42%).
Longer titles still get indexed. Google truncates the display. Front-load important keywords since users may only see the first 50 characters.
## Nuxt SEO Module
The Nuxt SEO module handles title defaults, social sharing, and more:
### Fallback Titles
Routes like `/about-us` automatically get "About Us" as the fallback title if no title is set. Read more in the [Enhanced Title](/docs/seo-utils/guides/fallback-title) guide.
### Automatic Social Share Titles
The module automatically sets `og:title` based on your page title (ignoring the title template):
```vue [input.vue]
```
```html [output.html]
Home | Health Tips
```