---
title: "Template Params Plugin"
description: "Dynamic placeholders like %s and %siteName in head tags. Define site name, separator, and custom variables for consistent branding."
navigation.title: "Template Params"
---
**Quick Answer:** Template params let you use placeholders like `%s` and `%siteName` in your head tags. Configure them with `templateParams: { siteName: 'My Site', separator: '·' }` in `useHead()`.
## What Are Template Params?
The Template Params plugin lets you define variables that can be used across your meta tags. While you could use functions for dynamic content, template params work better with SSR and avoid hydration issues.
## How Do I Set Up Template Params?
Add the plugin to your Unhead configuration:
::code-block
```ts [Input]
import { createHead } from 'unhead'
import { TemplateParamsPlugin } from 'unhead/plugins'
const head = createHead({
plugins: [
TemplateParamsPlugin()
]
})
```
::
## What Built-in Params Are Available?
Unhead includes two built-in template params:
| Token | Description |
|--------------|-------------------------------------------------|
| `%s` | The current page title |
| `%separator` | Smart separator (defaults to \|) |
The `%separator` is intelligent - it only appears between content and removes itself when:
- The title is empty
- Multiple separators would appear next to each other
::code-block
```ts [Input]
useHead({
title: 'Home',
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '—', // Use an em dash instead of |
siteName: 'MySite'
}
})
```
```html [Output]
Home — MySite
```
::
## Which Separator Should I Use?
For better readability, consider these separator alternatives:
::code-block
```ts [Input]
// Choose a more readable separator
useHead({
templateParams: {
separator: '—' // Em dash
// Other options: '-' (hyphen), '•' (bullet), '·' (middot), '❤️' (heart)
}
})
```
::
## How Do Template Params Work with Meta Tags?
Template params work seamlessly with [SEO meta tags](/docs/head/api/composables/use-seo-meta) and social sharing:
::code-block
```ts [Input]
useHead({
templateParams: {
siteName: 'MyApp',
separator: '·'
},
title: 'Home',
meta: [
{ name: 'description', content: 'Welcome to %siteName - where we make awesome happen' },
{ property: 'og:title', content: 'Home %separator %siteName' },
{ property: 'og:description', content: 'Check out %siteName today!' }
]
})
```
```html [Output]
Home · MyApp
```
::
## How Do I Use Template Params in Scripts?
### Enable for Script and Other Tags
For tags using `innerHTML` or `textContent`, add `processTemplateParams: true`:
::code-block
```ts [Input]
useHead({
templateParams: { name: 'My App' },
script: [
{
innerHTML: { name: '%name' },
type: 'application/json',
processTemplateParams: true
}
]
})
```
```html [Output]
```
::
### How Do I Disable Template Processing?
Add `processTemplateParams: false` to skip template processing:
::code-block
```ts [Input]
useHead({
title: 'Hello %name',
templateParams: { name: 'World' },
}, {
processTemplateParams: false,
})
```
```html [Output]
Hello %name
```
::
## Common Use Cases
### How Do I Maintain Brand Consistency?
Maintain consistent branding across your site:
::code-block
```ts [Input]
// In your site setup
const head = createHead({
plugins: [
TemplateParamsPlugin()
]
})
// Define global template params
head.push({
templateParams: {
brand: 'ProductName™',
tagline: 'The best solution for your needs',
separator: '—'
}
})
// In page components
useHead({
title: 'Features',
titleTemplate: '%s %separator %brand',
meta: [
{ name: 'description', content: '%brand: %tagline' }
]
})
```
::
### Can I Use Nested Objects in Template Params?
Use nested objects for more structured data:
::code-block
```ts [Input]
useHead({
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',
},
],
})
```
```html [Output]
My Page · My Site
```
::
## Related
- [Canonical Plugin](/docs/head/guides/plugins/canonical) - Auto-generate canonical URLs
- [Infer SEO Meta](/docs/head/guides/plugins/infer-seo-meta-tags) - Auto-generate SEO tags