---
title: "Template Params Plugin · Unhead"
canonical_url: "https://unhead.unjs.io/docs/typescript/head/guides/plugins/template-params"
last_updated: "2026-07-21T08:17:59.080Z"
meta:
description: "Dynamic placeholders like Template Params Plugin and Unhead in head tags. Define site name, separator, and custom variables for consistent branding."
"og:description": "Dynamic placeholders like Template Params Plugin and Unhead in head tags. Define site name, separator, and custom variables for consistent branding."
"og:title": "Template Params Plugin · Unhead"
---
Home
`
Unhead on GitHub
Switch to TypeScriptSwitch to VueSwitch to ReactSwitch to SvelteSwitch to Solid.jsSwitch to AngularSwitch to Nuxt
**Plugins**
# **Template Params Plugin**
[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/plugins/6.template-params.md)
Template params replace placeholders such as `**%s**` and `**%siteName**` during tag resolution. Configure them with `**templateParams: { siteName: 'My Site', separator: '·' }**` in `**useHead()**`.
## Template params
The Template Params plugin replaces named placeholders across titles and tag properties during head resolution.
## Setup
Add the plugin to your Unhead configuration:
Input
```
import { createHead } from 'unhead/client'
import { TemplateParamsPlugin } from 'unhead/plugins'
const head = createHead({
plugins: [
TemplateParamsPlugin
]
})
```
## Built-in params
Unhead includes these built-in template params:
| **Token** | **Description** |
| --- | --- |
| `**%s**` | The current page title |
| `**%pageTitle**` | Alias for the current page title |
| `**%separator**` | Smart separator (defaults to \|) |
`**%separator**` appears only between non-empty content. It removes itself when:
- The title is empty
- Multiple separators would appear next to each other
Input
```
useHead(unheadInstance, {
title: 'Home',
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '—', // Use an em dash instead of |
siteName: 'MySite'
}
})
```
Output
```
Home — MySite
```
## Separators
Choose a separator that matches the site's title style:
Input
```
// Choose a more readable separator
useHead(unheadInstance, {
templateParams: {
separator: '—' // Em dash
// Other options: '-' (hyphen), '•' (bullet), '·' (middot), '❤️' (heart)
}
})
```
## Meta tags
Template params also work with [**~~SEO meta tags~~**](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) and social metadata:
Input
```
useHead(unheadInstance, {
templateParams: {
siteName: 'MyApp',
separator: '·'
},
title: 'Home',
meta: [
{ name: 'description', content: 'Read the latest updates from %siteName' },
{ property: 'og:title', content: 'Home %separator %siteName' },
{ property: 'og:description', content: 'Check out %siteName today!' }
]
})
```
Output
```
Home · MyApp
```
## Scripts and other inline content
### Enable for Script and Other Tags
For tags using `**innerHTML**` or `**textContent**`, add `**processTemplateParams: true**`:
Input
```
useHead(unheadInstance, {
templateParams: { name: 'My App' },
script: [
{
innerHTML: { name: '%name' },
type: 'application/json',
processTemplateParams: true
}
]
})
```
Output
```
```
### Disabling template processing
Add `**processTemplateParams: false**` to skip template processing:
Input
```
useHead(unheadInstance, {
title: 'Hello %name',
templateParams: { name: 'World' },
}, {
processTemplateParams: false,
})
```
Output
```
Hello %name
```
## Shared and nested values
### Shared brand values
Define shared brand values once, then reference them from page entries:
Input
```
// In your site setup
const head = createHead({
plugins: [
TemplateParamsPlugin
]
})
// Define global template params
head.push({
templateParams: {
brand: 'ProductName™',
tagline: 'Release notes and migration guides',
separator: '—'
}
})
// In page components
useHead(unheadInstance, {
title: 'Features',
titleTemplate: '%s %separator %brand',
meta: [
{ name: 'description', content: '%brand: %tagline' }
]
})
```
### Nested objects
Use nested objects for more structured data:
Input
```
useHead(unheadInstance, {
templateParams: {
site: {
name: 'My Site',
url: 'https://example.com',
},
separator: '·',
subPage: null
},
title: 'My Page',
titleTemplate: '%s %separator %subPage %separator %site.name',
meta: [
{
name: 'description',
content: 'Welcome to %site.name.',
},
{
property: 'og:site_name',
content: '%site.name',
},
{
property: 'og:url',
content: '%site.url/my-page',
},
],
})
```
Output
```
My Page · My Site
```
## Related
- [**~~Canonical Plugin~~**](https://unhead.unjs.io/docs/head/guides/plugins/canonical): Normalize absolute URLs
- [**~~Infer SEO Meta~~**](https://unhead.unjs.io/docs/head/guides/plugins/infer-seo-meta-tags): Generate social metadata
[~~Edit this page~~](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/plugins/6.template-params.md)
[~~Markdown For LLMs~~](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/plugins/6.template-params.md)
**Did this page help you? **
[**ESLint Plugin** Catch unhead misuse, type-narrowing gaps, and v2-to-v3 migration problems at the source level. Pairs with the runtime ValidatePlugin and the unhead CLI.](https://unhead.unjs.io/docs/head/guides/eslint-plugin) [**Alias Sorting** Order head tags with before: and after: prefixes. More readable than numeric priorities for script loading and CSS dependencies.](https://unhead.unjs.io/docs/head/guides/plugins/alias-sorting)
**On this page **
- [Template params](#template-params)
- [Setup](#setup)
- [Built-in params](#built-in-params)
- [Separators](#separators)
- [Meta tags](#meta-tags)
- [Scripts and other inline content](#scripts-and-other-inline-content)
- [Shared and nested values](#shared-and-nested-values)
- [Related](#related)