Multiple <meta> tags are merged into a single tag

[mzenz]

Bug description

When multiple meta tags with the same property value are added via useHead() they are merged into a single tag.

import { useHead } from '@vueuse/head'

// this should produce duplicated <meta> tags with different content values
useHead({
  title: 'Hello Vite', meta: [
    { property: 'article:tag', content: 'tag1' },
    { property: 'article:tag', content: 'tag2' },
  ]
})

Observed behavior

Duplicated <meta> tags are merged into one.

Expected behavior

useHead() should create separate <meta> tags with different content values as per OpenGraph specification.

Bug reproduction

https://github.com/mzenz/vueuse-head-meta-bug

Steps to reproduce

• Clone repo: git clone https://github.com/mzenz/vueuse-head-meta-bug
• yarn && yarn dev

[harlan-zw]

Hey @mzenz

There is a fix for this in a big refactor I'm working on.

In the meantime you can avoid the deduping logic from picking these up by using separate keys for each entry

useHead({
  title: 'Hello Vite', meta: [
    { key: 'article-tag-1', property: 'article:tag', content: 'tag1' },
    { key: 'article-tag-2', property: 'article:tag', content: 'tag2' },
  ]
})

[mzenz]

@harlan-zw that workaround works great. Looking forward to that PR, thanks!

[harlan-zw]

You can try this out now in v1 https://github.com/vueuse/head/tree/v1

You can also provide array values for less boilerplate, they will be resolved to the same tags

useHead({
  title: 'Hello Vite', 
  meta: [
    { property: 'article:tag', content: ['tag1', 'tag2'] },
  ]
})

[harlan-zw]

Further documentation is here: https://unhead.harlanzw.com/guide/guides/handling-duplicates

Going to close off this issue now