Unhead
Solid.js
You're viewing Unhead v3 beta documentation. Install with unhead@beta
Plugins

Template Params Plugin

Copy for LLMs
On this page

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:

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:

TokenDescription
%sThe current page title
%separatorSmart 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
<title>Home — MySite</title>

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?

Template params work seamlessly with SEO meta tags 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
<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>

How Do I Use Template Params in Scripts?

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
<script type="application/json">{ "name": "My App" }</script>

How Do I Disable Template Processing?

Add processTemplateParams: false to skip template processing:

Input
useHead({
  title: 'Hello %name',
  templateParams: { name: 'World' },
}, {
  processTemplateParams: false,
})
Output
<title>Hello %name</title>

Common Use Cases

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?

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
<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>

Related

Edit this page
Markdown For LLMs
Did this page help you?

Build Plugins

Optimize your Unhead bundle size with official build plugins for Vite and Webpack

Alias Sorting

Control tag order with before: and after: aliases instead of numeric priorities