---
title: Page Titles with Unhead
description: Learn how to master page titles using useHead, title templates, and SEO best practices. Includes reactive titles, social sharing, and template params.
navigation:
title: 'Titles & Title Templates'
publishedAt: 2024-10-24
updatedAt: 2024-11-03
readTime: 8 mins
---
## Introduction
Page titles are crucial for SEO. They're your primary call-to-action in search results and help users understand your page's content and context.
```html
<head>
<title>Mastering Titles · My App</title>
</head>
```
::tip
Page titles are often the first impression users have of your site in search results. Well-crafted titles can significantly improve click-through rates.
::
While setting page titles with Unhead is straightforward, certain scenarios can be tricky. Let's start with the essential patterns you should follow.
## Understanding the Title Tags
The `<title>`{lang="html"} tag displays text in browser tabs and typically appears as your page's heading in search engine results (SERPs).
When working with JavaScript frameworks, you might be tempted to set titles directly:
```ts
// ❌ Careful! This won't work in SSR
document.title = 'Home'
```
::warning
This approach has two major issues:
- It breaks during Server-Side Rendering (SSR)
- Search engines may not properly index your titles
::
::note
New to SEO titles? Check out Google's guide on [Influencing your title links in search results](https://developers.google.com/search/docs/appearance/title-link).
::
## Core Concepts
Unhead provides a simple yet powerful API for managing page titles across different rendering contexts (SSR and CSR) that works with any JavaScript framework.
## Dynamic Page Titles with `useHead()`{lang="ts"}
Now that we understand why direct title manipulation won't work, let's use Unhead's [`useHead()`{lang="ts"}](/) composable to set titles properly:
::code-group
```ts [Framework Agnostic]
import { useHead } from '@unhead/dynamic-import'
useHead({
title: 'Home'
})
```
```html [output.html]
<head>
<title>Home</title>
</head>
```
::
This single line creates an SSR-friendly title that search engines can read. The composable handles all the complexity of managing your document head in both client and server environments.
You can use this in any component and set any `<head>`{lang="html"} tag you like.
```ts
import { useHead } from '@unhead/dynamic-import'
useHead({
title: 'Home',
meta: [
{ name: 'description', content: 'Welcome to MyApp' }
]
})
```
::tip
Unhead will automatically dedupe title tags if you set them in multiple components. The last one to render will take precedence.
::
::note
The `useHead()`{lang="ts"} API works the same way across all supported frameworks (Vue, React, Svelte, Solid, and Angular). The only difference is how reactivity is handled in each framework.
::
## Setting Up Title Templates
You may notice that most people set up their titles with a site name and a separator, this is seen as a best practice as it
can help with brand recognition and SEO.
```html
<head>
<title>Home | MySite</title>
</head>
```
Creating your own title like this is simple using `useHead()`{lang="ts"} with a title template.
::code-group
```ts [Framework Agnostic]
import { useHead } from '@unhead/dynamic-import'
useHead({
title: 'Home',
titleTemplate: '%s | MySite'
})
```
```html [output.html]
<head>
<title>Home | MySite</title>
</head>
```
::
[Template params](/usage/guides/template-params) like `%s` act as placeholders that get replaced with your page title and separator.
### Template Params
Template params are an opt-in plugin make your tags more dynamic. You get `%s` and `%separator` built-in, and can add your own:
::code-block
```ts [Input]
import { useHead } from '@unhead/dynamic-import'
useHead({
title: 'Home',
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '·',
siteName: 'My Site'
}
})
```
```html [Output]
<title>Home · My Site</title>
```
::
::note
Template params work with all head tags, not just titles. This makes them powerful for reusing branded elements across your site.
::
Check out the [Template Params](/usage/guides/template-params) guide to get started.
### Resetting the Title Template
If you need to reset the title template for a specific page, you can pass `null` to the `titleTemplate` option.
::code-group
```vue [input.vue]
<script lang="ts" setup>
import { useHead } from '@unhead/dynamic-import'
useHead({
title: 'Home',
titleTemplate: null
})
</script>
```
```html [output.html]
<head>
<title>Home</title>
</head>
```
::
::caution
Resetting the title template will remove any branding elements from your page title. Only do this for specific pages like the homepage where the full branding isn't needed.
::
### Social Share Titles
Social platforms use different meta tags for sharing titles.
:FigureImage{src="/nuxt-x-share.png" alt="Nuxt X Share" lazy="true"}
In the above we can see the title "Nuxt: The Intuitive Vue Framework".
This title is set using the `twitter:title` meta tag and will fall back to the `og:title` meta tag if not set.
Remembering how to use the meta tags can be annoying, so we can use the [`useSeoMeta()`{lang="ts"}](/usage/composables/use-seo-meta) composable to set these up.
::code-group
```ts [Framework Agnostic]
import { useSeoMeta } from '@unhead/dynamic-import'
useSeoMeta({
titleTemplate: '%s | Health Tips',
title: 'Why you should eat more broccoli',
// og title is not effected by titleTemplate, we can use template params here if we need
ogTitle: 'Hey! Health Tips - 10 reasons to eat more broccoli.',
// explicit twitter title is only needed when we want to display something just for X
twitterTitle: 'Hey X! Health Tips - 10 reasons to eat more broccoli.',
})
```
```html [output.html]
<head>
<title>Why you should eat more broccoli | Health Tips</title>
<meta property="og:title" content="Health Tips: 10 reasons to eat more broccoli." />
<meta name="twitter:title" content="Hey X! Health Tips - 10 reasons to eat more broccoli." />
</head>
```
::
::tip
The `useSeoMeta` API is identical across all supported frameworks - Vue, React, Svelte, Solid, and Angular.
::
## Common Use Cases
Here are some practical examples for handling page titles in different scenarios.
### Reactive Titles
Titles can be reactive, updating when your component data changes. Here's how this works in different frameworks:
::code-group
```ts [Vue]
import { useHead } from '@unhead/dynamic-import'
import { ref } from 'vue'
const productName = ref('Widget X')
const isLoading = ref(true)
useHead({
title: () => isLoading.value
? 'Loading...'
: `Product: ${productName.value}`
})
```
```tsx [React]
import { useHead } from '@unhead/dynamic-import'
import { useState } from 'react'
function ProductPage() {
const [productName, setProductName] = useState('Widget X')
const [isLoading, setIsLoading] = useState(true)
useHead({
title: () => isLoading
? 'Loading...'
: `Product: ${productName}`
})
return <div>Product Page</div>
}
```
```tsx [Solid]
import { useHead } from '@unhead/dynamic-import'
import { createSignal } from 'solid-js'
function ProductPage() {
const [productName, setProductName] = createSignal('Widget X')
const [isLoading, setIsLoading] = createSignal(true)
useHead({
title: () => isLoading()
? 'Loading...'
: `Product: ${productName()}`
})
return <div>Product Page</div>
}
```
::
### Hierarchical Titles
For nested pages like documentation, show hierarchy:
```ts
import { useHead } from '@unhead/dynamic-import'
// Works in any framework
useHead({
title: 'Installation',
titleTemplate: '%s | Documentation | MyApp'
})
```
### Language-Specific Titles
For multilingual sites:
::code-group
```ts [Framework Agnostic]
import { useHead } from '@unhead/dynamic-import'
// In a real app, you'd get this from your i18n library
const locale = 'en'
const titles = {
en: 'Welcome',
fr: 'Bienvenue',
es: 'Bienvenido'
}
useHead({
title: titles[locale] || titles.en,
htmlAttrs: {
lang: locale
}
})
```
```tsx [React Example]
import { useHead } from '@unhead/dynamic-import'
import { useTranslation } from 'react-i18n' // Example i18n library
function HomePage() {
const { t, i18n } = useTranslation()
useHead({
title: t('home.title'),
htmlAttrs: {
lang: i18n.language
}
})
return <div>Home Page</div>
}
```
::
## Best Practices
::tip
- Keep titles under 60 characters to avoid truncation in search results
- Put important keywords at the beginning of the title
- Make each page title unique across your site
- Use title templates for consistent branding
- Ensure titles accurately describe the page content
::