docs: add detailed templated title and deduplication

Author: edwintantawi

README.md

@@ -169,30 +169,93 @@ const head = new HeadBuilder({
 
 ### With Templated Title
 
-Set a title template once and dynamically update titles on different pages:
+Set a title template with a default value, then pass page-specific titles as strings. The builder automatically applies the saved template to subsequent title updates:
 
 ```typescript
 import { HeadBuilder } from '@devsantara/head';
 
-// Shared head
+// Create a builder and set title template with default
+// The template stays active for all future addTitle() calls
 const sharedHead = new HeadBuilder().addTitle({
-  template: '%s | My Awesome site', // <- Set title template
-  default: 'Home',
+  template: '%s | My Awesome site', // Store template (%s is the placeholder)
+  default: 'Home', // Initial title using template
 });
-
-// Home page
-const homeHead = sharedHead;
 // Output: <title>Home | My Awesome site</title>
 
-// Posts page
+// Update title for Posts page
+// Pass a string, builder applies the saved template automatically
 const postHead = sharedHead.addTitle('Posts').build();
 // Output: <title>Posts | My Awesome site</title>
 
-// About page
+// Update title for About page
+// Template is still active from the first addTitle() call
 const aboutHead = sharedHead.addTitle('About Us').build();
 // Output: <title>About Us | My Awesome site</title>
 ```
 
+**How it works:**
+
+1. First `addTitle()` with template object stores the template internally
+2. Subsequent `addTitle()` calls with strings automatically use the stored template
+3. The `%s` placeholder gets replaced with your page title
+4. Each title replaces the previous one (deduplication)
+
+### With Element Deduplication
+
+HeadBuilder automatically deduplicates elements—when you add an element matching an existing one, the new one replaces the old:
+
+```typescript
+import { HeadBuilder } from '@devsantara/head';
+
+const head = new HeadBuilder()
+  .addTitle('My Site')
+  .addTitle('Updated Title') // Replaces previous title
+
+  .addDescription('First description')
+  .addDescription('Updated description') // Replaces previous
+
+  .addMeta({ name: 'keywords', content: 'web, development' })
+  .addMeta({ name: 'author', content: 'John Doe' }) // Separate meta tags coexist
+
+  .addCanonical('https://devsantara.com/page1')
+  .addCanonical('https://devsantara.com/page2') // Replaces previous canonical
+
+  .build();
+```
+
+```typescript
+// Output (HeadElement[]):
+[
+  { type: 'title', attributes: { children: 'Updated Title' } },
+  {
+    type: 'meta',
+    attributes: { name: 'description', content: 'Updated description' },
+  },
+  {
+    type: 'meta',
+    attributes: { name: 'keywords', content: 'web, development' },
+  },
+  { type: 'meta', attributes: { name: 'author', content: 'John Doe' } },
+  {
+    type: 'link',
+    attributes: { rel: 'canonical', href: 'https://devsantara.com/page2' },
+  },
+];
+```
+
+**How it works:**
+
+- **Title**: Only one per document
+- **Meta by name**: One per unique `name` attribute (e.g., description, keywords)
+- **Meta by property**: One per unique `property` attribute (e.g., `og:title`, `og:description`)
+- **Charset**: Only one per document
+- **Canonical**: Only one per document
+- **Manifest**: Only one per document
+- **Alternate locales**: One per unique language code
+- **Other tags**: Deduplicated by exact attribute match
+
+This ensures clean metadata without accidental duplicates.
+
 ### With React Adapter
 
 ```tsx