diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md
index 591edab4cc1..ff602f9e33c 100644
--- a/docs/content/2.guide/2.features/4.head-management.md
+++ b/docs/content/2.guide/2.features/4.head-management.md
@@ -13,9 +13,7 @@ For example:
 ```vue
 <script setup>
 useHead({
-  titleTemplate: 'My App - %s',
-  // or, instead:
-  // titleTemplate: (title) => `My App - ${title}`,
+  title: 'My App',
   viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
   charset: 'utf-8',
   meta: [
@@ -31,6 +29,34 @@ useHead({
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
+## Title Templates
+
+You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site, for example, by adding the name of your site to the title of every page.
+
+Create a `title.js` plugin within your `plugins` folder, with the following code:
+
+```js
+export default defineNuxtPlugin(() => {
+  useHead({
+    titleTemplate: (titleChunk) => {
+      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
+    },
+  });
+});
+```
+
+Then you can set a title as you usually would:
+
+```vue [/pages/my-page.vue]
+<script setup>
+  useHead({
+    title: 'My Page'
+  });
+</script>
+```
+
+This will now appear as 'My Page - Site Title' in the browser tab. You can also pass `null` to default to the site title.
+
 ## Meta Components
 
 Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
