Template Params Plugin · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/solid-js/head/api/get-started/overview) [Releases](https://unhead.unjs.io/docs/solid-js/releases/v3) Solid.js - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/plugins/template-params) - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/plugins/template-params) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/plugins/template-params) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/plugins/template-params) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/plugins/template-params) v3 (stable) Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - Get Started - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/loading-scripts) - [Reactivity](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity) - [StreamingNew](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming) - Build Plugins - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/overview) - [Tree-Shaking](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/tree-shaking) - [useSeoMeta Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/seo-meta-transform) - [Minify Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/minify-transform) - [Devtools](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/devtools) - Plugins - [Template Params](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/validate) 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) Last updated Apr 9, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [refactor(bundler)!: named Unhead export, ctx-based transforms, dev-mode validate (#733)](https://github.com/unjs/unhead/pull/733). 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/solid-js' import { TemplateParamsPlugin } from '@unhead/solid-js/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({ 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({ 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/head/api/composables/use-seo-meta) and social sharing: 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!' } ] }) ``` 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({ 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({ 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({ 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({ 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/head/guides/plugins/canonical) - Auto-generate canonical URLs - [Infer SEO Meta](https://unhead.unjs.io/docs/head/guides/plugins/infer-seo-meta-tags) - Auto-generate SEO tags [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? [Devtools Inspect head tags, SEO metadata, entries, and source locations in the Vite DevTools panel. Enabled by default in development.](https://unhead.unjs.io/docs/head/guides/build-plugins/devtools) [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 - [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) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Head Management - [Getting Started](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/solid-js/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/solid-js/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) - [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer) ### Articles - [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo) ### Research - [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026) - [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance) - [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)