---
title: "Template Params Plugin"
description: "Use template parameters to dynamically generate consistent meta tags across your site"
navigation.title: "Template Params"
---
## Introduction
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.
## Setup
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()
]
})
```
::
## Built-in Params
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]
<title>Home — MySite</title>
```
::
## Separator Options
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)
}
})
```
::
## Meta Tags and Social Sharing
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]
<head>
<title>Home · MyApp</title>
<meta name="description" content="Welcome to MyApp - where we make awesome happen">
<meta property="og:title" content="Home · MyApp">
<meta property="og:description" content="Check out MyApp today!">
</head>
```
::
## Using with Other Tags
### 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]
<script type="application/json">{ "name": "My App" }</script>
```
::
### Disable for Specific Tags
Add `processTemplateParams: false` to skip template processing:
::code-block
```ts [Input]
useHead({
title: 'Hello %name',
templateParams: { name: 'World' },
}, {
processTemplateParams: false,
})
```
```html [Output]
<title>Hello %name</title>
```
::
## Common Use Cases
### 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' }
]
})
```
::
### Nested Objects
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]
<head>
<title>My Page · My Site</title>
<meta name="description" content="Welcome to My Site.">
<meta property="og:site_name" content="My Site">
<meta property="og:url" content="https://example.com/my-page">
</head>
```
::