unjs · harlan-zw · Feb 14, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/bench/ssr-harlanzw-com-e2e.test.ts b/bench/ssr-harlanzw-com-e2e.test.ts
@@ -1,6 +1,7 @@
 import type { Head } from '@unhead/schema'
 import { InferSeoMetaPlugin } from '@unhead/addons'
 import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/vue'
+import { TemplateParamsPlugin } from 'unhead/plugins'
 import { describe, it } from 'vitest'
 import { useHead, useSeoMeta, useServerHead } from '../packages/vue/src'
 import { createHead as createServerHead, renderSSRHead } from '../packages/vue/src/server'
@@ -10,7 +11,11 @@ describe('ssr e2e bench', () => {
     // we're going to replicate the logic needed to render the tags for a harlanzw.com page
 
     // 1. Add nuxt.config meta tags
-    const head = createServerHead()
+    const head = createServerHead({
+      plugins: [
+        TemplateParamsPlugin,
+      ],
+    })
     // nuxt.config app.head
     head.push({
       title: 'Harlan Wilton',

diff --git a/docs/1.guides/0.titles.md b/docs/1.guides/0.titles.md
@@ -90,7 +90,7 @@ Creating your own title like this is simple using `useHead()`{lang="ts"} with a
 ```ts twoslash [input.vue]
 useHead({
   title: 'Home',
-  titleTemplate: '%s %separator MySite'
+  titleTemplate: '%s | MySite'
 })
 ```
 
@@ -106,61 +106,26 @@ useHead({
 
 ### Template Params
 
-You may ask why we don't just use a function for the title template, and while this is supported, it can create issues with SSR and hydration.
+Template params are an opt-in plugin make your tags more dynamic. You get `%s` and `%separator` built-in, and can add your own:
 
-Instead, it's recommended to use the params. Out-of-the-box, Unhead provides:
-
-| Token        | Description                                     |
-|--------------|-------------------------------------------------|
-| `%s`         | The current page title.                         |
-| `%separator` | The separator, defaults to a pipe character \|. |
-
-The `%separator` token is smart - it only appears between content and automatically removes itself when the title is empty or when multiple separators would appear.
-
-Define custom template params to maintain consistent formatting:
-
-::code-group
-
-```ts twoslash [input.vue]
+::code-block
+```ts [Input]
 useHead({
   title: 'Home',
   titleTemplate: '%s %separator %siteName',
   templateParams: {
-    seperator: '—',
-    siteName: 'MySite'
+    separator: '·',
+    siteName: 'My Site'
   }
 })
 ```
 
-```html [output.html]
-<head>
-  <title>Home — MySite</title>
-</head>
+```html [Output]
+<title>Home · My Site</title>
 ```
-
 ::
 
-I'd suggest choosing your own separator as the `'|'` is a bit ugly in my opinion, you can try:
-
-```ts
-type Seperator = '-' | '—' | '•' | '·' | '❤️'
-```
-
-You can use template params in other head tags too, such as meta descriptions and open graph tags.
-
-```ts
-useHead({
-  templateParams: {
-    siteName: 'MyApp'
-  },
-  title: 'Home',
-  meta: [
-    { name: 'description', content: 'Welcome to %siteName - where we make awesome happen' },
-    { property: 'og:title', content: 'Home | %siteName' },
-    { property: 'og:description', content: 'Check out %siteName today!' }
-  ]
-})
-```
+Check out the [Template Params](/usage/guides/template-params) guide to get started.
 
 ### Resetting the Title Template
 
@@ -201,12 +166,12 @@ Remembering how to use the meta tags can be annoying, so we can use the [`useSeo
 
 ```ts [input.vue]
 useSeoMeta({
-  titleTemplate: '%s %separator Health Tips',
+  titleTemplate: '%s | Health Tips',
   title: 'Why you should eat more broccoli',
   // og title is not effected by titleTemplate, we can use template params here if we need
-  ogTitle: 'Hey! Health Tips %separator 10 reasons to eat more broccoli.',
+  ogTitle: 'Hey! Health Tips - 10 reasons to eat more broccoli.',
   // explicit twitter title is only needed when we want to display something just for X
-  twitterTitle: 'Hey X! Health Tips %separator 10 reasons to eat more broccoli.',
+  twitterTitle: 'Hey X! Health Tips - 10 reasons to eat more broccoli.',
 })
 ```
 

diff --git a/docs/1.guides/6.template-params.md b/docs/1.guides/6.template-params.md
diff --git a/docs/3.recipes/0.critical-tags.md → docs/plugins/0.critical-tags.md b/docs/3.recipes/0.critical-tags.md → docs/plugins/0.critical-tags.md
diff --git a/docs/3.recipes/0.pausing-dom-rendering.md → docs/plugins/0.pausing-dom-rendering.md b/docs/3.recipes/0.pausing-dom-rendering.md → docs/plugins/0.pausing-dom-rendering.md