---
title: "How to Set Page Titles in Vue 3"
description: "Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/titles"
last_updated: "2026-07-16"
---
- Use `useHead()` instead of `document.title` for SSR compatibility
- Add a title template to append your site name consistently
- Keep titles under 60 characters: longer titles get truncated and are far more likely to be rewritten
- Set `og:title` separately for social sharing
Page titles appear in browser tabs and as the clickable headline in search results. Google keeps your `` tag as-is [around 87% of the time](https://developers.google.com/search/blog/2021/09/more-info-about-titles). Third-party studies that count any modification, including truncation and casing changes, put the figure closer to [76% of titles changed in some way](https://searchengineland.com/google-changed-76-of-title-tags-in-q1-2025-heres-what-that-means-454847), so a well-formed title is your best shot at controlling what searchers see.
```html
<head>
<title>Mastering Titles in Vue · Vue SEO
```
Setting titles in Vue 3 requires a head manager like [Unhead](https://unhead.unjs.io/) since `document.title` won't work during server-side rendering.
## Quick Reference
```vue
```
```vue
```
```vue
```
## 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.
Using `document.title` in a Vue SPA means search engines may index your pages with missing or incorrect titles. Always use a head manager like Unhead for SEO-critical metadata.
Use [Unhead](https://unhead.unjs.io/) instead. It handles both SSR and client-side updates. 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/docs/head/api/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. Pass the reactive reference directly; don't destructure it with `.value`.
```vue [Bad]
```
```vue [Good]
```
Computed getter syntax works for derived titles:
```vue
```
### SSR and SEO
Fetch data before render, not in `onMounted()`. Client-only fetches mean search engines see your loading state:
```vue
```
Use SSR-compatible data fetching (Vue's `onServerPrefetch()` or framework solutions like Nuxt's `useFetch()`).
## 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/docs/head/guides/core-concepts/titles):
```vue [input.vue]twoslash
```
```html [output.html]
Home | MySite
```
The `%s` token gets replaced with your page title (or empty string if none set).
Override the template for specific pages by passing `null`:
```vue [input.vue]
```
```html [output.html]
Home
```
## Template Params
For dynamic site names or separators, register the [Template Params plugin](https://unhead.unjs.io/docs/head/guides/plugins/template-params) when creating your head instance:
```ts
import { createHead } from '@unhead/vue/client'
import { TemplateParamsPlugin } from '@unhead/vue/plugins'
const head = createHead({
plugins: [TemplateParamsPlugin()]
})
```
Then use custom params:
```vue [input.vue]twoslash
```
```html [output.html]
Home · MySite
```
Common separators: `|` `-` `.` `•` `·`
Template params work in meta tags too:
```vue
```
## Social Share Titles
Social platforms use `og:title` and `twitter:title` meta tags. Use [`useSeoMeta()`](https://unhead.unjs.io/docs/head/api/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.
## Titles for AI Search
AI answer engines categorize pages by intent before deciding what to cite. A vague title like "Meta Tags" gives them nothing to work with; "How to Set Meta Tags in Vue 3" signals a tutorial, "Vue 3 Meta Tag API Reference" signals documentation. Say what the page is in the title.
## Title Length
Google truncates titles at roughly 600px of display width, which works out to 50-60 characters depending on the letters used. The cutoff is pixel-based, so two titles of identical length can truncate differently.
Length also affects rewrites. [Zyppy's study of 80,000+ titles](https://zyppy.com/seo/google-title-rewrite-study/) found the 51-60 character range had the lowest rewrite rates (39-42%), while titles over 70 characters were rewritten every time. A [2025 follow-up study](https://searchengineland.com/google-changed-76-of-title-tags-in-q1-2025-heres-what-that-means-454847) found titles Google left unchanged averaged 44 characters.
Longer titles still get indexed; Google only truncates the display. Front-load important keywords since users may only see the first 50 characters.
## Vue Router Integration
Set titles from route meta for centralized title management:
```ts
// router.ts
const routes = [
{ path: '/', component: Home, meta: { title: 'Home' } },
{ path: '/about', component: About, meta: { title: 'About Us' } },
{ path: '/blog/:slug', component: BlogPost, meta: { title: 'Blog' } }
]
```
Use a navigation guard to apply titles on route change:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
const title = to.meta.title as string
if (title) {
useHead({ title })
}
})
```
For dynamic routes, override in the component:
```vue
```
Set a global title template in your guard:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
useHead({
title: to.meta.title as string || 'MySite',
titleTemplate: '%s | MySite'
})
})
```
Handle nested routes by walking matched routes:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
// Find deepest route with a title
const title = to.matched.toReversed()
.find(r => r.meta.title)
?.meta
.title as string
if (title)
useHead({ title })
})
```
Using Nuxt? Check out [Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) which handles much of this automatically. [Learn more about Page Titles in Nuxt →](/learn-seo/nuxt/mastering-meta/titles)
## Checklist
- Use `useHead()` or `useSeoMeta()` instead of `document.title`
- Set up a title template with your site name
- Keep titles under 60 characters
- Set `og:title` for social sharing
- Fetch data server-side for dynamic titles
- Test titles render correctly in SSR