--- title: "Template Params Plugin" description: "Dynamic placeholders like %s and %siteName in head tags. Define site name, separator, and custom variables for consistent branding." canonical_url: "https://unhead.unjs.io/docs/head/guides/plugins/template-params" last_updated: "2026-08-03T02:21:33.126Z" --- 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: ```ts [Input] import { createHead } from '@unhead/dynamic-import/client' import { TemplateParamsPlugin } from '@unhead/dynamic-import/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 ```ts [Input] useHead({ title: 'Home', titleTemplate: '%s %separator %siteName', templateParams: { separator: '—', // Use an em dash instead of | siteName: 'MySite' } }) ``` ```html [Output] Home — MySite ``` ## Separators Choose a separator that matches the site's title style: ```ts [Input] // Choose a more readable separator useHead({ templateParams: { separator: '—' // Em dash // Other options: '-' (hyphen), '•' (bullet), '·' (middot), '❤️' (heart) } }) ``` ## Meta tags Template params also work with [SEO meta tags](/docs/head/api/composables/use-seo-meta) and social metadata: ```ts [Input] useHead({ 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!' } ] }) ``` ```html [Output] Home · MyApp ``` ## Scripts and other inline content ### Enable for Script and Other Tags For tags using `innerHTML` or `textContent`, add `processTemplateParams: true`: ```ts [Input] useHead({ templateParams: { name: 'My App' }, script: [ { innerHTML: { name: '%name' }, type: 'application/json', processTemplateParams: true } ] }) ``` ```html [Output] ``` ### Disabling template processing Add `processTemplateParams: false` to skip template processing: ```ts [Input] useHead({ title: 'Hello %name', templateParams: { name: 'World' }, }, { processTemplateParams: false, }) ``` ```html [Output] Hello %name ``` ## Shared and nested values ### Shared brand values Define shared brand values once, then reference them from page entries: ```ts [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({ title: 'Features', titleTemplate: '%s %separator %brand', meta: [ { name: 'description', content: '%brand: %tagline' } ] }) ``` ### Nested objects Use nested objects for more structured data: ```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): Normalize absolute URLs - [Infer SEO Meta](/docs/head/guides/plugins/infer-seo-meta-tags): Generate social metadata