Multiple <meta> tags are merged into a single tag
mzenz opened this issue · comments
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
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' },
]
})
@harlan-zw that workaround works great. Looking forward to that PR, thanks!
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'] },
]
})
Further documentation is here: https://unhead.harlanzw.com/guide/guides/handling-duplicates
Going to close off this issue now