---
title: "Page Titles with Unhead · Unhead"
canonical_url: "https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles"
last_updated: "2026-07-20T19:26:42.010Z"
meta:
description: "Manage page titles with useHead, title templates, reactive values, social metadata, and template params."
"og:description": "Manage page titles with useHead, title templates, reactive values, social metadata, and template params."
"og:title": "Page Titles with Unhead · Unhead"
---
Home
`
Unhead on GitHub
Switch to Solid.jsSwitch to TypeScriptSwitch to VueSwitch to ReactSwitch to SvelteSwitch to AngularSwitch to Nuxt
**Core Concepts**
# **Page Titles with Unhead**
[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/1.core-concepts/1.titles.md)
Use `**useHead({ title: 'Your Title' })**` for a title that works in both server and client rendering. Add `**titleTemplate: '%s | Site Name'**` when pages share the same suffix.
```
Mastering Titles · My App
```
## The title element
The `` tag labels the document in browser tabs and is one of several sources Google may use to generate a search-result title link.
Setting `**document.title**` directly works only in a browser:
```
// Browser-only: document is unavailable during SSR
document.title = 'Home'
```
`**document.title**` is unavailable during server-side rendering and bypasses Unhead's server output.
Google documents how page titles and other signals can influence [**~~title links in search results~~**](https://developers.google.com/search/docs/appearance/title-link).
## Dynamic Page Titles with `useHead()`
Use [`useHead()`](https://unhead.unjs.io/docs/head/api/composables/use-head) to register a title with the active head instance:
```
import { useHead } from '@unhead/solid-js'
useHead({
title: 'Home'
})
```
The entry is included in server output and kept in sync on the client. The same entry can include other head tags:
```
import { useHead } from '@unhead/solid-js'
useHead({
title: 'Home',
meta: [
{ name: 'description', content: 'Welcome to MyApp' }
]
})
```
Unhead automatically deduplicates title tags set by multiple entries. With equal priorities, the most recently registered title takes precedence.
Reactivity follows the conventions of each framework adapter; the `useHead()` input shape stays the same.
## Shared site names
Set a shared site name and separator with a title template:
```
<head>
<title>Home | MySite
```
```
import { useHead } from '@unhead/solid-js'
useHead({
title: 'Home',
titleTemplate: '%s | MySite'
})
```
The `**%s**` placeholder in a string `**titleTemplate**` is replaced with the page title. Additional [**~~template params~~**](https://unhead.unjs.io/docs/head/guides/plugins/template-params) require `**TemplateParamsPlugin**`.
### Template Params
Template params are an opt-in feature for making tags more dynamic. Register `**TemplateParamsPlugin**` when creating the head instance, then provide `**templateParams**` with your entry. The plugin supplies `**%s**`, `**%separator**`, and your custom parameters:
Input
```
import { useHead } from '@unhead/solid-js'
useHead({
title: 'Home',
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '·',
siteName: 'My Site'
}
})
```
Output
```
Home · My Site
```
Template params are processed automatically in titles, meta `**content**`, link `**href**`, and the `**lang**` HTML attribute. Other inline content requires `**processTemplateParams: true**` on the tag.
See [**~~Template Params~~**](https://unhead.unjs.io/docs/head/guides/plugins/template-params) for the complete placeholder rules.
### Resetting the Title Template
Pass `**null**` to `**titleTemplate**` to disable an inherited template for one page.
```
```
### Social Share Titles
Social platforms use different meta tags for sharing titles.
_Nuxt X Share_
The example preview uses X-specific title metadata alongside the standard [`**og:title**`](https://ogp.me/) field. Use [`useSeoMeta()`](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) to set these fields by name:
```
import { useSeoMeta } from '@unhead/solid-js'
useSeoMeta({
titleTemplate: '%s | Health Tips',
title: 'Why you should eat more broccoli',
// ogTitle is not affected by titleTemplate; use template params here if needed
ogTitle: 'Hey! Health Tips - 10 reasons to eat more broccoli.',
// Legacy X-specific override; twitterTitle is deprecated in favor of ogTitle
twitterTitle: 'Hey X! Health Tips - 10 reasons to eat more broccoli.',
})
```
The `**useSeoMeta**` input shape is the same across Vue, React, Svelte, Solid, and Angular.
## Common Use Cases
### Reactive Titles
Pass a getter to update a title when component state changes:
```
import { useHead } from '@unhead/solid-js'
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 Product Page
}
```
### Hierarchical Titles
For nested pages like documentation, show hierarchy:
```
import { useHead } from '@unhead/solid-js'
// Works in any framework
useHead({
title: 'Installation',
titleTemplate: '%s | Documentation | MyApp'
})
```
### Language-Specific Titles
For multilingual sites:
```
import { useHead } from '@unhead/solid-js'
// 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
}
})
```
## Writing useful titles
Google recommends [**~~descriptive, concise, page-specific title text~~**](https://developers.google.com/search/docs/appearance/title-link). Search results truncate titles as needed for the device, so there is no fixed character limit.
- Keep titles concise and descriptive rather than targeting a fixed character count
- Make each page title unique across your site
- Keep shared branding brief so the page-specific text remains distinct
- Ensure titles accurately describe the page content
[~~Edit this page~~](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/1.core-concepts/1.titles.md)
[~~Markdown For LLMs~~](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/1.core-concepts/1.titles.md)
**Did this page help you? **
[**Starter Recipes** Examples for SEO metadata, social previews, favicons, web app manifests, and article metadata.](https://unhead.unjs.io/docs/head/guides/get-started/starter-recipes) [**Tag Sorting & Placement** Control where head tags render with tagPosition (head, bodyOpen, bodyClose) and tagPriority for ordering. Understand the Capo.js weights applied during SSR.](https://unhead.unjs.io/docs/head/guides/core-concepts/positions)
**On this page **
- [The title element](#the-title-element)
- [Dynamic Page Titles with useHead()](#dynamic-page-titles-with-usehead)
- [Shared site names](#shared-site-names)
- [Common Use Cases](#common-use-cases)
- [Writing useful titles](#writing-useful-titles)