---
title: "Template Params Plugin · v2 · Unhead"
meta:
"og:description": "Use template parameters to dynamically generate consistent meta tags across your site"
"og:title": "Template Params Plugin · v2 · Unhead"
description: "Use template parameters to dynamically generate consistent meta tags across your site"
---
**Plugins**
# **Template Params Plugin**
**On this page **
- [What Are Template Params?](#what-are-template-params)
- [How Do I Set Up Template Params?](#how-do-i-set-up-template-params)
- [What Built-in Params Are Available?](#what-built-in-params-are-available)
- [Which Separator Should I Use?](#which-separator-should-i-use)
- [How Do Template Params Work with Meta Tags?](#how-do-template-params-work-with-meta-tags)
- [How Do I Use Template Params in Scripts?](#how-do-i-use-template-params-in-scripts)
- [Common Use Cases](#common-use-cases)
- [Related](#related)
**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?](#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?](#how-do-i-set-up-template-params)
Add the plugin to your Unhead configuration:
Input
```
import { createHead } from 'unhead'
import { TemplateParamsPlugin } from 'unhead/plugins'
const head = createHead({
plugins: [
TemplateParamsPlugin()
]
})
```
## [What Built-in Params Are Available?](#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
Input
```
useHead(unheadInstance, {
title: 'Home',
titleTemplate: '%s %separator %siteName',
templateParams: {
separator: '—', // Use an em dash instead of |
siteName: 'MySite'
}
})
```
Output
```
Home — MySite
```
## [Which Separator Should I Use?](#which-separator-should-i-use)
For better readability, consider these separator alternatives:
Input
```
// Choose a more readable separator
useHead(unheadInstance, {
templateParams: {
separator: '—' // Em dash
// Other options: '-' (hyphen), '•' (bullet), '·' (middot), '❤️' (heart)
}
})
```
## [How Do Template Params Work with Meta Tags?](#how-do-template-params-work-with-meta-tags)
Template params work seamlessly with [**SEO meta tags**](https://unhead.unjs.io/docs/v2/head/api/composables/use-seo-meta) and social sharing:
Input
```
useHead(unheadInstance, {
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!' }
]
})
```
Output
```
Home · MyApp
```
## [How Do I Use Template Params in Scripts?](#how-do-i-use-template-params-in-scripts)
### [Enable for Script and Other Tags](#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
```
```
### [How Do I Disable Template Processing?](#how-do-i-disable-template-processing)
Add `processTemplateParams: false` to skip template processing:
Input
```
useHead(unheadInstance, {
title: 'Hello %name',
templateParams: { name: 'World' },
}, {
processTemplateParams: false,
})
```
Output
```
Hello %name
```
## [Common Use Cases](#common-use-cases)
### [How Do I Maintain Brand Consistency?](#how-do-i-maintain-brand-consistency)
Maintain consistent branding across your site:
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(unheadInstance, {
title: 'Features',
titleTemplate: '%s %separator %brand',
meta: [
{ name: 'description', content: '%brand: %tagline' }
]
})
```
### [Can I Use Nested Objects in Template Params?](#can-i-use-nested-objects-in-template-params)
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](#related)
- [**Canonical Plugin**](https://unhead.unjs.io/docs/v2/head/guides/plugins/canonical) - Auto-generate canonical URLs
- [**Infer SEO Meta**](https://unhead.unjs.io/docs/v2/head/guides/plugins/infer-seo-meta-tags) - Auto-generate SEO tags
[Edit this page](https://github.com/unjs/unhead/edit/v2.1.2/docs/v2/head/1.guides/plugins/6.template-params.md)
**Did this page help you? **
[**Build Plugins** Optimize your Unhead bundle size with official build plugins for Vite and Webpack](https://unhead.unjs.io/docs/v2/head/guides/advanced/vite-plugin) [**Alias Sorting** Control tag order with before: and after: aliases instead of numeric priorities](https://unhead.unjs.io/docs/v2/head/guides/plugins/alias-sorting)
**On this page **
- [What Are Template Params?](#what-are-template-params)
- [How Do I Set Up Template Params?](#how-do-i-set-up-template-params)
- [What Built-in Params Are Available?](#what-built-in-params-are-available)
- [Which Separator Should I Use?](#which-separator-should-i-use)
- [How Do Template Params Work with Meta Tags?](#how-do-template-params-work-with-meta-tags)
- [How Do I Use Template Params in Scripts?](#how-do-i-use-template-params-in-scripts)
- [Common Use Cases](#common-use-cases)
- [Related](#related)