fix(unhead): dedupe link rel without hreflang or type (#658)

Author: danielroe

packages/unhead/src/utils/dedupe.ts

@@ -29,9 +29,12 @@ export function dedupeKey<T extends HeadTag>(tag: T): string | undefined {
   if (name === 'link' && props.rel === 'canonical')
     return 'canonical'
 
-  const altKey = props.hreflang || props.type
-  if (name === 'link' && props.rel === 'alternate' && altKey) {
-    return `alternate:${altKey}`
+  // dedupe alternate links with hreflang/type by that attribute
+  if (name === 'link' && props.rel === 'alternate') {
+    const altKey = props.hreflang || props.type
+    if (altKey) {
+      return `alternate:${altKey}`
+    }
   }
 
   if (props.charset)
@@ -59,6 +62,11 @@ export function dedupeKey<T extends HeadTag>(tag: T): string | undefined {
     return `${name}:id:${props.id}`
   }
 
+  // bare alternate links (no hreflang/type/key/id) dedupe by href
+  if (name === 'link' && props.rel === 'alternate') {
+    return `alternate:${props.href || ''}`
+  }
+
   // avoid duplicate tags with the same content (if no key is provided)
   if (TagsWithInnerContent.has(name)) {
     const v = tag.textContent || tag.innerHTML

packages/unhead/test/unit/server/deduping.test.ts

@@ -646,7 +646,7 @@ describe('dedupe', () => {
     expect(headTags).toContain('atom.xml')
   })
 
-  it('bare alternate without hreflang or type falls through to generic deduping', async () => {
+  it('bare alternate without hreflang or type dedupes by href', async () => {
     const head = createServerHeadWithContext()
     head.push({
       link: [
@@ -655,7 +655,101 @@ describe('dedupe', () => {
       ],
     })
     const { headTags } = await renderSSRHead(head)
-    // both should exist since no dedupe key matched
+    // both should exist since they have different hrefs
     expect(headTags.split('rel="alternate"').length).toBe(3)
   })
+
+  it('dedupes bare alternate links with same href on hydration', async () => {
+    const head = createServerHeadWithContext()
+    head.push({
+      link: [
+        { rel: 'alternate', href: '/' },
+      ],
+    })
+    // Simulate hydration - push the same link again
+    head.push({
+      link: [
+        { rel: 'alternate', href: '/' },
+      ],
+    })
+    const { headTags } = await renderSSRHead(head)
+    // Should only have 1 alternate link
+    expect(headTags.split('rel="alternate"').length).toBe(2)
+  })
+
+  it('dedupes bare alternate links without href on hydration', async () => {
+    const head = createServerHeadWithContext()
+    head.push({
+      link: [
+        { rel: 'alternate' },
+      ],
+    })
+    // Simulate hydration - push the same link again
+    head.push({
+      link: [
+        { rel: 'alternate' },
+      ],
+    })
+    const { headTags } = await renderSSRHead(head)
+    // Should only have 1 alternate link
+    expect(headTags.split('rel="alternate"').length).toBe(2)
+  })
+
+  it('dedupes alternate links by id (i18n use case)', async () => {
+    const head = createServerHeadWithContext()
+    head.push({
+      link: [
+        { id: 'i18n-alt-nl', rel: 'alternate', href: 'http://localhost:3000/nl/products/big-chair', hreflang: 'nl' },
+      ],
+    })
+    // Simulate dynamic parameter translation update
+    head.push({
+      link: [
+        { id: 'i18n-alt-nl', rel: 'alternate', href: 'http://localhost:3000/nl/products/grote-stoel', hreflang: 'nl' },
+      ],
+    })
+    const { headTags } = await renderSSRHead(head)
+    // Should only have 1 alternate link - last one wins via hreflang dedupe
+    expect(headTags.split('rel="alternate"').length).toBe(2)
+    expect(headTags).toContain('grote-stoel')
+    expect(headTags).not.toContain('big-chair')
+  })
+
+  it('alternate links with key dedupe by key', async () => {
+    const head = createServerHeadWithContext()
+    head.push({
+      link: [
+        { key: 'my-alt', rel: 'alternate', href: 'https://example.com/a' },
+      ],
+    })
+    head.push({
+      link: [
+        { key: 'my-alt', rel: 'alternate', href: 'https://example.com/b' },
+      ],
+    })
+    const { headTags } = await renderSSRHead(head)
+    // Should have 1 alternate link deduped by key - last one wins
+    expect(headTags.split('rel="alternate"').length).toBe(2)
+    expect(headTags).toContain('https://example.com/b')
+    expect(headTags).not.toContain('https://example.com/a')
+  })
+
+  it('alternate links with id dedupe by id when no hreflang', async () => {
+    const head = createServerHeadWithContext()
+    head.push({
+      link: [
+        { id: 'my-feed', rel: 'alternate', href: 'https://example.com/feed-v1.xml' },
+      ],
+    })
+    head.push({
+      link: [
+        { id: 'my-feed', rel: 'alternate', href: 'https://example.com/feed-v2.xml' },
+      ],
+    })
+    const { headTags } = await renderSSRHead(head)
+    // Should have 1 alternate link deduped by id - last one wins
+    expect(headTags.split('rel="alternate"').length).toBe(2)
+    expect(headTags).toContain('feed-v2.xml')
+    expect(headTags).not.toContain('feed-v1.xml')
+  })
 })